Rune upgrades reportpage. Runes page. CSS improvements.

application/Controller.php

@@ -8,8 +8,10 @@
     require_once($path["page"] . "Monsters_Page.php");
     require_once($path["page"] . "Monster_Page.php");
     require_once($path["page"] . "Catalog_Page.php");
+    require_once($path["page"] . "Runes_Page.php");
     require_once($path["page"] . "Report_Page.php");
     require_once($path["page"] . "Report_Skillup_Page.php");
+    require_once($path["page"] . "Report_Runeupgrade_Page.php");
     /*foreach (glob($path["page"] . "*.php") as $pagename){
         require_once($pagename);
     }
@@ -81,6 +83,9 @@
                     elseif (strtoupper($pars[1]) == "SKILLUP"){
                         $page = new Report_Skillup_Page($db, $pars[1]);
                     }
+                    elseif (strtoupper($pars[1]) == "RUNEUPGRADE"){
+                        $page = new Report_Runeupgrade_Page($db, $pars[1]);
+                    }
                 }
                 elseif (strtoupper($pars[0]) == "FRAME"){
                     if (strtoupper($pars[1]) == "PORTRAIT"){

application/handler/Collection_Handler.php

@@ -1,106 +0,0 @@
-<?php
-
-    require_once($path["handler"] . "Handler.php");
-    require_once($path["entity"] . "Collection.php");
-
-
-    /**
-     * Handles the update of a monster in the collection.
-     */
-    class Collection_Handler extends Handler{
-
-        /**
-         * Constructor.
-         *
-         * Handles the database operation.
-         *
-         * @param SQLite3 $db Connection to the database.
-         * @param int $id Monster identifier in the collection. Will be ignored
-         *                when inserting.
-         * @param string $mode 'insert', 'update' or 'delete'.
-         * @param string[] $params Array of parameters with the properties to
-         *                         modify. Will ony use 'monster', 'stars',
-         *                         'level' and 'awaken'. Will be ignored when
-         *                         deleting. All of them are required when
-         *                         inserting.
-         */
-        public function __construct($db, $id, $mode, $params){
-            parent::__construct($db, new Collection($db, $id));
-            if (strtoupper($mode{0}) == "I"){
-                $this->insert($params);
-            }
-            elseif(strtoupper($mode{0}) == "D"){
-                $this->delete();
-            }
-            elseif(strtoupper($mode{0}) == "U"){
-                $this->update($params);
-            }
-            else{
-                error_log("Collection_Handler::__construct : Unknown mode " + $mode);
-                $this->response = 400;
-            }
-        }
-
-        private function insert($params){
-            $s =
-              "INSERT INTO collection (monster, stars, level, awaken) VALUES( " .
-                 $params["monster"] . ", " .
-                 $params["stars"] . ", " .
-                 $params["level"] . ", " .
-                 $params["awaken"] . " " .
-              "); ";
-            if ($this->db->exec($s)){
-                $this->response = 200;
-            }
-            else{
-                error_log("Collection_Handler::insert : Query error for --" + $s + "-- " + mysqli_error($this->db));
-                $this->response = 400;
-            }
-        }
-
-        private function delete(){
-            $s =
-              "UPDATE collection SET " .
-              "  stars = 0, " .
-              "  level = 0, " .
-              "  awaken = 0 " .
-              "WHERE id = " . $this->entity->id . "; ";
-            if ($this->db->exec($s)){
-                $this->response = 200;
-            }
-            else{
-                error_log("Collection_Handler::delete : Query error for --" + $s + "-- " + mysqli_error($this->db));
-                $this->response = 400;
-            }
-        }
-
-        private function update($params){
-            if (isset($params["monster"])){
-                $this->entity->monster = new Monster($params["monster"]);
-            }
-            if (isset($params["stars"])){
-                $this->entity->stars = $params["stars"];
-            }
-            if (isset($params["level"])){
-                $this->entity->level = $params["level"];
-            }
-            if (isset($params["awaken"])){
-                $this->entity->awaken = $params["awaken"];
-            }
-            $s =
-              "UPDATE collection SET " .
-              "  monster = " . $this->monster->id . ", " .
-              "  stars = " . $this->stars . ", " .
-              "  level = " . $this->level . ", " .
-              "  awaken = " . $this->awaken . " " .
-              "WHERE id = " . $this->entity->id . "; ";
-            if ($this->db->exec($s)){
-                $this->response = 200;
-            }
-            else{
-                error_log("Collection_Handler::update : Query error for --" + $s + "-- " + mysqli_error($this->db));
-                $this->response = 400;
-            }
-        }
-    }
-?>

application/handler/Handler.php

@@ -1,36 +0,0 @@
-<?php
-
-
-    /**
-     * Handles the update of a monster in the collection.
-     */
-    class Handler{
-
-        /**
-         * {@see Entity} to be updated or created.
-         */
-        public $entity;
-
-        /**
-         * Database connection.
-         */
-        public $db;
-
-        /**
-         * HTTP status code after the operations.
-         */
-        public $response;
-
-        /**
-         * Constructor.
-         *
-         *
-         * @param MySQL_connection $db Connection to the database.
-         * @param Entity $entity Entity to be updated.
-         */
-        public function __construct($db, $entity){
-            $this->db = $db;
-            $this->entity = $entity;
-        }
-    }
-?>

application/page/Catalog_Page.php

@@ -45,9 +45,11 @@
         }
         
         private function parse_filters(){
-            $f_element = strtoupper($_GET["element"]);
-            if ($f_element == "FIRE" || $f_element == "WATER" || $f_element == "WIND" || $f_element == "LIGHT" || $f_element == "DARK"){
-                $this->filters["element"] = $_GET["element"];
+            if (isset($_GET["element"])){
+                $f_element = strtoupper($_GET["element"]);
+                if ($f_element == "FIRE" || $f_element == "WATER" || $f_element == "WIND" || $f_element == "LIGHT" || $f_element == "DARK"){
+                    $this->filters["element"] = $_GET["element"];
+                }
             }
             if (isset($_GET["name"]) && strlen($_GET["name"]) > 0){
                 $this->filters["name"] = SQLite3::escapeString($_GET["name"]);

application/page/Monster_Page.php

@@ -14,6 +14,24 @@
          */
         public $monsters;
 
+        /**
+         * Stats gained by building.
+         */
+        public $building_stats = [
+            "atk" => 0,
+            "def" => 0,
+            "hp" => 0,
+            "spd" => 0,
+            "crd" => 0,
+            "elm" => [
+                "Fire" => 0,
+                "Water" => 0,
+                "Wind" => 0,
+                "Light" => 0,
+                "Dark" => 0
+            ]
+        ];
+
         /**
          * Constructor.
          *
@@ -27,10 +45,58 @@
             global $root;
             parent::__construct($db);
             $this->view = $path["view"] . "monster.php";
+            $this->calculate_buildings();
             $this->monster = new Monster($db, $id);
             $this->title = $this->monster->monster->name ." - SWDB";
             $this->description = "Owned " . $this->monster->monster->name;
             $this->canonical = $root . "monster/" . $id;
         }
+
+        /**
+         * Calculates the stats gained from bulding upgrades and populates the
+         * $building_stats array.
+         */
+        private function calculate_buildings(){
+            $s =
+              "SELECT " .
+              "  affected_stat, " .
+              "  bonus, " .
+              "  element " .
+              "FROM " .
+              "  k_building, " .
+              "  k_building_level, " .
+              "  building " .
+              "WHERE " .
+              "  k_building.id = building.building AND " .
+              "  building.building = k_building_level.building AND " .
+              "  building.level = k_building_level.level AND " .
+              "  area = 'Everywhere' AND " .
+              "  affected_stat IN ('ATK', 'DEF', 'HP', 'SPD', 'CRI Dmg');";
+            $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                switch($r["affected_stat"]){
+                    case "DEF":
+                        $this->building_stats["def"] += $r["bonus"];
+                        break;
+                    case "HP":
+                        $this->building_stats["hp"] += $r["bonus"];
+                        break;
+                    case "SPD":
+                        $this->building_stats["spd"] += $r["bonus"];
+                        break;
+                    case "CRI Dmg":
+                        $this->building_stats["crd"] += $r["bonus"];
+                        break;
+                    case "ATK":
+                        if(strlen($r["element"]) > 0){
+                            $this->building_stats["elm"][$r["element"]] += $r["bonus"];
+                        }
+                        else{
+                            $this->building_stats["atk"] += $r["bonus"];
+                        }
+                        break;
+                }
+            }
+        }
     }
 ?>

application/page/Monsters_Page.php

@@ -3,7 +3,6 @@
     require_once($path["page"] . "Page.php");
     require_once($path["entity"] . "Monster.php");
 
-
     /**
      * Monster list page.
      */
@@ -14,6 +13,9 @@
          */
         public $monsters = [];
 
+        /**
+         * The filters the page canhandle.
+         */
         public $filters = [
             "element" => "",
             "name" => "",
@@ -23,6 +25,24 @@
             "without_runes" => true
         ];
 
+        /**
+         * Stats gained by building.
+         */
+        public $building_stats = [
+            "atk" => 0,
+            "def" => 0,
+            "hp" => 0,
+            "spd" => 0,
+            "crd" => 0,
+            "elm" => [
+                "Fire" => 0,
+                "Water" => 0,
+                "Wind" => 0,
+                "Light" => 0,
+                "Dark" => 0
+            ]
+        ];
+
         /**
          * Constructor.
          *
@@ -36,6 +56,7 @@
             parent::__construct($db);
             $this->view = $path["view"] . "monsters.php";
             $this->parse_filters();
+            $this->calculate_buildings();
             $s_mon = $this->build_query();
             $q_mon = $this->db->query($s_mon);
             while ($r_mon = $q_mon->fetchArray(SQLITE3_ASSOC)){
@@ -46,10 +67,16 @@
             $this->canonical = $root . "monsters/";
         }
 
+        /**
+         * Parses the request looking for the selected filters, validates them
+         * and adds them to the $filters array.
+         */
         private function parse_filters(){
-            $f_element = strtoupper($_GET["element"]);
-            if ($f_element == "FIRE" || $f_element == "WATER" || $f_element == "WIND" || $f_element == "LIGHT" || $f_element == "DARK"){
-                $this->filters["element"] = $_GET["element"];
+            if (isset($_GET["element"])){
+                $f_element = strtoupper($_GET["element"]);
+                if ($f_element == "FIRE" || $f_element == "WATER" || $f_element == "WIND" || $f_element == "LIGHT" || $f_element == "DARK"){
+                    $this->filters["element"] = $_GET["element"];
+                }
             }
             if (isset($_GET["name"]) && strlen($_GET["name"]) > 0){
                 $this->filters["name"] = SQLite3::escapeString($_GET["name"]);
@@ -60,15 +87,21 @@
             if (isset($_GET["max_stars"]) && intval($_GET["max_stars"]) > 0 && intval($_GET["max_stars"]) < 7){
                 $this->filters["max_stars"] = $_GET["max_stars"];
             }
-            if ($_GET["in_storage"] != "on"){
+            if (isset($_GET["in_storage"]) && $_GET["in_storage"] != "on"){
                 $this->filters["in_storage"] = false;
             }
-            if ($_GET["without_runes"] != "on"){
+            if (isset($_GET["without_runes"]) && $_GET["without_runes"] != "on"){
                 $this->filters["without_runes"] = false;
             }
             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 monster.id AS id FROM monster, k_monster WHERE monster.monster = k_monster.id AND stars >= " . $this->filters["min_stars"] . " AND stars <= " . $this->filters["max_stars"];
             if (strlen($this->filters["element"]) > 0){
@@ -81,10 +114,57 @@
                 $s = $s . " AND in_storage = 0 ";
             }
             if (!$this->filters["without_runes"]){
-                $s = $s . " AND id IN (SELECT DISTINCT monster FROM monster_rune) ";
+                $s = $s . " AND monster.id IN (SELECT DISTINCT monster FROM monster_rune) ";
             }
             $s = $s . " ORDER BY stars DESC, level DESC, element;";
             return $s;
         }
+
+        /**
+         * Calculates the stats gained from bulding upgrades and populates the
+         * $building_stats array.
+         */
+        private function calculate_buildings(){
+            $s =
+              "SELECT " .
+              "  affected_stat, " .
+              "  bonus, " .
+              "  element " .
+              "FROM " .
+              "  k_building, " .
+              "  k_building_level, " .
+              "  building " .
+              "WHERE " .
+              "  k_building.id = building.building AND " .
+              "  building.building = k_building_level.building AND " .
+              "  building.level = k_building_level.level AND " .
+              "  area = 'Everywhere' AND " .
+              "  affected_stat IN ('ATK', 'DEF', 'HP', 'SPD', 'CRI Dmg');";
+            $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                switch($r["affected_stat"]){
+                    case "DEF":
+                        $this->building_stats["def"] += $r["bonus"];
+                        break;
+                    case "HP":
+                        $this->building_stats["hp"] += $r["bonus"];
+                        break;
+                    case "SPD":
+                        $this->building_stats["spd"] += $r["bonus"];
+                        break;
+                    case "CRI Dmg":
+                        $this->building_stats["crd"] += $r["bonus"];
+                        break;
+                    case "ATK":
+                        if(strlen($r["element"]) > 0){
+                            $this->building_stats["elm"][$r["element"]] += $r["bonus"];
+                        }
+                        else{
+                            $this->building_stats["atk"] += $r["bonus"];
+                        }
+                        break;
+                }
+            }
+        }
     }
 ?>

application/page/Report_Runeupgrade_Page.php

@@ -0,0 +1,162 @@
+ <?php
+
+    require_once($path["page"] . "Page.php");
+    require_once($path["entity"] . "Monster.php");
+    require_once($path["entity"] . "Rune.php");
+
+    /**
+     * Upgradeable runes report page.
+     */
+    class Report_Runeupgrade_Page extends Page{
+
+        /**
+         * Filtrs the eport can handle.
+         */
+        public $filters = [
+            "min_stars" => 5,
+            "max_stars" => 6,
+            "in_storage" => true,
+        ];
+
+        /**
+         * List of available upgrades. Can be described as:
+         * $upgrades = [
+         *   [
+         *     monster (Monster),
+         *     upgrade = [
+         *       [
+         *         rune (Rune),
+         *         alternative = [(Rune)]
+         *       ]
+         *     ]
+         *   ]
+         * ]
+         */
+        public $upgrades = [];
+
+        /**
+         * Constructor.
+         *
+         * Retrieves the data and initializes the variables.
+         *
+         * @param SQLite3 $db Connection to the database.
+         */
+        public function __construct($db){
+            global $path;
+            global $root;
+            parent::__construct($db);
+            $this->view = $path["view"] . "report_runeupgrade.php";
+            $this->parse_filters();
+            $s = $this->build_query();
+            $q = $this->db->query($s);
+            $prev_monster = "";
+            $prev_rune = "";
+            $upgrade = null;
+            $rupgrade = null;
+            $rune_i = 0; // DEBUG
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                if ($r["monster"] != $prev_monster){
+                    if ($prev_rune != ""){
+                        array_push($upgrade["upgrade"], $rupgrade);
+                    }
+                    if ($prev_monster != ""){
+                        array_push($this->upgrades, $upgrade);
+                    }
+                    $prev_monster = $r["monster"];
+                    $prev_rune = "";
+                    $upgrade = [
+                        "monster" => new Monster($this->db, $r["monster"]),
+                        "upgrade" => [],
+                    ];
+                    $rupgrade = [
+                        "rune" => new Rune($this->db, $r["id"]),
+                        "alternative" => [],
+                    ];
+                }
+                if ($r["id"] != $prev_rune){
+                    if ($prev_rune != ""){
+                        array_push($upgrade["upgrade"], $rupgrade);
+                    }
+                    $prev_rune = $r["id"];
+                    $rupgrade = [
+                        "rune" => new Rune($this->db, $r["id"]),
+                        "alternative" => [],
+                    ];
+                }
+                array_push($rupgrade["alternative"], new Rune($this->db, $r["alternative"]));
+                $rune_i ++;
+            }
+            // Last entries
+            array_push($upgrade["upgrade"], $rupgrade);
+            array_push($this->upgrades, $upgrade);
+            $this->title = "Replaceable runes - SWDB";
+            $this->description = "Find equiped runes that can be substituted for better ones.";
+            $this->canonical = $root . "report/runeupgrade/";
+        }
+
+        /**
+         * Parses the filters passed in the request and sets $filters.
+         * Filters must be in $_GET, nd the available ones are max_stars (1-6),
+         * min_stars (1-6) and in_storage (on/off).
+         */
+        private function parse_filters(){
+            if (isset($_GET["min_stars"]) && intval($_GET["min_stars"]) > 0 && intval($_GET["min_stars"]) < 7){
+                $this->filters["min_stars"] = $_GET["min_stars"];
+            }
+            if (isset($_GET["max_stars"]) && intval($_GET["max_stars"]) > 0 && intval($_GET["max_stars"]) < 7){
+                $this->filters["max_stars"] = $_GET["max_stars"];
+            }
+            if (isset($_GET["in_storage"]) && $_GET["in_storage"] != "on"){
+                $this->filters["in_storage"] = false;
+            }
+            return;
+        }
+
+        /**
+         * Builds the query for the page, using the providded or default filters.
+         *
+         * @return The query to be executed.
+         */
+        private function build_query(){
+            $s =
+              "  SELECT " .
+              "  monster.id AS monster, " .
+              "  rune.id AS id, " .
+              "  rune_alt.id AS alternative " .
+              "FROM " .
+              "  rune, " .
+              "  rune rune_alt, " .
+              "  monster " .
+              "WHERE " .
+              "  monster.id = rune.assigned_to AND " .
+              "  monster.stars >= " . $this->filters["min_stars"] . " AND " .
+              "  monster.stars <= " . $this->filters["max_stars"] . " AND " .
+              "  rune.assigned_to IS NOT NULL AND " .
+              "  rune_alt.assigned_to IS NULL AND " .
+              "  rune.type = rune_alt.type AND " .
+              "  rune.slot = rune_alt.slot AND " .
+              "  rune.main_stat = rune_alt.main_stat AND " .
+              "  ( " .
+              "    rune_alt.stars > rune.stars OR " .
+              "    ( " .
+              "      rune_alt.stars = rune.stars AND " .
+              "      rune_alt.original_quality > rune.original_quality" .
+              "    ) " .
+              "  ) ";
+            if (!$this->filters["in_storage"]){
+                $s = $s . " AND monster.in_storage = 0 ";
+            }
+            $s = $s .
+              "ORDER BY " .
+              "  monster.stars DESC, " .
+              "  monster.level DESC, " .
+              "  monster.id, " .
+              "  rune.slot, " .
+              "  id, " .
+              "  rune_alt.stars, " .
+              "  rune_alt.original_quality, " .
+              "  rune_alt.main_stat_value;";
+            return $s;
+        }
+    }
+?>

application/page/Report_Skillup_Page.php

@@ -60,10 +60,10 @@
             if (isset($_GET["max_natural_stars"]) && intval($_GET["max_natural_stars"]) > 0 && intval($_GET["max_natural_stars"]) < 6){
                 $this->filters["max_natural_stars"] = $_GET["max_natural_stars"];
             }
-            if ($_GET["in_storage"] != "on"){
+            if (isset($_GET["in_storage"]) && $_GET["in_storage"] != "on"){
                 $this->filters["in_storage"] = false;
             }
-            if ($_GET["without_runes"] != "on"){
+            if (isset($_GET["without_runes"]) && $_GET["without_runes"] != "on"){
                 $this->filters["without_runes"] = false;
             }
             return;

application/page/Runes_Page.php

@@ -1,13 +1,45 @@
-<?php
+ <?php
 
     require_once($path["page"] . "Page.php");
-
+    require_once($path["entity"] . "Rune.php");
+    require_once($path["entity"] . "Monster.php");
 
     /**
-     * Runes page model.
+     * Rune list page.
      */
     class Runes_Page extends Page{
 
+        /**
+         * Array of @{see Rune}s.
+         * NOTE: In this case, the monster member is not the id, but a monster
+         * instance.
+         */
+        public $runes = [];
+
+        /**
+         * The filters the page can handle.
+         */
+        public $filters = [
+            "type" => [],
+            "main" => [],
+            "sub" => [],
+            "slot" => [],
+            "min_quality" => 0,
+            "max_quality" => 4,
+            "min_original_quality" => 0,
+            "max_original_quality" => 4,
+            "min_stars" => 1,
+            "max_stars" => 6,
+            "min_level" => 0,
+            "max_level" => 15,
+            "min_efficiency" => 0,
+            "max_efficiency" => 100,
+            "min_max_efficiency" => 0,
+            "max_max_efficiency" => 100,
+            "assigned" => 0,
+            "group" => "SLOT"
+        ];
+
         /**
          * Constructor.
          *
@@ -20,9 +52,158 @@
             global $root;
             parent::__construct($db);
             $this->view = $path["view"] . "runes.php";
+            $this->parse_filters();
+            $s = $this->build_query();
+            $q = $this->db->query($s);
+            while ($r = $q->fetchArray(SQLITE3_ASSOC)){
+                $rune = new Rune($db, $r["id"]);
+                if (strlen($rune->assigned_to) > 0){
+                    $rune->assigned_to = new Monster($this->db, $rune->assigned_to);
+                }
+                array_push($this->runes, $rune);
+        }
             $this->title = "Runes - SWDB";
-            $this->description = "Collection of runes";
+            $this->description = "Rune inventory";
             $this->canonical = $root . "runes/";
         }
+
+        /**
+         * Parses the request looking for the selected filters, validates them
+         * and adds them to the $filters array.
+         */
+        private function parse_filters(){
+            if (isset($_GET["type"])){
+                $types = $_GET["type"];
+                foreach ($types as $type){
+                    array_push($this->filters["type"], strtoupper(SQLite3::escapeString($type)));
+                }
+            }
+            if (isset($_GET["main"])){
+                $mains = $_GET["main"];
+                foreach ($mains as $main){
+                    array_push($this->filters["main"], strtoupper(SQLite3::escapeString($main)));
+                }
+            }
+            if (isset($_GET["sub"])){
+                $subs = $_GET["sub"];
+                foreach ($subs as $sub){
+                    array_push($this->filters["sub"], strtoupper(SQLite3::escapeString($sub)));
+                }
+            }
+            if (isset($_GET["slot"])){
+                $slots = $_GET["slot"];
+                foreach ($slots as $slot){
+                    if (intval($slot) > 1 && intval($slot) < 7){
+                        array_push($this->filters["slot"], intval($slot));
+                    }
+                }
+            }
+            if (isset($_GET["min_stars"]) && intval($_GET["min_stars"]) > 0 && intval($_GET["min_stars"]) < 7){
+                $this->filters["min_stars"] = $_GET["min_stars"];
+            }
+            if (isset($_GET["max_stars"]) && intval($_GET["max_stars"]) > 0 && intval($_GET["max_stars"]) < 7){
+                $this->filters["max_stars"] = $_GET["max_stars"];
+            }
+            if (isset($_GET["min_level"]) && intval($_GET["min_level"]) >= 0 && intval($_GET["min_level"]) <= 15){
+                $this->filters["min_level"] = $_GET["min_level"];
+            }
+            if (isset($_GET["max_level"]) && intval($_GET["max_level"]) >= 0 && intval($_GET["max_level"]) <= 15){
+                $this->filters["max_level"] = $_GET["max_level"];
+            }
+            if (isset($_GET["min_quality"]) && intval($_GET["min_quality"]) >= 0 && intval($_GET["min_quality"]) < 5){
+                $this->filters["min_quality"] = $_GET["min_quality"];
+            }
+            if (isset($_GET["max_quality"]) && intval($_GET["max_quality"]) >= 0 && intval($_GET["max_quality"]) < 5){
+                $this->filters["max_quality"] = $_GET["max_quality"];
+            }
+            if (isset($_GET["min_original_quality"]) && intval($_GET["min_original_quality"]) >= 0 && intval($_GET["min_original_quality"]) < 5){
+                $this->filters["min_original_quality"] = $_GET["min_original_quality"];
+            }
+            if (isset($_GET["max_original_quality"]) && intval($_GET["max_original_quality"]) >= 0 && intval($_GET["max_original_quality"]) < 5){
+                $this->filters["max_original_quality"] = $_GET["max_original_quality"];
+            }
+            if (isset($_GET["min_efficiency"]) && intval($_GET["min_efficiency"]) >= 0 && intval($_GET["min_efficiency"]) <= 100){
+                $this->filters["min_efficiency"] = $_GET["min_efficiency"];
+            }
+            if (isset($_GET["max_efficiency"]) && intval($_GET["max_efficiency"]) >= 0 && intval($_GET["max_efficiency"]) <= 100){
+                $this->filters["max_efficiency"] = $_GET["max_efficiency"];
+            }
+            if (isset($_GET["min_max_efficiency"]) && intval($_GET["min_max_efficiency"]) >= 0 && intval($_GET["min_max_efficiency"]) <= 100){
+                $this->filters["min_max_efficiency"] = $_GET["min_max_efficiency"];
+            }
+            if (isset($_GET["max_max_efficiency"]) && intval($_GET["max_max_efficiency"]) >= 0 && intval($_GET["max_max_efficiency"]) <= 100){
+                $this->filters["max_max_efficiency"] = $_GET["max_max_efficiency"];
+            }
+            if (isset($_GET["assigned"]) && intval($_GET["assigned"]) >= 0 && intval($_GET["assigned"]) <= 4){
+                $this->filters["assigned"] = $_GET["assigned"];
+            }
+            if (isset($_GET["group"]) && ($_GET["group"] == "SLOT" || $_GET["group"] == "TYPE")){
+                $this->filters["group"] = $_GET["group"];
+            }
+            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, " .
+              "  assigned_to " .
+              "FROM rune " .
+              "WHERE " .
+              "  stars >= " . $this->filters["min_stars"] . " AND " .
+              "  stars <= " . $this->filters["max_stars"] . " AND " .
+              "  level >= " . $this->filters["min_level"] . " AND " .
+              "  level <= " . $this->filters["max_level"] . " AND " .
+              "  quality >= " . $this->filters["min_quality"] . " AND " .
+              "  quality <= " . $this->filters["max_quality"] . " AND " .
+              "  original_quality >= " . $this->filters["min_original_quality"] . " AND " .
+              "  original_quality <= " . $this->filters["max_original_quality"] . " AND " .
+              "  efficiency >= " . $this->filters["min_efficiency"] . " AND " .
+              "  efficiency <= " . $this->filters["max_efficiency"] . " AND " .
+              "  max_efficiency >= " . $this->filters["min_max_efficiency"] . " AND " .
+              "  max_efficiency <= " . $this->filters["max_max_efficiency"] . " ";
+            if (count($this->filters["type"]) > 0){
+                $s = $s . " AND upper(type) IN ( ";
+                foreach($this->filters["type"] as $t){
+                    $s = $s . "'$t', ";
+                }
+                $s = $s . "'DUMMY0') ";
+            }
+            if (count($this->filters["slot"]) > 0){
+                $s = $s . " AND slot IN ( ";
+                foreach($this->filters["slot"] as $t){
+                    $s = $s . "$t, ";
+                }
+                $s = $s . "-1) ";
+            }
+            switch ($this->filters["assigned"]){
+                case 1:
+                    $s = $s . " AND assigned_to IS NOT NULL ";
+                    break;
+                case 2:
+                    $s = $s . " AND assigned_to IS NULL ";
+                    break;
+                case 3:
+                    $s = $s . " AND (assigned_to IS NULL OR assigned_to IN (SELECT DISTINCT id FROM monster WHERE in_storage = 0)) ";
+                    break;
+                case 4:
+                    $s = $s . " AND assigned_to IN (SELECT DISTINCT id FROM monster WHERE in_storage = 0) ";
+                    break;
+            }
+            $s = $s . " ORDER BY ";
+            if ($this->filters["group"] == "TYPE"){
+                $s = $s . " type, slot, stars DESC, original_quality DESC, quality DESC, level;";
+            }
+            else{
+                $s = $s . " slot, type, stars DESC, original_quality DESC, quality DESC, level, main_stat;";
+            }
+            return $s;
+        }
     }
 ?>

application/view/inc/footer.php

@@ -10,7 +10,7 @@
             <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, I guess). Monsters images and info are parsed from <a href='https://summonerswarskyarena.info'>https://summonerswarskyarena.info</a>. I really hope no one gets mad about this.
+                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>
         </tr>
     </table>

application/view/inc/header.php

@@ -24,5 +24,8 @@
         <a href='<?=$root?>fusion'>
             Fusion
         </a>
+        <a href='<?=$root?>report'>
+            Reports
+        </a>
     </nav>
 </header>

application/view/monster.php

@@ -53,14 +53,14 @@
             // TODO: Handle second awakenings
 ?>
             <article id='profile'>
-            	<img id='monster_image' title='<?=$mon_title?>' class='border_<?=$page->monster->monster->element?>' src='<?=$page->monster->monster->get_image()?>'/>
-            	<div id='details'>
-            		<h1><?=$mon_title?></h1>
-                	<span class='stars'>
+                <img id='monster_image' title='<?=$mon_title?>' class='border_<?=$page->monster->monster->element?>' src='<?=$page->monster->monster->get_image()?>'/>
+                <div id='details'>
+                    <h1><?=$mon_title?></h1>
+                    <span class='stars'>
 <?php
                         for ($i = 0; $i < $page->monster->stars; $i ++){
 ?>
-                        	<img class='star' src='<?=$star_src?>'/>
+                            <img class='star' src='<?=$star_src?>'/>
 <?php
                         }
 ?>
@@ -70,13 +70,12 @@
                     </span>
                 </div> <!-- #details -->
 <?php
-                // TODO
-                $building_attack = 0;
-                $building_defense = 0;
-                $building_hp = 0;
-                $building_speed = 0;
+                $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);
+                $building_hp = floor($page->building_stats["hp"] * $page->monster->base_hp / 100);
+                $building_speed = $page->building_stats["spd"];
                 $building_crit_rate = 0;
-                $building_crit_damage = 0;
+                $building_crit_damage = $page->building_stats["crd"];
                 $building_accuracy = 0;
                 $building_resistance = 0;
 ?>
@@ -239,10 +238,10 @@
 <?php
                     if ($page->monster->monster->leader_skill){
 ?>
-						<div class='skill'>
+                        <div class='skill'>
                             <img class='skill_img' src='<?=$page->monster->monster->leader_skill->get_image()?>'/>
                             <span class='skill_level'>
-                            	&nbsp;
+                                &nbsp;
                             </span>
                             <span class='skill_name'>
                                 Leader skill
@@ -250,7 +249,7 @@
                             <span class='skill_description'>
                                 <?=$page->monster->monster->leader_skill->create_description()?>
                             </span>
-						</div>
+                        </div>
 <?php
                     }
                     $skill_num = 1;
@@ -307,7 +306,7 @@
                         <div class='skill'>
                             <img class='skill_img' src='<?=$skill->get_image()?>'/>
                             <span class='skill_level <?=$maxed?>'>
-                            	<?=$cur_lvl?>/<?=$max_lvl?>
+                                <?=$cur_lvl?>/<?=$max_lvl?>
                             </span>
                             <span class='skill_name'>
                                 <?=$skill->name?>
@@ -322,7 +321,7 @@
 <?php
                                     foreach ($skill->effect as $effect){
 ?>
-										<img class='effect_img' title='<?=$effect->name?>' src='<?=$effect->get_image()?>'/>
+                                        <img class='effect_img' title='<?=$effect->name?>' src='<?=$effect->get_image()?>'/>
 <?php
                                     }
 ?>
@@ -340,14 +339,14 @@
                                                 $aquired = "aquired";
                                             }
 ?>
-											<tr>
-												<td class='level <?=$aquired?>'>
-													Lv. <?=$level->level?>
-												</td>
-												<td class='description <?=$aquired?>'>
-													<?=$level->description?>
-												</td>
-											</tr>
+                                            <tr>
+                                                <td class='level <?=$aquired?>'>
+                                                    Lv. <?=$level->level?>
+                                                </td>
+                                                <td class='description <?=$aquired?>'>
+                                                    <?=$level->description?>
+                                                </td>
+                                            </tr>
 <?php
                                         }
                                     }
@@ -363,26 +362,26 @@
 ?>
                 </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>
-				</table>
+                    <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>
+                </table>
             </article> <!-- #profile -->
             <article id='runes'>
-            	<table id='table_runes'>
+                <table id='table_runes'>
 <?php
                     $total_efficiency = 0;
                     $total_max_efficiency = 0;
@@ -400,29 +399,29 @@
                         $total_value += $rune->value;
                         $total_runes ++;
 ?>
-						<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?>'>
-									<img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
-									<img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$rune->type?>.png'/>
-									<span class='rune_stars'>
+                        <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?>'>
+                                    <img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
+                                    <img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$rune->type?>.png'/>
+                                    <span class='rune_stars'>
 <?php
-										for ($i = 0; $i < $rune->stars; $i ++){
+                                        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_silver.png"?>'/>
 <?php
                                         }
 ?>
-									</span>
-									<span class='rune_level'>
-                    					<?=$rune->level?>
-                    				</span>
-								</div>
-							</td>
-							<td class='stats'>
-								<table>
-									<tr class='main_stat'>
-										<td class='stat'>
+                                    </span>
+                                    <span class='rune_level'>
+                                        <?=$rune->level?>
+                                    </span>
+                                </div>
+                            </td>
+                            <td class='stats'>
+                                <table>
+                                    <tr class='main_stat'>
+                                        <td class='stat'>
 <?php
                                             if (strpos($rune->main_stat, "%") !== false){
                                                 $stat_name = str_replace("%", "", $rune->main_stat);
@@ -433,14 +432,14 @@
                                                 $stat_value = "+ " . $rune->main_stat_value;
                                             }
 ?>
-											<?=$stat_name?>
-										</td>
-										<td class='value'>
-											<?=$stat_value?>
-										<td>
-									</tr>
-									<tr class='innate_stat'>
-										<td class='stat'>
+                                            <?=$stat_name?>
+                                        </td>
+                                        <td class='value'>
+                                            <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class='innate_stat'>
+                                        <td class='stat'>
 <?php
                                             if (strlen($rune->innate_stat) == 0){
                                                 $stat_name = "&nbsp;";
@@ -455,14 +454,14 @@
                                                 $stat_value = "+ " . $rune->innate_stat_value;
                                             }
 ?>
-											<?=$stat_name?>
-										</td>
-										<td class='value'>
-											<?=$stat_value?>
-										<td>
-									</tr>
-									<tr class=substat>
-										<td class='stat'>
+                                            <?=$stat_name?>
+                                        </td>
+                                        <td class='value'>
+                                            <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class=substat>
+                                        <td class='stat'>
 <?php
                                             if (strlen($rune->substat_1) == 0){
                                                 $stat_name = "&nbsp;";
@@ -483,14 +482,14 @@
                                                 $craft = "";
                                             }
 ?>
-											<?=$stat_name?>
-										</td>
-										<td class='value <?=$craft?>'>
-											<?=$stat_value?>
-										<td>
-									</tr>
-									<tr class=substat>
-										<td class='stat'>
+                                            <?=$stat_name?>
+                                        </td>
+                                        <td class='value <?=$craft?>'>
+                                            <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class=substat>
+                                        <td class='stat'>
 <?php
                                             if (strlen($rune->substat_2) == 0){
                                                 $stat_name = "&nbsp;";
@@ -511,14 +510,14 @@
                                                 $craft = "";
                                             }
 ?>
-											<?=$stat_name?>
-										</td>
-										<td class='value <?=$craft?>'>
-											<?=$stat_value?>
-										<td>
-									</tr>
-									<tr class=substat>
-										<td class='stat'>
+                                            <?=$stat_name?>
+                                        </td>
+                                        <td class='value <?=$craft?>'>
+                                            <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class=substat>
+                                        <td class='stat'>
 <?php
                                             if (strlen($rune->substat_3) == 0){
                                                 $stat_name = "&nbsp;";
@@ -539,14 +538,14 @@
                                                 $craft = "";
                                             }
 ?>
-											<?=$stat_name?>
-										</td>
-										<td class='value <?=$craft?>'>
-											<?=$stat_value?>
-										<td>
-									</tr>
-									<tr class=substat>
-										<td class='stat'>
+                                            <?=$stat_name?>
+                                        </td>
+                                        <td class='value <?=$craft?>'>
+                                            <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class=substat>
+                                        <td class='stat'>
 <?php
                                             if (strlen($rune->substat_4) == 0){
                                                 $stat_name = "&nbsp;";
@@ -567,15 +566,15 @@
                                                 $craft = "";
                                             }
 ?>
-											<?=$stat_name?>
-										</td>
-										<td class='value <?=$craft?>'>
-											<?=$stat_value?>
-										<td>
-									</tr>
-								</table>
-							</td>
-							<td class='details'>
+                                            <?=$stat_name?>
+                                        </td>
+                                        <td class='value <?=$craft?>'>
+                                            <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                </table>
+                            </td>
+                            <td class='details'>
 <?php
                                 switch ($rune->quality){
                                     case 0:
@@ -612,127 +611,127 @@
                                         break;
                                 }
 ?>
-								<table class='table_details'>
-									<tr>
-										<td class='title'>
-											Quality:
-										</td>
-										<td class='value'>
-											<span class='quality quality_<?=strtolower($q)?>'>
-												<?=$q?>
-											</span>
-										</td>
-									</tr>
-									<tr>
-										<td class='title'>
-											Original quality:
-										</td>
-										<td class='value'>
-											<span class='quality quality_<?=strtolower($oq)?>'>
-												<?=$oq?>
-											</span>
-										</td>
-									</tr>
-									<tr>
-										<td class='title'>
-											Value:
-										</td>
-										<td class='value'>
-											<?=$rune->value?>
-										</td>
-									</tr>
-									<tr>
-    									<td class='title'>
-    										Efficiency:
-    									</td>
-    									<td class='value'>
-    										<?=number_format($rune->efficiency, 2)?>%
-    									</td>
-    								</tr>
-    								<tr>
-    									<td class='title'>
-    										Max. efficiency:
-    									</td>
-    									<td class='value'>
-    										<?=number_format($rune->max_efficiency, 2)?>%
-    									</td>
-    								</tr>
-    								<tr>
-    									<td class='title'>
-    										Reached efficiency:
-    									</td>
-    									<td class='value'>
-    										<?=number_format($rune->efficiency * 100 / $rune->max_efficiency)?>%
-    									</td>
-    								</tr>
-								</table>
-							</td>
-						</tr>
-						
+                                <table class='table_details'>
+                                    <tr>
+                                        <td class='title'>
+                                            Quality:
+                                        </td>
+                                        <td class='value'>
+                                            <span class='quality quality_<?=strtolower($q)?>'>
+                                                <?=$q?>
+                                            </span>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Original quality:
+                                        </td>
+                                        <td class='value'>
+                                            <span class='quality quality_<?=strtolower($oq)?>'>
+                                                <?=$oq?>
+                                            </span>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Value:
+                                        </td>
+                                        <td class='value'>
+                                            <?=$rune->value?>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Efficiency:
+                                        </td>
+                                        <td class='value'>
+                                            <?=number_format($rune->efficiency, 2)?>%
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Max. efficiency:
+                                        </td>
+                                        <td class='value'>
+                                            <?=number_format($rune->max_efficiency, 2)?>%
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Reached efficiency:
+                                        </td>
+                                        <td class='value'>
+                                            <?=number_format($rune->efficiency * 100 / $rune->max_efficiency)?>%
+                                        </td>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                        
 <?php
                     }
 ?>
-				</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>
+                </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 -->
 

application/view/monsters.php

@@ -145,17 +145,16 @@
                                 </span>
                             </a>
                             <div class='monster_tooltip'>
-                            	<h4>
-                            		<?=$mon_title?>
-                            	</h4>
+                                <h4>
+                                    <?=$mon_title?>
+                                </h4>
 <?php
-                                // TODO
-                                $building_attack = 0;
-                                $building_defense = 0;
-                                $building_hp = 0;
-                                $building_speed = 0;
+                                $building_attack = floor(($mon->base_attack * $page->building_stats["atk"] / 100) + ($mon->base_attack * $page->building_stats["elm"][$mon->monster->element] / 100));
+                                $building_defense = floor($page->building_stats["def"] * $mon->base_defense / 100);
+                                $building_hp = floor($page->building_stats["hp"] * $mon->base_hp / 100);
+                                $building_speed = $page->building_stats["spd"];
                                 $building_crit_rate = 0;
-                                $building_crit_damage = 0;
+                                $building_crit_damage = $page->building_stats["crd"];
                                 $building_accuracy = 0;
                                 $building_resistance = 0;
 ?>

application/view/report.php

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang='en'>
+    <head>
+        <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
+        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'/>
+        <title><?=$page->title?></title>
+        <link rel='shortcut icon' href='<?=$page->favicon?>'/>
+        <!-- CSS files -->
+        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>ui.css'/>
+        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>report.css'/>
+        <!-- Script files -->
+        <script src="<?=$path["js"]?>ui.js"></script>
+        <!-- Meta tags -->
+        <link rel='canonical' href='<?=$page->canonical?>'/>
+        <link rel='author' href='<?=$page->author?>'/>
+        <link rel='publisher' href='<?=$page->author?>'/>
+        <meta name='description' content='<?=$page->description?>'/>
+        <meta property='og:title' content='<?=$page->title?>'/>
+        <meta property='og:url' content='<?=$page->canonical?>'/>
+        <meta property='og:description' content='<?=$page->description?>'/>
+        <meta property='og:image' content='<?=$page->icon?>'/>
+        <meta property='og:site_name' content='<?=$page->name?>'/>
+        <meta property='og:type' content='website'/>
+        <meta property='og:locale' content='en'/>
+        <meta name='twitter:card' content='summary'/>
+        <meta name='twitter:title' content='<?=$page->title?>'/>
+        <meta name='twitter:description' content='<?=$page->description?>'/>
+        <meta name='twitter:image' content='<?=$page->icon?>'/>
+        <meta name='twitter:url' content='<?=$page->canonical?>'/>
+        <meta name='robots' content='index follow'/>
+    </head>
+    <body id='body_reports'>
+<?php
+        include __DIR__ . "/inc/header.php";
+?>
+        <section id='reports'>
+            <article class='report'>
+                <form action='/report/skillup/' method='get'>
+                    <h3>
+                        Pending skill-ups
+                    </h3>
+                    <img alt=' ' src='<?=$path["img"]["content"]?>monster/0115.png'> <!-- Devilmon image -->
+                    <p>
+                        Shows a list of the monstes in need of skilling-up
+                        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>
+                        <div id='filter_apply'>
+                            <input type='submit' value='Generate'/>
+                        </div>
+                    </div>
+                </form>
+            </article>
+            <article class='report'>
+                <form action='/report/runeupgrade/' method='get'>
+                    <h3>
+                        Runes to replace
+                    </h3>
+                    <img alt=' ' src='<?=$path["img"]["layout"]?>rune/base.png'> <!-- Devilmon image -->
+                    <p>
+                        Shows monsters with runes that can be upgraded.
+                        It list the runes that can be replaced by other runes in your inventory that have either more stars or a higher base quality.
+                    </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'>
+                            <input type='checkbox' name='in_storage'/>
+                            Show monsters in storage
+                        </div>
+                        <div id='filter_apply'>
+                            <input type='submit' value='Generate'/>
+                        </div>
+                    </div>
+                </form>
+            </article>
+        </section>
+<?php
+        include __DIR__ . "/inc/footer.php";
+?>
+    </body>
+</html>

application/view/report_runeupgrade.php

@@ -0,0 +1,666 @@
+<!DOCTYPE html>
+<html lang='en'>
+    <head>
+        <meta content='text/html; charset=utf-8' http-equiv='content-type'/>
+        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'/>
+        <title><?=$page->title?></title>
+        <link rel='shortcut icon' href='<?=$page->favicon?>'/>
+        <!-- CSS files -->
+        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>ui.css'/>
+        <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>report.css'/>
+        <!-- Script files -->
+        <script src="<?=$path["js"]?>ui.js"></script>
+        <!-- Meta tags -->
+        <link rel='canonical' href='<?=$page->canonical?>'/>
+        <link rel='author' href='<?=$page->author?>'/>
+        <link rel='publisher' href='<?=$page->author?>'/>
+        <meta name='description' content='<?=$page->description?>'/>
+        <meta property='og:title' content='<?=$page->title?>'/>
+        <meta property='og:url' content='<?=$page->canonical?>'/>
+        <meta property='og:description' content='<?=$page->description?>'/>
+        <meta property='og:image' content='<?=$page->icon?>'/>
+        <meta property='og:site_name' content='<?=$page->name?>'/>
+        <meta property='og:type' content='website'/>
+        <meta property='og:locale' content='en'/>
+        <meta name='twitter:card' content='summary'/>
+        <meta name='twitter:title' content='<?=$page->title?>'/>
+        <meta name='twitter:description' content='<?=$page->description?>'/>
+        <meta name='twitter:image' content='<?=$page->icon?>'/>
+        <meta name='twitter:url' content='<?=$page->canonical?>'/>
+        <meta name='robots' content='index follow'/>
+    </head>
+    <body id='body_report_runeupgrade'>
+<?php
+        include __DIR__ . "/inc/header.php";
+?>
+            <section id='filters'>
+                <form action='/report/runeupgrade/' 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'>
+<?php
+                        $checked = "";
+                        if ($page->filters["in_storage"]){
+                            $checked = "checked";
+                        }
+?>
+                        <input type='checkbox' name='in_storage' <?=$checked?>/>
+                        Show monsters in storage
+                    </div>
+                    <div id='filter_apply'>
+                        <input type='submit' value='Apply'/>
+                    </div>
+                </form>
+            </section> <!-- #filters -->
+            <section id='list'>
+<?php
+                foreach ($page->upgrades as $upgrade){
+                    if ($upgrade["monster"]->monster->awakens_from == "" && $upgrade["monster"]->monster->awakens_to == ""){
+                        // No to, no from, silver monster.
+                        $star_src = $path["img"]["layout"] . "icon/star_silver.png";
+                        $mon_title = $upgrade["monster"]->monster->element . " " . $upgrade["monster"]->monster->name;
+                    }
+                    elseif ($upgrade["monster"]->monster->awakens_from =! "" && $upgrade["monster"]->monster->awakens_to == ""){
+                        // Already awakened.
+                        $star_src = $path["img"]["layout"] . "icon/star_aw.png";
+                        $mon_title = $upgrade["monster"]->monster->name;
+                    }
+                    elseif ($upgrade["monster"]->monster->awakens_to =! ""){
+                        // Awakeable.
+                        $star_src = $path["img"]["layout"] . "icon/star.png";
+                        $mon_title = $upgrade["monster"]->monster->element . " " . $upgrade["monster"]->monster->name;
+                    }
+                    // TODO: Handle second awakenings
+?>
+                    <article>
+                        <div class='monster'>
+                            <div class='profile'>
+                                <img id='monster_image' title='<?=$mon_title?>' class='border_<?=$upgrade["monster"]->monster->element?>' src='<?=$upgrade["monster"]->monster->get_image()?>'/>
+                                <div id='details'>
+                                    <h1><?=$mon_title?></h1>
+                                    <span class='stars'>
+<?php
+                                        for ($i = 0; $i < $upgrade["monster"]->stars; $i ++){
+?>
+                                            <img class='star' src='<?=$star_src?>'/>
+<?php
+                                        }
+?>
+                                    </span>
+                                    <span class='level'>
+                                        Lv. <?=$upgrade["monster"]->level?>
+                                    </span>
+                                </div> <!-- #details -->
+                            </div> <!-- .profile -->
+                        </div>
+<?php
+                        foreach ($upgrade["upgrade"] as $rupgrade){
+?>
+                            <table class='rune'>
+                                <tr>
+                                    <td class='icon'>
+                                        <div class='rune_panel rune_slot_<?=$rupgrade["rune"]->slot?> rune_level_<?=$rupgrade["rune"]->level?> rune_quality_<?=$rupgrade["rune"]->quality?> rune_original_quality_<?=$rupgrade["rune"]->original_quality?>'>
+                                            <img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
+                                            <img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$rupgrade["rune"]->type?>.png'/>
+                                            <span class='rune_stars'>
+<?php
+                                                for ($i = 0; $i < $rupgrade["rune"]->stars; $i ++){
+?>
+                                                    <img class='star' src='<?=$path["img"]["layout"] . "icon/star_silver.png"?>'/>
+<?php
+                                                }
+?>
+                                            </span>
+                                            <span class='rune_level'>
+                                                <?=$rupgrade["rune"]->level?>
+                                            </span>
+                                        </div> <!-- .rune_panel -->
+                                    </td>
+                                    <td class='stats'>
+                                        <table>
+                                            <tr class='main_stat'>
+                                                <td class='stat'>
+<?php
+                                                    if (strpos($rupgrade["rune"]->main_stat, "%") !== false){
+                                                        $stat_name = str_replace("%", "", $rupgrade["rune"]->main_stat);
+                                                        $stat_value = "+ " . $rupgrade["rune"]->main_stat_value . "%";
+                                                    }
+                                                    else{
+                                                        $stat_name = $rupgrade["rune"]->main_stat;
+                                                        $stat_value = "+ " . $rupgrade["rune"]->main_stat_value;
+                                                    }
+?>
+                                                    <?=$stat_name?>
+                                                </td>
+                                                <td class='value'>
+                                                    <?=$stat_value?>
+                                                <td>
+                                            </tr>
+                                            <tr class='innate_stat'>
+                                                <td class='stat'>
+<?php
+                                                    if (strlen($rupgrade["rune"]->innate_stat) == 0){
+                                                        $stat_name = "&nbsp;";
+                                                        $stat_value = "";
+                                                    }
+                                                    elseif (strpos($rupgrade["rune"]->innate_stat, "%") !== false){
+                                                        $stat_name = str_replace("%", "", $rupgrade["rune"]->innate_stat);
+                                                        $stat_value = "+ " . $rupgrade["rune"]->innate_stat_value . "%";
+                                                    }
+                                                    else{
+                                                        $stat_name = $rupgrade["rune"]->innate_stat;
+                                                        $stat_value = "+ " . $rupgrade["rune"]->innate_stat_value;
+                                                    }
+?>
+                                                    <?=$stat_name?>
+                                                </td>
+                                                <td class='value'>
+                                                    <?=$stat_value?>
+                                                <td>
+                                            </tr>
+                                            <tr class=substat>
+                                                <td class='stat'>
+<?php
+                                                    if (strlen($rupgrade["rune"]->substat_1) == 0){
+                                                        $stat_name = "&nbsp;";
+                                                        $stat_value = "";
+                                                    }
+                                                    elseif (strpos($rupgrade["rune"]->substat_1, "%") !== false){
+                                                        $stat_name = str_replace("%", "", $rupgrade["rune"]->substat_1);
+                                                        $stat_value = "+ " . $rupgrade["rune"]->substat_1_value . "%";
+                                                    }
+                                                    else{
+                                                        $stat_name = $rupgrade["rune"]->substat_1;
+                                                        $stat_value = "+ " . $rupgrade["rune"]->substat_1_value;
+                                                    }
+                                                    if ($rupgrade["rune"]->substat_1_craft == 1){
+                                                        $craft = "craft";
+                                                    }
+                                                    else{
+                                                        $craft = "";
+                                                    }
+?>
+                                                    <?=$stat_name?>
+                                                </td>
+                                                <td class='value <?=$craft?>'>
+                                                    <?=$stat_value?>
+                                                <td>
+                                            </tr>
+                                            <tr class=substat>
+                                                <td class='stat'>
+<?php
+                                                    if (strlen($rupgrade["rune"]->substat_2) == 0){
+                                                        $stat_name = "&nbsp;";
+                                                        $stat_value = "";
+                                                    }
+                                                    elseif (strpos($rupgrade["rune"]->substat_2, "%") !== false){
+                                                        $stat_name = str_replace("%", "", $rupgrade["rune"]->substat_2);
+                                                        $stat_value = "+ " . $rupgrade["rune"]->substat_2_value . "%";
+                                                    }
+                                                    else{
+                                                        $stat_name = $rupgrade["rune"]->substat_2;
+                                                        $stat_value = "+ " . $rupgrade["rune"]->substat_2_value;
+                                                    }
+                                                    if ($rupgrade["rune"]->substat_2_craft == 1){
+                                                        $craft = "craft";
+                                                    }
+                                                    else{
+                                                        $craft = "";
+                                                    }
+?>
+                                                    <?=$stat_name?>
+                                                </td>
+                                                <td class='value <?=$craft?>'>
+                                                    <?=$stat_value?>
+                                                <td>
+                                            </tr>
+                                            <tr class=substat>
+                                                <td class='stat'>
+<?php
+                                                    if (strlen($rupgrade["rune"]->substat_3) == 0){
+                                                        $stat_name = "&nbsp;";
+                                                        $stat_value = "";
+                                                    }
+                                                    elseif (strpos($rupgrade["rune"]->substat_3, "%") !== false){
+                                                        $stat_name = str_replace("%", "", $rupgrade["rune"]->substat_3);
+                                                        $stat_value = "+ " . $rupgrade["rune"]->substat_3_value . "%";
+                                                    }
+                                                    else{
+                                                        $stat_name = $rupgrade["rune"]->substat_3;
+                                                        $stat_value = "+ " . $rupgrade["rune"]->substat_3_value;
+                                                    }
+                                                    if ($rupgrade["rune"]->substat_3_craft == 1){
+                                                        $craft = "craft";
+                                                    }
+                                                    else{
+                                                        $craft = "";
+                                                    }
+?>
+                                                    <?=$stat_name?>
+                                                </td>
+                                                <td class='value <?=$craft?>'>
+                                                    <?=$stat_value?>
+                                                <td>
+                                            </tr>
+                                            <tr class=substat>
+                                                <td class='stat'>
+<?php
+                                                    if (strlen($rupgrade["rune"]->substat_4) == 0){
+                                                        $stat_name = "&nbsp;";
+                                                        $stat_value = "";
+                                                    }
+                                                    elseif (strpos($rupgrade["rune"]->substat_4, "%") !== false){
+                                                        $stat_name = str_replace("%", "", $rupgrade["rune"]->substat_4);
+                                                        $stat_value = "+ " . $rupgrade["rune"]->substat_4_value . "%";
+                                                    }
+                                                    else{
+                                                        $stat_name = $rupgrade["rune"]->substat_4;
+                                                        $stat_value = "+ " . $rupgrade["rune"]->substat_4_value;
+                                                    }
+                                                    if ($rupgrade["rune"]->substat_4_craft == 1){
+                                                        $craft = "craft";
+                                                    }
+                                                    else{
+                                                        $craft = "";
+                                                    }
+?>
+                                                    <?=$stat_name?>
+                                                </td>
+                                                <td class='value <?=$craft?>'>
+                                                    <?=$stat_value?>
+                                                <td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                    <td class='details'>
+<?php
+                                        switch ($rupgrade["rune"]->quality){
+                                            case 0:
+                                                $q = "Normal";
+                                                break;
+                                            case 1:
+                                                $q = "Magic";
+                                                break;
+                                            case 2:
+                                                $q = "Rare";
+                                                break;
+                                            case 3:
+                                                $q = "Hero";
+                                                break;
+                                            case 4:
+                                                $q = "Legend";
+                                                break;
+                                        }
+                                        switch ($rupgrade["rune"]->original_quality){
+                                            case 0:
+                                                $oq = "Normal";
+                                                break;
+                                            case 1:
+                                                $oq = "Magic";
+                                                break;
+                                            case 2:
+                                                $oq = "Rare";
+                                                break;
+                                            case 3:
+                                                $oq = "Hero";
+                                                break;
+                                            case 4:
+                                                $oq = "Legend";
+                                                break;
+                                        }
+?>
+                                        <table class='table_details'>
+                                            <tr>
+                                                <td class='title'>
+                                                    Quality:
+                                                </td>
+                                                <td class='value'>
+                                                    <span class='quality quality_<?=strtolower($q)?>'>
+                                                        <?=$q?>
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class='title'>
+                                                    Original quality:
+                                                </td>
+                                                <td class='value'>
+                                                    <span class='quality quality_<?=strtolower($oq)?>'>
+                                                        <?=$oq?>
+                                                    </span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class='title'>
+                                                    Value:
+                                                </td>
+                                                <td class='value'>
+                                                    <?=$rupgrade["rune"]->value?>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class='title'>
+                                                    Efficiency:
+                                                </td>
+                                                <td class='value'>
+                                                    <?=number_format($rupgrade["rune"]->efficiency, 2)?>%
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class='title'>
+                                                    Max. efficiency:
+                                                </td>
+                                                <td class='value'>
+                                                    <?=number_format($rupgrade["rune"]->max_efficiency, 2)?>%
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class='title'>
+                                                    Reached efficiency:
+                                                </td>
+                                                <td class='value'>
+                                                    <?=number_format($rupgrade["rune"]->efficiency * 100 / $rupgrade["rune"]->max_efficiency)?>%
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table> <!-- .rune -->
+                            <div class='alternatives'>
+<?php
+                                foreach ($rupgrade["alternative"] as $alternative){
+?>
+                                    <table class='alternative'>
+                                        <tr>
+                                            <td class='icon'>
+                                                <div class='rune_panel rune_slot_<?=$alternative->slot?> rune_level_<?=$alternative->level?> rune_quality_<?=$alternative->quality?> rune_original_quality_<?=$alternative->original_quality?>'>
+                                                    <img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
+                                                    <img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$alternative->type?>.png'/>
+                                                    <span class='rune_stars'>
+<?php
+                                                        for ($i = 0; $i < $alternative->stars; $i ++){
+?>
+                                                            <img class='star' src='<?=$path["img"]["layout"] . "icon/star_silver.png"?>'/>
+<?php
+                                                        }
+?>
+                                                    </span>
+                                                    <span class='rune_level'>
+                                                        <?=$alternative->level?>
+                                                    </span>
+                                                </div> <!-- .rune_panel -->
+                                            </td>
+                                            <td class='stats'>
+                                                <table>
+                                                    <tr class='main_stat'>
+                                                        <td class='stat'>
+<?php
+                                                            if (strpos($alternative->main_stat, "%") !== false){
+                                                                $stat_name = str_replace("%", "", $alternative->main_stat);
+                                                                $stat_value = "+ " . $alternative->main_stat_value . "%";
+                                                            }
+                                                            else{
+                                                                $stat_name = $alternative->main_stat;
+                                                                $stat_value = "+ " . $alternative->main_stat_value;
+                                                            }
+?>
+                                                            <?=$stat_name?>
+                                                        </td>
+                                                        <td class='value'>
+                                                            <?=$stat_value?>
+                                                        <td>
+                                                    </tr>
+                                                    <tr class='innate_stat'>
+                                                        <td class='stat'>
+<?php
+                                                            if (strlen($alternative->innate_stat) == 0){
+                                                                $stat_name = "&nbsp;";
+                                                                $stat_value = "";
+                                                            }
+                                                            elseif (strpos($alternative->innate_stat, "%") !== false){
+                                                                $stat_name = str_replace("%", "", $alternative->innate_stat);
+                                                                $stat_value = "+ " . $alternative->innate_stat_value . "%";
+                                                            }
+                                                            else{
+                                                                $stat_name = $alternative->innate_stat;
+                                                                $stat_value = "+ " . $alternative->innate_stat_value;
+                                                            }
+?>
+                                                            <?=$stat_name?>
+                                                        </td>
+                                                        <td class='value'>
+                                                            <?=$stat_value?>
+                                                        <td>
+                                                    </tr>
+                                                    <tr class=substat>
+                                                        <td class='stat'>
+<?php
+                                                            if (strlen($alternative->substat_1) == 0){
+                                                                $stat_name = "&nbsp;";
+                                                                $stat_value = "";
+                                                            }
+                                                            elseif (strpos($alternative->substat_1, "%") !== false){
+                                                                $stat_name = str_replace("%", "", $alternative->substat_1);
+                                                                $stat_value = "+ " . $alternative->substat_1_value . "%";
+                                                            }
+                                                            else{
+                                                                $stat_name = $alternative->substat_1;
+                                                                $stat_value = "+ " . $alternative->substat_1_value;
+                                                            }
+                                                            if ($alternative->substat_1_craft == 1){
+                                                                $craft = "craft";
+                                                            }
+                                                            else{
+                                                                $craft = "";
+                                                            }
+?>
+                                                            <?=$stat_name?>
+                                                        </td>
+                                                        <td class='value <?=$craft?>'>
+                                                            <?=$stat_value?>
+                                                        <td>
+                                                    </tr>
+                                                    <tr class=substat>
+                                                        <td class='stat'>
+<?php
+                                                            if (strlen($alternative->substat_2) == 0){
+                                                                $stat_name = "&nbsp;";
+                                                                $stat_value = "";
+                                                            }
+                                                            elseif (strpos($alternative->substat_2, "%") !== false){
+                                                                $stat_name = str_replace("%", "", $alternative->substat_2);
+                                                                $stat_value = "+ " . $alternative->substat_2_value . "%";
+                                                            }
+                                                            else{
+                                                                $stat_name = $alternative->substat_2;
+                                                                $stat_value = "+ " . $alternative->substat_2_value;
+                                                            }
+                                                            if ($alternative->substat_2_craft == 1){
+                                                                $craft = "craft";
+                                                            }
+                                                            else{
+                                                                $craft = "";
+                                                            }
+?>
+                                                            <?=$stat_name?>
+                                                        </td>
+                                                        <td class='value <?=$craft?>'>
+                                                            <?=$stat_value?>
+                                                        <td>
+                                                    </tr>
+                                                    <tr class=substat>
+                                                        <td class='stat'>
+<?php
+                                                            if (strlen($alternative->substat_3) == 0){
+                                                                $stat_name = "&nbsp;";
+                                                                $stat_value = "";
+                                                            }
+                                                            elseif (strpos($alternative->substat_3, "%") !== false){
+                                                                $stat_name = str_replace("%", "", $alternative->substat_3);
+                                                                $stat_value = "+ " . $alternative->substat_3_value . "%";
+                                                            }
+                                                            else{
+                                                                $stat_name = $alternative->substat_3;
+                                                                $stat_value = "+ " . $alternative->substat_3_value;
+                                                            }
+                                                            if ($alternative->substat_3_craft == 1){
+                                                                $craft = "craft";
+                                                            }
+                                                            else{
+                                                                $craft = "";
+                                                            }
+?>
+                                                            <?=$stat_name?>
+                                                        </td>
+                                                        <td class='value <?=$craft?>'>
+                                                            <?=$stat_value?>
+                                                        <td>
+                                                    </tr>
+                                                    <tr class=substat>
+                                                        <td class='stat'>
+<?php
+                                                            if (strlen($alternative->substat_4) == 0){
+                                                                $stat_name = "&nbsp;";
+                                                                $stat_value = "";
+                                                            }
+                                                            elseif (strpos($alternative->substat_4, "%") !== false){
+                                                                $stat_name = str_replace("%", "", $alternative->substat_4);
+                                                                $stat_value = "+ " . $alternative->substat_4_value . "%";
+                                                            }
+                                                            else{
+                                                                $stat_name = $alternative->substat_4;
+                                                                $stat_value = "+ " . $alternative->substat_4_value;
+                                                            }
+                                                            if ($alternative->substat_4_craft == 1){
+                                                                $craft = "craft";
+                                                            }
+                                                            else{
+                                                                $craft = "";
+                                                            }
+?>
+                                                            <?=$stat_name?>
+                                                        </td>
+                                                        <td class='value <?=$craft?>'>
+                                                            <?=$stat_value?>
+                                                        <td>
+                                                    </tr>
+                                                </table>
+                                            </td>
+                                            <td class='details'>
+<?php
+                                                switch ($alternative->quality){
+                                                    case 0:
+                                                        $q = "Normal";
+                                                        break;
+                                                    case 1:
+                                                        $q = "Magic";
+                                                        break;
+                                                    case 2:
+                                                        $q = "Rare";
+                                                        break;
+                                                    case 3:
+                                                        $q = "Hero";
+                                                        break;
+                                                    case 4:
+                                                        $q = "Legend";
+                                                        break;
+                                                }
+                                                switch ($alternative->original_quality){
+                                                    case 0:
+                                                        $oq = "Normal";
+                                                        break;
+                                                    case 1:
+                                                        $oq = "Magic";
+                                                        break;
+                                                    case 2:
+                                                        $oq = "Rare";
+                                                        break;
+                                                    case 3:
+                                                        $oq = "Hero";
+                                                        break;
+                                                    case 4:
+                                                        $oq = "Legend";
+                                                        break;
+                                                }
+?>
+                                                <table class='table_details'>
+                                                    <tr>
+                                                        <td class='title'>
+                                                            Quality:
+                                                        </td>
+                                                        <td class='value'>
+                                                            <span class='quality quality_<?=strtolower($q)?>'>
+                                                                <?=$q?>
+                                                            </span>
+                                                        </td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td class='title'>
+                                                            Original quality:
+                                                        </td>
+                                                        <td class='value'>
+                                                            <span class='quality quality_<?=strtolower($oq)?>'>
+                                                                <?=$oq?>
+                                                            </span>
+                                                        </td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td class='title'>
+                                                            Value:
+                                                        </td>
+                                                        <td class='value'>
+                                                            <?=$alternative->value?>
+                                                        </td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td class='title'>
+                                                            Efficiency:
+                                                        </td>
+                                                        <td class='value'>
+                                                            <?=number_format($alternative->efficiency, 2)?>%
+                                                        </td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td class='title'>
+                                                            Max. efficiency:
+                                                        </td>
+                                                        <td class='value'>
+                                                            <?=number_format($alternative->max_efficiency, 2)?>%
+                                                        </td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td class='title'>
+                                                            Reached efficiency:
+                                                        </td>
+                                                        <td class='value'>
+                                                            <?=number_format($alternative->efficiency * 100 / $alternative->max_efficiency)?>%
+                                                        </td>
+                                                    </tr>
+                                                </table>
+                                            </td>
+                                        </tr>
+                                    </table> <!-- .alternative -->
+<?php
+                                }
+?>
+                            </div>
+<?php
+                        }
+?>
+                    </article>
+<?php
+                }
+?>
+                    
+            </section> <!-- #catalog -->
+
+<?php
+        include __DIR__ . "/inc/footer.php";
+?>
+    </body>
+</html>

application/view/runes.php

@@ -10,7 +10,6 @@
         <link rel='stylesheet' type='text/css' href='<?=$path["css"]?>runes.css'/>
         <!-- Script files -->
         <script src="<?=$path["js"]?>ui.js"></script>
-        <script src="<?=$path["js"]?>runes.js"></script>
         <!-- Meta tags -->
         <link rel='canonical' href='<?=$page->canonical?>'/>
         <link rel='author' href='<?=$page->author?>'/>
@@ -30,52 +29,1025 @@
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
     </head>
-    <body onLoad='loadRunes();'>
+    <body>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-        <div id='content'>
-            <div class='section'>
-                <h3 class='section_title'>
-                    Rune collection
-                </h3>
-                <div id='rune_list'>
-                    <img class='loader' alt='Loading...' src='<?$path["img"]["layout"]?>control/loader.png'/>
-                </div> <!-- #rune_list -->
-            </div> <!-- .section -->
-        </div> <!-- .content -->
-        <div id='cover'></div>
-        <div id='viewer' class='section'>
-            <div id='viewer_wait'>
-                <img class='loader' alt='Loading...' src='<?$path["img"]["layout"]?>control/loader.png'/>
-            </div>
-            <div id='viewer_info'>
-            </div>
-        </div> <!-- #viewer -->
-        <div id='new'>
-            <div class='rune_circle'>
-                <img class='rune_circle_slots' src='<?=$path["img"]["layout"]?>rune/Rune_slots.png'/>
-<?php
-                for ($i = 1; $i < 7; $i ++){
-?>
-                    <div class='rune rune_<?=$i?>'>
-                        <a href='javascript:selectNewRuneSlot(<?=$i?>);'>
-                            <img class='rune_base rune_base_<?=$i?>' src='<?=$path["img"]["rune"]?>base.png'/>
-                            <img class='rune_icon rune_icon_<?=$i?>' src='<?=$path["img"]["rune"]?>Energy.png'/>
-                            <span class='rune_level rune_level_<?=$i?>'>
-                                +15
-                            </span>
-                            <span class='rune_stars rune_stars_<?=$i?>'>
-                                <span class='rune_stars_num'>1</span>
-                                <img class='rune_stars_star' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                            </span>
-                        </a>
+            <section id='filters'>
+                <form action='/runes/' method='get'>
+                    <div class='filter'>
+                        <span>Type:</span>
+                        <br/>
+                        <select multiple name='type[]' id='filter_type'>
+<?php
+                            $selected = "";
+                            if (in_array("ACCURACY", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ACCURACY' <?=$selected?>>Accuracy</option>
+<?php
+                            if (in_array("BLADE", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='BLADE' <?=$selected?>>Blade</option>
+<?php
+                            if (in_array("DESPAIR", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='DESPAIR' <?=$selected?>>Despair</option>
+<?php
+                            if (in_array("DESTROY", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='DESTROY' <?=$selected?>>Destroy</option>
+<?php
+                            if (in_array("DETERMINATION", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='DETERMINATION' <?=$selected?>>Determination</option>
+<?php
+                            if (in_array("ENDURE", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ENDURE' <?=$selected?>>Endure</option>
+<?php
+                            if (in_array("ENERGY", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ENERGY' <?=$selected?>>Energy</option>
+<?php
+                            if (in_array("ENHANCE", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ENHANCE' <?=$selected?>>Enhance</option>
+<?php
+                            if (in_array("FATAL", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='FATAL' <?=$selected?>>Fatal</option>
+<?php
+                            if (in_array("FIGHT", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='FIGHT' <?=$selected?>>Fight</option>
+<?php
+                            if (in_array("FOCUS", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='FOCUS' <?=$selected?>>Focus</option>
+<?php
+                            if (in_array("GUARD", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='GUARD' <?=$selected?>>Guard</option>
+<?php
+                            if (in_array("NEMESIS", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='NEMESIS' <?=$selected?>>Nemesis</option>
+<?php
+                            if (in_array("RAGE", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='RAGE' <?=$selected?>>Rage</option>
+<?php
+                            if (in_array("REVENGE", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='REVENGE' <?=$selected?>>Revenge</option>
+<?php
+                            if (in_array("SHIELD", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='SHIELD' <?=$selected?>>Shield</option>
+<?php
+                            if (in_array("SWIFT", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='SWIFT' <?=$selected?>>Swift</option>
+<?php
+                            if (in_array("TOLERANCE", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='TOLERANCE' <?=$selected?>>Tolerance</option>
+<?php
+                            if (in_array("VAMPIRE", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='VAMPIRE' <?=$selected?>>Vampire</option>
+<?php
+                            if (in_array("VIOLENT", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='VIOLENT' <?=$selected?>>Violent</option>
+<?php
+                            if (in_array("WILL", $page->filters["type"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='WILL' <?=$selected?>>Will</option>
+                        </select>
+                    </div>
+                    <div class='filter'>
+                        <span>Slot:</span>
+                        <br/>
+                        <select multiple name='slot[]' id='filter_slot'>
+<?php
+                            if (in_array(1, $page->filters["slot"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='1' <?=$selected?>>1</option>
+<?php
+                            if (in_array(2, $page->filters["slot"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='2' <?=$selected?>>2</option>
+<?php
+                            if (in_array(3, $page->filters["slot"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='3' <?=$selected?>>3</option>
+<?php
+                            if (in_array(4, $page->filters["slot"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='4' <?=$selected?>>4</option>
+<?php
+                            if (in_array(5, $page->filters["slot"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='5' <?=$selected?>>5</option>
+<?php
+                            if (in_array(6, $page->filters["slot"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='6' <?=$selected?>>6</option>
+                        </select>
                     </div>
+                    <div class='filter'>
+                        <span>Main stat:</span>
+                        <br/>
+                        <select multiple name='main_stat[]' id='filter_main_stat'>
+<?php
+                            if (in_array("ATK%", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ATK%' <?=$selected?>>ATK%</option>
+<?php
+                            if (in_array("ATK", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ATK' <?=$selected?>>ATK</option>
+<?php
+                            if (in_array("DEF%", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='DEF%' <?=$selected?>>DEF%</option>
+<?php
+                            if (in_array("DEF", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='DEF' <?=$selected?>>DEF</option>
+<?php
+                            if (in_array("HP%", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='HP%' <?=$selected?>>HP%</option>
+<?php
+                            if (in_array("HP", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='HP' <?=$selected?>>HP</option>
+<?php
+                            if (in_array("SPD", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='SPD' <?=$selected?>>SPD</option>
+<?php
+                            if (in_array("CRR", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='CRR' <?=$selected?>>CRR</option>
+<?php
+                            if (in_array("CRD", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='CRD' <?=$selected?>>CRD</option>
+<?php
+                            if (in_array("ACC", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ACC' <?=$selected?>>ACC</option>
+<?php
+                            if (in_array("RES", $page->filters["main"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='RES' <?=$selected?>>RES</option>
+                        </select>
+                    </div>
+                    <div class='filter'>
+                        <span>Has sub stat:</span>
+                        <br/>
+                        <select multiple name='sub_stat[]' id='filter_sub_stat'>
+<?php
+                            if (in_array("ATK%", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ATK%' <?=$selected?>>ATK%</option>
+<?php
+                            if (in_array("ATK", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ATK' <?=$selected?>>ATK</option>
+<?php
+                            if (in_array("DEF%", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='DEF%' <?=$selected?>>DEF%</option>
+<?php
+                            if (in_array("DEF", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='DEF' <?=$selected?>>DEF</option>
+<?php
+                            if (in_array("HP%", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='HP%' <?=$selected?>>HP%</option>
+<?php
+                            if (in_array("HP", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='HP' <?=$selected?>>HP</option>
+<?php
+                            if (in_array("SPD", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='SPD' <?=$selected?>>SPD</option>
+<?php
+                            if (in_array("CRR", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='CRR' <?=$selected?>>CRR</option>
+<?php
+                            if (in_array("CRD", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='CRD' <?=$selected?>>CRD</option>
+<?php
+                            if (in_array("ACC", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='ACC' <?=$selected?>>ACC</option>
+<?php
+                            if (in_array("RES", $page->filters["sub"])){
+                                $selected = "selected='selected'";
+                            }
+                            else{
+                                $selected = "";
+                            }
+?>
+                            <option value='RES' <?=$selected?>>RES</option>
+                        </select>
+                    </div>
+                    <div class='filter filter_stars' 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_level'>
+                        <span>Min. stars:</span>
+                        <input type='number' name='min_level' id='filter_level_min' min='0' max='15' value='<?=$page->filters["min_level"]?>'/>
+                        <br/>
+                        <span>Max. stars:</span>
+                        <input type='number' name='max_level' id='filter_level_max' min='0' max='15' value='<?=$page->filters["max_level"]?>'/>
+                    </div>
+                    <div class='filter' id='filter_quality'>
+                        <span>Min. quality:</span>
+<?php
+                        $selected_0 = "";
+                        $selected_1 = "";
+                        $selected_2 = "";
+                        $selected_3 = "";
+                        $selected_4 = "";
+                        switch (strtoupper($page->filters["min_quality"])){
+                            case 0:
+                                $selected_0 = "selected";
+                                break;
+                            case 1:
+                                $selected_1 = "selected";
+                                break;
+                            case 2:
+                                $selected_2 = "selected";
+                                break;
+                            case 3:
+                                $selected_3 = "selected";
+                                break;
+                            case 4:
+                                $selected_4 = "selected";
+                                break;
+                        }
+?>
+                        <select name='min_quality' id='filter_quality_min'>
+                            <option value='0' <?=$selected_0?>>Normal</option>
+                            <option value='1' <?=$selected_1?>>Magic</option>
+                            <option value='2' <?=$selected_2?>>Rare</option>
+                            <option value='3' <?=$selected_3?>>Hero</option>
+                            <option value='4' <?=$selected_4?>>Legend</option>
+                        </select>
+                        <br/>
+                        <span>Min. quality:</span>
+<?php
+                        $selected_0 = "";
+                        $selected_1 = "";
+                        $selected_2 = "";
+                        $selected_3 = "";
+                        $selected_4 = "";
+                        switch (strtoupper($page->filters["max_quality"])){
+                            case 0:
+                                $selected_0 = "selected";
+                                break;
+                            case 1:
+                                $selected_1 = "selected";
+                                break;
+                            case 2:
+                                $selected_2 = "selected";
+                                break;
+                            case 3:
+                                $selected_3 = "selected";
+                                break;
+                            case 4:
+                                $selected_4 = "selected";
+                                break;
+                        }
+?>
+                        <select name='max_quality' id='filter_quality_max'>
+                            <option value='0' <?=$selected_0?>>Normal</option>
+                            <option value='1' <?=$selected_1?>>Magic</option>
+                            <option value='2' <?=$selected_2?>>Rare</option>
+                            <option value='3' <?=$selected_3?>>Hero</option>
+                            <option value='4' <?=$selected_4?>>Legend</option>
+                        </select>
+                    </div>
+                    <div class='filter' id='filter_quality'>
+                        <span>Min. original quality:</span>
+<?php
+                        $selected_0 = "";
+                        $selected_1 = "";
+                        $selected_2 = "";
+                        $selected_3 = "";
+                        $selected_4 = "";
+                        switch (strtoupper($page->filters["min_original_quality"])){
+                            case 0:
+                                $selected_0 = "selected";
+                                break;
+                            case 1:
+                                $selected_1 = "selected";
+                                break;
+                            case 2:
+                                $selected_2 = "selected";
+                                break;
+                            case 3:
+                                $selected_3 = "selected";
+                                break;
+                            case 4:
+                                $selected_4 = "selected";
+                                break;
+                        }
+?>
+                        <select name='min_original_quality' id='filter_original_quality_min'>
+                            <option value='0' <?=$selected_0?>>Normal</option>
+                            <option value='1' <?=$selected_1?>>Magic</option>
+                            <option value='2' <?=$selected_2?>>Rare</option>
+                            <option value='3' <?=$selected_3?>>Hero</option>
+                            <option value='4' <?=$selected_4?>>Legend</option>
+                        </select>
+                        <br/>
+                        <span>Max. original quality:</span>
+<?php
+                        $selected_0 = "";
+                        $selected_1 = "";
+                        $selected_2 = "";
+                        $selected_3 = "";
+                        $selected_4 = "";
+                        switch (strtoupper($page->filters["max_quality"])){
+                            case 0:
+                                $selected_0 = "selected";
+                                break;
+                            case 1:
+                                $selected_1 = "selected";
+                                break;
+                            case 2:
+                                $selected_2 = "selected";
+                                break;
+                            case 3:
+                                $selected_3 = "selected";
+                                break;
+                            case 4:
+                                $selected_4 = "selected";
+                                break;
+                        }
+?>
+                        <select name='max_original_quality' id='filter_original_quality_max'>
+                            <option value='0' <?=$selected_0?>>Normal</option>
+                            <option value='1' <?=$selected_1?>>Magic</option>
+                            <option value='2' <?=$selected_2?>>Rare</option>
+                            <option value='3' <?=$selected_3?>>Hero</option>
+                            <option value='4' <?=$selected_4?>>Legend</option>
+                        </select>
+                    </div>
+                    <div class='filter' id='filter_efficiency'>
+                        <span>Min. efficiency:</span>
+                        <input type='number' name='min_efficiency' id='filter_efficiency_min' min='0' max='100' value='<?=$page->filters["min_efficiency"]?>'/>%
+                        <br/>
+                        <span>Max. efficiency:</span>
+                        <input type='number' name='max_efficiency' id='filter_efficiency_max' min='0' max='100' value='<?=$page->filters["max_efficiency"]?>'/>%
+                    </div>
+                    <div class='filter' id='filter_max_efficiency'>
+                        <span>Min. maximum efficiency:</span>
+                        <input type='number' name='min_max_efficiency' id='filter_max_efficiency_min' min='0' max='100' value='<?=$page->filters["min_max_efficiency"]?>'/>%
+                        <br/>
+                        <span>Max. maximum efficiency:</span>
+                        <input type='number' name='max_max_efficiency' id='filter_max_efficiency_max' min='0' max='100' value='<?=$page->filters["max_max_efficiency"]?>'/>%
+                    </div>
+                    <div class='filter' id='filter_quality'>
+<?php
+                        $selected_0 = "";
+                        $selected_1 = "";
+                        $selected_2 = "";
+                        $selected_3 = "";
+                        $selected_4 = "";
+                        switch (strtoupper($page->filters["assigned"])){
+                            case 0:
+                                $selected_0 = "selected";
+                                break;
+                            case 1:
+                                $selected_1 = "selected";
+                                break;
+                            case 2:
+                                $selected_2 = "selected";
+                                break;
+                            case 3:
+                                $selected_3 = "selected";
+                                break;
+                            case 4:
+                                $selected_4 = "selected";
+                                break;
+                        }
+?>
+                        <select name='assigned' id='filter_assigned'>
+                            <option value='0' <?=$selected_0?>>All</option>
+                            <option value='1' <?=$selected_1?>>Assigned</option>
+                            <option value='2' <?=$selected_2?>>Unassigned</option>
+                            <option value='3' <?=$selected_3?>>All (no storage)</option>
+                            <option value='4' <?=$selected_4?>>Assigned (no storage)</option>
+                        </select>
+                    </div>
+                    <div class='filter' id='filter_group'>
+                        <span>Group by:</span>
+<?php
+                        $selected_0 = "";
+                        $selected_1 = "";
+                        switch (strtoupper($page->filters["group"])){
+                            case "SLOT":
+                                $selected_0 = "selected";
+                                break;
+                            case "TYPE":
+                                $selected_1 = "selected";
+                                break;
+                        }
+?>
+                        <select name='group' id='filter_group'>
+                            <option value='SLOT' <?=$selected_0?>>Slot</option>
+                            <option value='TYPE' <?=$selected_1?>>Type</option>
+                        </select>
+                    </div>
+                    <div id='filter_apply'>
+                        <input type='submit' value='Apply'/>
+                    </div>
+                </form>
+            </section> <!-- #filters -->
+            <section id='list'>
+<?php
+                $prev_group = "";
+                $group = "";
+                $group_title = "";
+                $group_image = "";
+                foreach ($page->runes as $rune){
+                    switch ($page->filters["group"]){
+                        case "TYPE":
+                            $group = $rune->type;
+                            $group_title = $rune->type;
+                            $group_image = $path["img"]["layout"] . "rune/" .$rune->type . ".png";
+                            break;
+                        default:
+                            $group = $rune->slot;
+                            $group_title = "Slot " . $rune->slot;
+                            $group_image = $path["img"]["layout"] . "rune/base.png";
+                    }
+                    if ($prev_group != $group){
+                        if ($prev_group == ""){
+?>
+                            <article>
+<?php
+                        }
+                        else{
+?>
+                            </article>
+                            <article>
+<?php
+                        }
+                        $prev_group = $group;
+?>
+                        <h4>
+                            <img class='group_image_<?=$group?>' alt='<?=$group_title?>' src='<?=$group_image?>'>
+                            <span>
+    <?=$group_title?>
+                            </span>
+                        </h4>
+<?php
+                    }
+?>
+                    <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?>'>
+                                    <img class='rune_base' src=<?=$path["img"]["layout"]?>rune/base.png/>
+                                    <img class='rune_icon' src='<?=$path["img"]["layout"]?>rune/<?=$rune->type?>.png'/>
+                                    <span class='rune_stars'>
+<?php
+                                        for ($i = 0; $i < $rune->stars; $i ++){
+?>
+                                            <img class='star' src='<?=$path["img"]["layout"] . "icon/star_silver.png"?>'/>
+<?php
+                                        }
+?>
+                                    </span>
+                                    <span class='rune_level'>
+            <?=$rune->level?>
+                                    </span>
+                                </div>
+<?php
+                                    if ($rune->assigned_to != null){
+?>
+                                        <div class='assigned'>
+                                            <a target='blank' href='/monster/<?=$rune->assigned_to->id?>'>
+                                                <img title='<?=$rune->assigned_to->monster->name?>' class='monster_image border_<?=$rune->assigned_to->monster->element?>' src='<?=$rune->assigned_to->monster->get_image()?>'/>
+                                            </a>
+                                        </div>
+<?php
+                                    }
+?>
+                            </td>
+                            <td class='stats'>
+                                <table>
+                                    <tr class='main_stat'>
+                                        <td class='stat'>
+<?php
+                                            if (strpos($rune->main_stat, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->main_stat);
+                                                $stat_value = "+ " . $rune->main_stat_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->main_stat;
+                                                $stat_value = "+ " . $rune->main_stat_value;
+                                            }
+?>
+                <?=$stat_name?>
+                                        </td>
+                                        <td class='value'>
+                <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class='innate_stat'>
+                                        <td class='stat'>
+<?php
+                                            if (strlen($rune->innate_stat) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->innate_stat, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->innate_stat);
+                                                $stat_value = "+ " . $rune->innate_stat_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->innate_stat;
+                                                $stat_value = "+ " . $rune->innate_stat_value;
+                                            }
+?>
+                <?=$stat_name?>
+                                        </td>
+                                        <td class='value'>
+                <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class=substat>
+                                        <td class='stat'>
+<?php
+                                            if (strlen($rune->substat_1) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->substat_1, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->substat_1);
+                                                $stat_value = "+ " . $rune->substat_1_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->substat_1;
+                                                $stat_value = "+ " . $rune->substat_1_value;
+                                            }
+                                            if ($rune->substat_1_craft == 1){
+                                                $craft = "craft";
+                                            }
+                                            else{
+                                                $craft = "";
+                                            }
+?>
+                <?=$stat_name?>
+                                        </td>
+                                        <td class='value <?=$craft?>'>
+                <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class=substat>
+                                        <td class='stat'>
+<?php
+                                            if (strlen($rune->substat_2) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->substat_2, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->substat_2);
+                                                $stat_value = "+ " . $rune->substat_2_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->substat_2;
+                                                $stat_value = "+ " . $rune->substat_2_value;
+                                            }
+                                            if ($rune->substat_2_craft == 1){
+                                                $craft = "craft";
+                                            }
+                                            else{
+                                                $craft = "";
+                                            }
+?>
+                <?=$stat_name?>
+                                        </td>
+                                        <td class='value <?=$craft?>'>
+                <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class=substat>
+                                        <td class='stat'>
+<?php
+                                            if (strlen($rune->substat_3) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->substat_3, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->substat_3);
+                                                $stat_value = "+ " . $rune->substat_3_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->substat_3;
+                                                $stat_value = "+ " . $rune->substat_3_value;
+                                            }
+                                            if ($rune->substat_3_craft == 1){
+                                                $craft = "craft";
+                                            }
+                                            else{
+                                                $craft = "";
+                                            }
+?>
+                <?=$stat_name?>
+                                        </td>
+                                        <td class='value <?=$craft?>'>
+                <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                    <tr class=substat>
+                                        <td class='stat'>
+<?php
+                                            if (strlen($rune->substat_4) == 0){
+                                                $stat_name = "&nbsp;";
+                                                $stat_value = "";
+                                            }
+                                            elseif (strpos($rune->substat_4, "%") !== false){
+                                                $stat_name = str_replace("%", "", $rune->substat_4);
+                                                $stat_value = "+ " . $rune->substat_4_value . "%";
+                                            }
+                                            else{
+                                                $stat_name = $rune->substat_4;
+                                                $stat_value = "+ " . $rune->substat_4_value;
+                                            }
+                                            if ($rune->substat_4_craft == 1){
+                                                $craft = "craft";
+                                            }
+                                            else{
+                                                $craft = "";
+                                            }
+?>
+                <?=$stat_name?>
+                                        </td>
+                                        <td class='value <?=$craft?>'>
+                <?=$stat_value?>
+                                        <td>
+                                    </tr>
+                                </table>
+                            </td>
+                            <td class='details'>
+<?php
+                                switch ($rune->quality){
+                                    case 0:
+                                        $q = "Normal";
+                                        break;
+                                    case 1:
+                                        $q = "Magic";
+                                        break;
+                                    case 2:
+                                        $q = "Rare";
+                                        break;
+                                    case 3:
+                                        $q = "Hero";
+                                        break;
+                                    case 4:
+                                        $q = "Legend";
+                                        break;
+                                }
+                                switch ($rune->original_quality){
+                                    case 0:
+                                        $oq = "Normal";
+                                        break;
+                                    case 1:
+                                        $oq = "Magic";
+                                        break;
+                                    case 2:
+                                        $oq = "Rare";
+                                        break;
+                                    case 3:
+                                        $oq = "Hero";
+                                        break;
+                                    case 4:
+                                        $oq = "Legend";
+                                        break;
+                                }
+?>
+                                <table class='table_details'>
+                                    <tr>
+                                        <td class='title'>
+                                            Quality:
+                                        </td>
+                                        <td class='value'>
+                                            <span class='quality quality_<?=strtolower($q)?>'>
+                    <?=$q?>
+                                            </span>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Original quality:
+                                        </td>
+                                        <td class='value'>
+                                            <span class='quality quality_<?=strtolower($oq)?>'>
+                    <?=$oq?>
+                                            </span>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Value:
+                                        </td>
+                                        <td class='value'>
+                <?=$rune->value?>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Efficiency:
+                                        </td>
+                                        <td class='value'>
+                <?=number_format($rune->efficiency, 2)?>%
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Max. efficiency:
+                                        </td>
+                                        <td class='value'>
+                <?=number_format($rune->max_efficiency, 2)?>%
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class='title'>
+                                            Reached efficiency:
+                                        </td>
+                                        <td class='value'>
+                <?=number_format($rune->efficiency * 100 / $rune->max_efficiency)?>%
+                                        </td>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
 <?php
                 }
 ?>
-            </div> <!-- .rune_circle -->
-        </div> <!-- #new -->
+                </article> <!-- Close last group -->
+            </section> <!-- #catalog -->
+
 <?php
         include __DIR__ . "/inc/footer.php";
 ?>

install_base.py

@@ -9,7 +9,7 @@ import sqlite3
 import wget
 import json
 
-OPT_DOWNLOAD = True;
+OPT_DOWNLOAD = False;
 
 """
 Initializes the database file and creates all the tables.
@@ -31,6 +31,7 @@ def createDatabase(name):
                 com2us_id INT,
                 area TEXT,
                 affected_stat TEXT,
+                element TEXT,
                 name TEXT,
                 description TEXT,
                 max_level INT
@@ -295,13 +296,15 @@ def parseBuildings(db, url):
             com2us_id = building["com2us_id"]
             area = building["area"]
             affected_stat = building["affected_stat"]
+            element = building["element"]
             name = building["name"]
             description = building["description"]
             max_level = building["max_level"]
-            insert(db, "k_building", (id, com2us_id, area, affected_stat, name, description, max_level))
+            insert(db, "k_building", (id, com2us_id, area, affected_stat, element, name, description, max_level))
             lv = 0
             for bonus in building["stat_bonus"]:
                 insert(db, "k_building_level", (id, lv, bonus, building["upgrade_cost"][lv]))
+                lv = lv + 1
         # Next page
         db.commit()
         if data["next"] != None:

public/css/monster.css

@@ -11,14 +11,14 @@ section#monster{
 }
 
 section#monster article#profile{
-	max-width: 60%;
+    max-width: 60%;
     display: inline-block;
     vertical-align: top;
     /*width: 7em;*/
     border: 0.2em solid #000000;
     margin: 0.5em;
     position: relative;
-    border-radius: 15%;
+    border-radius: 1em;
     background: #351e0b;
     border: 0.2em solid #f2c920;
     border-radius: 0.5em;
@@ -26,11 +26,10 @@ section#monster article#profile{
 }
 @media screen and (max-width : 990px){
     section#monster article#profile{
-        height: 6em;
-        width: 6em;
-        border: 0.1em solid #000000;
-        margin: 0.2em;
-        border-radius: 10%;
+        width: 95%;
+        max-width: 95%;
+        margin: 0.2em auto;
+        display: block;
     }
 }
 section#monster article#profile img#monster_image{
@@ -40,19 +39,19 @@ section#monster article#profile img#monster_image{
     border-width: 0.3em;
     border-radius: 15%;
     display: inline-block;
-	vertical-align: top;
-	margin: 0 1.5em 1.5em 1.5em;
+    vertical-align: top;
+    margin: 0 1.5em 1.5em 1.5em;
 }
 section#monster article#profile div#details{
-	display: inline-block;
-	vertical-align: top;
-	text-align: center;
+    display: inline-block;
+    vertical-align: top;
+    text-align: center;
 }
 section#monster 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;
+    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;
 }
 section#monster article#profile div#details span.stars{
     display: block;
@@ -69,11 +68,11 @@ section#monster article#profile div#details span.level{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
 }
 section#monster 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;
+    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;
 }
 
 section#monster article#profile table#stats{
@@ -96,7 +95,7 @@ section#monster article#profile table#stats td{
 }
 
 section#monster article#profile table#stats td, th{
-	padding: 0.2em;
+    padding: 0.2em;
     border: 0.1em solid #000000;
 }
 
@@ -110,104 +109,104 @@ section#monster article#profile table#stats td.total{
 }
 
 section#monster article#profile div#skills{
-	text-align: center;
+    text-align: center;
 }
 
 section#monster article#profile div#skills div.skill{
-	display: inline-block;
-	vertical-align: top;
-	margin: 0.5em;
-	color: #ffffff;
-	text-align: center;
-	max-width: 20%;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0.5em;
+    color: #ffffff;
+    text-align: center;
+    max-width: 20%;
 }
 
 section#monster article#profile div#skills div.skill img.skill_img{
-	width: 5em;
-	height: 5em;
-	border: 0.3em solid #f2c920;
+    width: 5em;
+    height: 5em;
+    border: 0.3em solid #f2c920;
     border-radius: 0.5em;
 }
 section#monster article#profile div#skills div.skill span.skill_level{
-	font-size: 130%;
-	position: relative;
-	top: -2em;
-	right: -0.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;
+    font-size: 130%;
+    position: relative;
+    top: -2em;
+    right: -0.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;
 }
 
 section#monster article#profile div#skills div.skill span.skill_level.maxed{
-	color: #f2c920;
+    color: #f2c920;
 }
 
 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;
-	display: block;
-	font-weight: bold;
+    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
+    margin-top: -2.5em;
+    display: block;
+    font-weight: bold;
 }
 
 section#monster article#profile div#skills div.skill span.skill_description{
-	font-size: 90%;
-	font-style: italic;
+    font-size: 90%;
+    font-style: italic;
 }
 
 section#monster article#profile div#skills div.skill span.skill_effects{
-	display: block;
-	text-align: center;
-	margin-top: 1em;
+    display: block;
+    text-align: center;
+    margin-top: 1em;
 }
 
 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;
+    width: 1.5em;
+    height: 1.5em;
+    border: 0.1em solid #000000;
     border-radius: 0.5em;
 }
 
 section#monster article#profile div#skills div.skill table.skill_up{
-	font-size: 80%;
-	margin-top: 1em;
+    font-size: 80%;
+    margin-top: 1em;
 }
 
 section#monster article#profile div#skills div.skill table.skill_up td{
-	color: #888888;
+    color: #888888;
 }
 
 section#monster article#profile div#skills div.skill table.skill_up td.level{
-	font-style: italic;
-	padding-right: 0.8em;
-	min-width: 3em; 
+    font-style: italic;
+    padding-right: 0.8em;
+    min-width: 3em; 
 }
 
 section#monster article#profile div#skills div.skill table.skill_up td.aquired{
-	color: #ffffff;
-	font-weight: bold;
+    color: #ffffff;
+    font-weight: bold;
 }
 
 section#monster article#profile table#skill_averages{
-	margin: 3em auto 2em auto;
-	color: #ffffff;
-	font-size: 120%;
-	border-top: 0.1em solid #ffffff;
-	border-bottom: 0.1em solid #ffffff;
-	border-radius: 0.3em;
-	padding-top: 2em;
-	padding-bottom: 2em;
+    margin: 3em auto 2em auto;
+    color: #ffffff;
+    font-size: 120%;
+    border-top: 0.1em solid #ffffff;
+    border-bottom: 0.1em solid #ffffff;
+    border-radius: 0.3em;
+    padding-top: 2em;
+    padding-bottom: 2em;
 }
 
 section#monster article#profile table#skill_averages td.title{
-	padding-left: 4em;
-	text-align: right;
+    padding-left: 4em;
+    text-align: right;
 }
 section#monster article#profile table#skill_averages td.value{
-	padding-right: 4em;
-	text-align: left;
-	padding-left: 1em;
+    padding-right: 4em;
+    text-align: left;
+    padding-left: 1em;
 }
 
 section#monster article#runes{
-	max-width: 45%;
+    max-width: 45%;
     display: inline-block;
     vertical-align: top;
     /*width: 7em;*/
@@ -220,109 +219,114 @@ section#monster article#runes{
     border-radius: 0.5em;
     padding: 0em;
 }
-
+@media screen and (max-width : 990px){
+    section#monster article#runes{
+        width: 95%;
+        max-width: 95%;
+    }
+}
 section#monster article#runes table#table_runes{
-	border-collapse: collapse;
+    border-collapse: collapse;
 }
 
 section#monster article#runes table#table_runes td.stats{
-	color: #ffffff;
-	border-bottom: 0.1em solid #ffffff;
+    color: #ffffff;
+    border-bottom: 0.1em solid #ffffff;
 }
 
 section#monster article#runes table#table_runes td.stats table{
-	color: #ffffff;
-	font-size: 80%;
+    color: #ffffff;
+    font-size: 80%;
 }
 
 section#monster article#runes table#table_runes td.stats table tr.main_stat{
-	font-weight: bold;
-	font-size: 110%;
+    font-weight: bold;
+    font-size: 110%;
 }
 
 section#monster article#runes table#table_runes td.stats table tr.innate_stat{
-	font-style: italic;
+    font-style: italic;
 }
 
 section#monster article#runes table#table_runes td.stats table td.stat{
-	text-align: right;
+    text-align: right;
 }
 section#monster article#runes table#table_runes td.stats table td.value{
-	text-align: left;
-	padding-left: 1em;
+    text-align: left;
+    padding-left: 1em;
 }
 
 section#monster article#runes table#table_runes td.stats table td.craft{
-	color: #ff7700;
+    color: #ff7700;
 }
 
 section#monster article#runes table#table_runes td.details{
-	color: #ffffff;
-	border-bottom: 0.1em solid #ffffff;
-	padding-left: 0.5em;
+    color: #ffffff;
+    border-bottom: 0.1em solid #ffffff;
+    padding-left: 0.5em;
 }
 
 section#monster article#runes table#table_runes td.details table.table_details{
-	font-size: 80%;
+    font-size: 80%;
 }
 
 section#monster article#runes table#table_runes td.details table.table_details td.title{
-	text-align: right;
+    text-align: right;
 }
 section#monster article#runes table#table_runes td.details table.table_details td.value{
-	text-align: left;
-	padding-left: 1em;
+    text-align: left;
+    padding-left: 1em;
 }
 
 section#monster 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;
+    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;
 }
 
 section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_normal{
-	background-color: #cccccc;
+    background-color: #cccccc;
 }
 
 section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_magic{
-	background-color: #55ff55;
+    background-color: #55ff55;
 }
 
 section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_rare{
-	background-color: #15c6e1;
+    background-color: #15c6e1;
 }
 
 section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_hero{
-	background-color: #ad7fa8;
+    background-color: #ad7fa8;
 }
 
 section#monster article#runes table#table_runes td.details table.table_details span.quality.quality_legend{
-	background-color: #f57900;
+    background-color: #f57900;
 }
 
 section#monster article#runes table#table_runes td.details{
-	color: #ffffff;
-	border-bottom: 0.1em solid #ffffff;
-	padding-left: 0.5em;
+    color: #ffffff;
+    border-bottom: 0.1em solid #ffffff;
+    padding-left: 0.5em;
 }
 
 section#monster article#runes div#rune_averages{
-	margin: 5em auto 2em auto;
-	text-align: center;
+    margin: 5em auto 2em auto;
+    text-align: center;
 }
 
 section#monster article#runes div#rune_averages table#table_averages{
-	margin: auto;
-	color: #ffffff;
+    margin: auto;
+    color: #ffffff;
 }
 
 section#monster article#runes div#rune_averages table#table_averages td.title{
-	text-align: right;
+    text-align: right;
 }
 section#monster article#runes div#rune_averages table#table_averages td.value{
-	text-align: left;
-	padding-left: 1em;
+    text-align: left;
+    padding-left: 1em;
 }

public/css/monsters.css

@@ -132,11 +132,11 @@ section#list div.monster:hover div.monster_tooltip{
 }
 
 section#list div.monster div.monster_tooltip 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;
+    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;
 }
 
 section#list div.monster div.monster_tooltip table.stats{
@@ -159,41 +159,41 @@ section#list div.monster div.monster_tooltip table.stats td.total{
 }
 
 section#list div.monster div.monster_tooltip div.skills{
-	text-align: center;
+    text-align: center;
 }
 
 section#list div.monster div.monster_tooltip div.skills div.skill{
-	display: inline-block;
-	vertical-align: top;
-	max-width: 22%;
-	margin: 0.5em;
-	font-size: 50%;
-	color: #ffffff;
-	text-align: center;
+    display: inline-block;
+    vertical-align: top;
+    max-width: 22%;
+    margin: 0.5em;
+    font-size: 50%;
+    color: #ffffff;
+    text-align: center;
 }
 
 section#list div.monster div.monster_tooltip div.skills div.skill img{
-	width: 90%;
-	height: 90%;
-	border: 0.3em solid #f2c920;
+    width: 90%;
+    height: 90%;
+    border: 0.3em solid #f2c920;
     border-radius: 0.5em;
 }
 section#list div.monster div.monster_tooltip div.skills div.skill span.skill_level{
-	font-size: 180%;
-	position: relative;
-	top: -2em;
-	right: -0.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;
+    font-size: 180%;
+    position: relative;
+    top: -2em;
+    right: -0.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;
 }
 
 section#list div.monster div.monster_tooltip div.skills div.skill span.skill_level.maxed{
-	color: #f2c920;
+    color: #f2c920;
 }
 
 section#list div.monster div.monster_tooltip 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: -4em;
-	display: block;
+    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
+    margin-top: -4em;
+    display: block;
 }
 
 div#viewer{

public/css/report.css

@@ -1,3 +1,80 @@
+/* Main reports page. */
+body#body_reports section{
+    width: 90%;
+    margin: auto;
+    padding: 0;
+    text-align: center;
+}
+
+body#body_reports section article.report{
+    width: 40%;
+    display: inline-block;
+    margin: 0.5em;
+    border-radius: 15%;
+    background: #351e0b;
+    border: 0.2em solid #f2c920;
+    border-radius: 0.5em;
+    padding: 0.5em;
+    text-align: left;
+}
+@media screen and (max-width : 990px){
+    body#body_reports section article.report{
+        width: 90%;
+        display: block;
+    }
+}
+
+body#body_reports section article.report h3{
+    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;
+}
+
+body#body_reports section article.report img{
+    float: right;
+    height: 5em;
+    width: 5em;
+    margin: 0.5em;
+    border-radius: 15%;
+    background: #444444;
+    border: 0.2em solid #777777;
+}
+
+body#body_reports section article.report p{
+    color: #ffffff;
+}
+
+body#body_reports section article.report div.report_filters{
+    width: 80%;
+    text-align:center;
+    margin: 1em auto 2em auto;
+    border: 0.1em solid #000000;
+    border-radius: 0.5em;
+    background-color: #aa8866;
+}
+body#body_reports section article.report div.report_filters div.filter{
+    vertical-align: top;
+    margin: 0.7em;
+    display: inline-block;
+    text-align: center;
+}
+body#body_reports section article.report div.report_filters div.filter span{
+    color: #ffffff;
+}
+body#body_reports section article.report div.report_filters div.filter input{
+    margin-top: 0.5em;
+}
+body#body_reports section article.report div.report_filters div#filter_stars input{
+    width: 3em;
+}
+body#body_reports section article.report div.report_filters div#filter_apply{
+    text-align: center;
+    margin: 2em auto 1em auto;
+}
+
+
+/* Skillup report page. */
 body#body_report_skillup section#filters{
     width: 80%;
     text-align:center;
@@ -32,11 +109,6 @@ body#body_report_skillup section#list{
     margin: auto;
     text-align: center;
 }
-@media screen and (max-width : 990px){
-    body#body_report_skillup section#list{
-        width: 100%;
-    }
-}
 
 body#body_report_skillup section#list div.monster{
     display: block;
@@ -51,18 +123,20 @@ body#body_report_skillup section#list div.monster{
 }
 @media screen and (max-width : 990px){
     body#body_report_skillup section#list div.monster{
-        height: 6em;
-        width: 6em;
-        border: 0.1em solid #000000;
-        margin: 0.2em;
-        border-radius: 10%;
+        margin: 0.1em;
     }
 }
 
 body#body_report_skillup section#list div.monster div.profile{
-	width: 35%;
-	display: inline-block;
-	vertical-align: top;
+    width: 35%;
+    display: inline-block;
+    vertical-align: top;
+}
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster div.profile{
+        text-align: center;
+        width: 30%;
+    }
 }
 
 body#body_report_skillup section#list div.monster div.profile img#monster_image{
@@ -72,86 +146,453 @@ body#body_report_skillup section#list div.monster div.profile img#monster_image{
     border-width: 0.3em;
     border-radius: 15%;
     display: inline-block;
-	vertical-align: top;
-	margin: 0 1.5em 1.5em 1.5em;
+    vertical-align: top;
+    margin: 0 1.5em 1.5em 1.5em;
+}
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster div.profile img#monster_image{
+        display: block;
+        width: 5em;
+        height: 5em;
+        margin: 0.5em auto 0.1em auto;
+    }
 }
 body#body_report_skillup section#list div.monster div.profile div#details{
-	display: inline-block;
-	vertical-align: top;
-	text-align: center;
+    display: inline-block;
+    vertical-align: top;
+    text-align: center;
+}
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster div.profile div#details{
+    }
 }
 body#body_report_skillup section#list div.monster div.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;
+    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;
+}
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster div.profile div#details h1{
+        font-size: 140%;
+        margin: -0.5em 0 0 0;
+    }
 }
 body#body_report_skillup section#list div.monster div.profile div#details span.stars{
     display: block;
 }
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster div.profile div#details span.stars{
+        display: inline-block;
+        vertical-align: bottom;
+        /*top: -7.1em;
+        position: relative;
+        left: -0.3em;*/
+    }
+}
 body#body_report_skillup section#list div.monster div.profile div#details span.stars img.star{
     width: 1.5em;
     height: 1.5em;
     filter: drop-shadow(0 0 0.05em #ffffff);
     margin: -0.1em;
 }
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster div.profile div#details span.stars img.star{
+        width: 1em;
+        height: 1em;
+        margin: -0.1em -0.6em -0.1em -0.1em;
+        filter: drop-shadow(0 0 0.01em #000000) drop-shadow(0 0 0.01em #000000) drop-shadow(0 0 0.01em #000000) drop-shadow(0 0 0.02em #000000)
+    }
+}
 body#body_report_skillup section#list div.monster div.profile div#details span.level{
     color: #ffffff;
     display: block;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
 }
-
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster div.profile div#details span.level{
+        font-size: 70%;
+        display: inline-block;
+        vertical-align: bottom;
+        padding-left: 1em;
+        /*margin: 0;
+        top: -7.1em;
+        position: relative;*/
+    }
+}
 
 body#body_report_skillup section#list div.monster div.skills{
-	text-align: center;
-	display: inline-block;
-	width: 30%;
+    text-align: center;
+    display: inline-block;
+    width: 30%;
+}
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster div.skills{
+        width: 65%;
+    }
 }
 
 body#body_report_skillup section#list div.monster div.skills div.skill{
-	display: inline-block;
-	vertical-align: top;
-	max-width: 22%;
-	margin: 0.5em;
-	color: #ffffff;
-	text-align: center;
+    display: inline-block;
+    vertical-align: top;
+    max-width: 22%;
+    margin: 0.5em;
+    color: #ffffff;
+    text-align: center;
+}
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster div.skills div.skill{
+        font-size: 80%;
+    }
 }
 
 body#body_report_skillup section#list div.monster div.skills div.skill img{
-	width: 3em;
-	height: 3em;
-	border: 0.1em solid #f2c920;
+    width: 3em;
+    height: 3em;
+    border: 0.1em solid #f2c920;
     border-radius: 0.5em;
 }
 body#body_report_skillup section#list div.monster div.skills div.skill span.skill_level{
-	font-size: 110%;
-	position: relative;
-	top: -2em;
-	right: -0.5em;
-	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;
+    font-size: 110%;
+    position: relative;
+    top: -2em;
+    right: -0.5em;
+    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;
 }
 
 body#body_report_skillup section#list div.monster div.skills div.skill span.skill_level.maxed{
-	color: #f2c920;
+    color: #f2c920;
 }
 
 body#body_report_skillup section#list div.monster 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.2em;
+    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
+    margin-top: -2.2em;
 }
 
 body#body_report_skillup section#list div.monster table#skill_averages{
-	margin-left: 2em;
-	color: #ffffff;
-	display: inline-block;
-	vertical-align: top;
-	max-width: 30%;
+    margin: auto auto auto 2em;
+    color: #ffffff;
+    display: inline-block;
+    vertical-align: top;
+    max-width: 30%;
+}
+@media screen and (max-width : 990px){
+    body#body_report_skillup section#list div.monster table#skill_averages{
+        display: block;
+        margin: auto;
+        font-size: 80%;
+    }
+
 }
 
 body#body_report_skillup section#list div.monster table#skill_averages td.title{
-	text-align: right;
+    text-align: right;
 }
 body#body_report_skillup section#list div.monstertable#skill_averages td.value{
-	text-align: left;
-	padding-left: 1em;
-}
+    text-align: left;
+    padding-left: 1em;
+}
+
+
+
+/* Rune upgrades reportpage */
+body#body_report_runeupgrade section#list{
+    display: block;
+    width: 98%;
+    margin: auto;
+    text-align: center;
+}
+@media screen and (max-width : 990px){
+    body#body_report_runeupgrade section#list{
+        width: 100%;
+    }
+}
+
+body#body_report_runeupgrade section#list article{
+    display: block;
+    vertical-align: top;
+    border: 0.2em solid #000000;
+    margin: 0.5em;
+    position: relative;
+    border-radius: 1em;
+    background: #351e0b;
+    border: 0.2em solid #f2c920;
+    border-radius: 0.5em;
+    padding: 0.5em;
+}
+
+@media screen and (max-width : 990px){
+    body#body_report_runeupgrade section#list article{
+        width: 95%;
+        max-width: 95%;
+        margin: 0.2em auto;
+        display: block;
+    }
+}
+body#body_report_runeupgrade section#list article div.monster img#monster_image{
+    max-width: 12em;
+    max-height: 12em;
+    border-style: solid;
+    border-width: 0.3em;
+    border-radius: 15%;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 1.5em 1.5em 1.5em;
+}
+body#body_report_runeupgrade section#list article div.monster div#details{
+    display: inline-block;
+    vertical-align: top;
+    text-align: center;
+}
+body#body_report_runeupgrade section#list article div.monster 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;
+}
+body#body_report_runeupgrade section#list article div.monster div#details span.stars{
+    display: block;
+}
+body#body_report_runeupgrade section#list article div.monster div#details span.stars img.star{
+    width: 1.5em;
+    height: 1.5em;
+    filter: drop-shadow(0 0 0.05em #ffffff);
+    margin: -0.1em;
+}
+body#body_report_runeupgrade section#list article div.monster div#details span.level{
+    color: #ffffff;
+    display: block;
+    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000;
+}
+body#body_report_runeupgrade section#list article div.monster 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;
+}
+
+
+body#body_report_runeupgrade section#list article table.rune{
+    /*max-width: 45%;*/
+    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;
+    font-size: 70%;
+}
+@media screen and (max-width : 990px){
+    body#body_report_runeupgrade section#list article table.rune{
+        width: 95%;
+        max-width: 95%;
+    }
+}
+body#body_report_runeupgrade section#list article table.rune{
+    border-collapse: collapse;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.stats{
+    color: #ffffff;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.stats table{
+    color: #ffffff;
+    font-size: 80%;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.stats table tr.main_stat{
+    font-weight: bold;
+    font-size: 110%;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.stats table tr.innate_stat{
+    font-style: italic;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.stats table td.stat{
+    text-align: right;
+}
+body#body_report_runeupgrade section#list article table.rune td.stats table td.value{
+    text-align: left;
+    padding-left: 1em;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.stats table td.craft{
+    color: #ff7700;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.details{
+    color: #ffffff;
+    padding-left: 0.5em;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.details table.table_details{
+    font-size: 80%;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.details table.table_details td.title{
+    text-align: right;
+}
+body#body_report_runeupgrade section#list article table.rune td.details table.table_details td.value{
+    text-align: left;
+    padding-left: 1em;
+}
+
+body#body_report_runeupgrade section#list article table.rune 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;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_normal{
+    background-color: #cccccc;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_magic{
+    background-color: #55ff55;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_rare{
+    background-color: #15c6e1;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_hero{
+    background-color: #ad7fa8;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.details table.table_details span.quality.quality_legend{
+    background-color: #f57900;
+}
+
+body#body_report_runeupgrade section#list article table.rune td.details{
+    color: #ffffff;
+    padding-left: 0.5em;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives{
+    padding-bottom: 1em;
+    margin-top: -2em;
+    margin-left: 2.5em;
+    padding-left: 1em;
+    padding-bottom: 1em;
+    border-left: 0.3em solid #ffffff;
+    border-bottom: 0.3em solid #ffffff;
+    padding-top: 2em;
+    border-bottom-left-radius: 1em;
+    font-size: 50%;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative{
+    /*max-width: 45%;*/
+    display: inline-block;
+    vertical-align: top;
+    /*width: 7em;*/
+    border: 0.2em solid #000000;
+    margin: 0.5em 2em 0.5em 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){
+    body#body_report_runeupgrade section#list article div.alternatives table.alternative{
+        width: 95%;
+        max-width: 95%;
+    }
+}
+body#body_report_runeupgrade section#list article div.alternatives table.alternative{
+    border-collapse: collapse;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats{
+    color: #ffffff;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table{
+    color: #ffffff;
+    font-size: 80%;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table tr.main_stat{
+    font-weight: bold;
+    font-size: 110%;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table tr.innate_stat{
+    font-style: italic;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table td.stat{
+    text-align: right;
+}
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table td.value{
+    text-align: left;
+    padding-left: 1em;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.stats table td.craft{
+    color: #ff7700;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details{
+    color: #ffffff;
+    padding-left: 0.5em;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details{
+    font-size: 80%;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details td.title{
+    text-align: right;
+}
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details td.value{
+    text-align: left;
+    padding-left: 1em;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative 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;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_normal{
+    background-color: #cccccc;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_magic{
+    background-color: #55ff55;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_rare{
+    background-color: #15c6e1;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_hero{
+    background-color: #ad7fa8;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details table.table_details span.quality.quality_legend{
+    background-color: #f57900;
+}
+
+body#body_report_runeupgrade section#list article div.alternatives table.alternative td.details{
+    color: #ffffff;
+    padding-left: 0.5em;
+}

public/css/runes.css

@@ -1,113 +1,205 @@
-table.rune_type{
-    border: 0.2em solid #f2c920;
-    border-radius: 1.5em;
-    padding: 1em;
-    background-color: #222222;
-    box-shadow: inset 0 0 2em #aaaaaa;
-    width: 90%;
-    margin: auto;
+section#filters{
+    width: 80%;
+    text-align:center;
+    margin: 1em auto 2em auto;
+    border: 0.1em solid #000000;
+    border-radius: 0.5em;
+    background-color: #aa8866;
 }
-
-table.rune_type td.rune_type_header{
-    padding: 0.8em;
-    width: 4em;
-    font-size: 140%;
+section#filters div.filter{
+    vertical-align: top;
+    margin: 0.7em;
+    display: inline-block;
+    text-align: center;
+}
+section#filters div.filter span{
     color: #ffffff;
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.3em #000000;
-    border-right: 0.1em solid #000000;
-    font-style: italic;
+}
+section#filters div.filter input{
+    margin-top: 0.5em;
+}
+section#filters div.filter_stars input{
+    width: 3em;
+}
+section#filters div.filter select#filter_type{
+    height: 26em;
+    overflow: hidden;
+}
+section#filters div#filter_apply{
     text-align: center;
+    margin: 2em auto 1em auto;
 }
-table.rune_type td.rune_type_header img{
+
+section#list{
     display: block;
+    width: 98%;
     margin: auto;
+    text-align: center;
 }
-able.rune_type td.rune_type_list{
-    text-align: left;
+@media screen and (max-width : 990px){
+    section#list{
+        width: 100%;
+    }
 }
 
-div#rune_list div.rune{
-    display: inline-block;
-    width: 6em;
-    height: 6em;
+section#list article{
     border: 0.2em solid #000000;
     margin: 0.5em;
     position: relative;
+    border-radius: 1em;
+    background: #351e0b;
+    border: 0.2em solid #f2c920;
+    border-radius: 0.5em;
+    padding: 0.5em;
+    text-align: center;
+}
+section#list article h4{
+    margin: -0.5em -0.5em 1em -0.5em;
+    border-bottom: 0.2em solid #f2c920;
+    background-color: #000000bb;
+    color: #ffffff;
+}
+section#list article h4 img, span{
+    display: inline-block;
+    vertical-align: middle;
+}
+section#list article h4 span{
+    font-size: 130%;
+    font-weight: bold;
+}
+section#list article h4 img{
+    height: 2em;
+}
+section#list article h4 img.group_image_1{
+    transform: rotate(0deg);
+}
+section#list article h4 img.group_image_2{
+    transform: rotate(57deg);
+}
+section#list article h4 img.group_image_3{
+    transform: rotate(123deg);
+}
+section#list article h4 img.group_image_4{
+    transform: rotate(180deg);
+}
+section#list article h4 img.group_image_5{
+    transform: rotate(237deg);
+}
+section#list article h4 img.group_image_6{
+    transform: rotate(303deg);
+}
+
+section#list article table.rune{
+    border-collapse: collapse;
+    display: inline-block;
+    vertical-align: top;
+    font-size: 80%;
+    position: relative;
+    border-radius: 1em;
+    margin: 0.5em;
+}
+section#list article table.rune{
+    font-size: 70%;
+}
+section#list article table.rune td.icon div.assigned{
+    max-width: 3em;
+    max-height: 3em;
+    position: absolute;
+    left: 0.5em;
+    bottom: 0.85em;
+}
+section#list article table.rune td.icon div.assigned img.monster_image{
+    width: 3em;
+    height: 3em;
+    border-style: solid;
+    border-width: 0.2em;
     border-radius: 15%;
 }
+section#list article table.rune td.icon{
+    border-bottom: 0.2em solid #777777;
+    border-left: 0.2em solid #777777;
+    border-top: 0.2em solid #777777;
+    background-color: #ffffff44;
+}
+section#list article table.rune td.stats{
+    color: #ffffff;
+    border-bottom: 0.2em solid #777777;
+    border-top: 0.2em solid #777777;
+    background-color: #ffffff44;
+}
 
-@media screen and (max-width : 990px){
-    div#rune_list div.rune{
-        height: 5em;
-        width: 5em;
-        border: 0.1em solid #000000;
-        margin: 0.2em;
-        border-radius: 10%;
-    }
+section#list article table.rune td.stats table{
+    color: #ffffff;
+    font-size: 80%;
 }
 
-div#rune_list div.rune span.stars{
-    position: absolute;
-/*     z-index: 1; */
-    top: 0.4em;
-    right: 0.5em;
+section#list article table.rune td.stats table tr.main_stat{
+    font-weight: bold;
+    font-size: 110%;
 }
-@media screen and (max-width : 990px){
-    div#rune_list div.rune span.stars{
-        top: 0.3em;
-        right: 0.4em;
-    }
+
+section#list article table.rune td.stats table tr.innate_stat{
+    font-style: italic;
 }
 
-div#rune_list div.rune span.stars img.star{
-    width: 1em;
-    height: 1em;
-    margin-left: -0.6em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+section#list article table.rune td.stats table td.stat{
+    text-align: right;
 }
-@media screen and (max-width : 990px){
-    div#rune_list div.rune span.stars img.star{
-        width: 0.9em;
-        height: 0.9em;
-        margin-left: -0.7em;
-    }
+section#list article table.rune td.stats table td.value{
+    text-align: left;
+    padding-left: 1em;
 }
 
-div#rune_list div.rune img.rune{
-    width: 6em;
-    height: 6em;
-    border-style: solid;
-    border-width: 0;
-    position: absolute;
-    baorder-radius: 15%;
+section#list article table.rune td.stats table td.craft{
+    color: #ff7700;
 }
-@media screen and (max-width : 990px){
-    div#rune_list div.rune img.rune{
-        width: 4.6em;
-        height: 4.6em;
-        border-width: 0;
-        border-radius: 10%;
-    }
+
+section#list article table.rune td.details{
+    color: #ffffff;
+    padding-left: 0.5em;
+    border-bottom: 0.2em solid #777777;
+    border-right: 0.2em solid #777777;
+    border-top: 0.2em solid #777777;
+    background-color: #ffffff44;
 }
-div#rune_list div.rune img.rune_icon{
-    width: 40%;
-    height: 40%;
-    position: absolute;
-    margin: 30%;
+
+section#list article table.rune td.details table.table_details{
+    font-size: 80%;
+}
+
+section#list article table.rune td.details table.table_details td.title{
+    text-align: right;
+}
+section#list article table.rune td.details table.table_details td.value{
+    text-align: left;
+    padding-left: 1em;
 }
-div#rune_list div.rune span.level{
-    color: #000000;
+
+section#list article table.rune td.details table.table_details span.quality{
+    border: 0.1em solid #000000;
+    border-radius: 0.2em;
     font-weight: bold;
-    text-shadow: 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff, 0 0 0.4em #ffffff;
-    position: absolute;
-/*     z-index: 1; */
-    bottom: 0.2em;
-    left: 0.5em;
+    color: #ffffff;
+    text-shadow: 0 0 0.1em #000000;
+    padding: 0 0.3em;
 }
-@media screen and (max-width : 990px){
-    div#rune_list div.rune span.level{
-        font-size: 90%;
-        text-shadow: 0 0 0.2em #ffffff, 0 0 0.2em #ffffff, 0 0 0.2em #ffffff, 0 0 0.3em #ffffff;
-        left: 0.4em;
-    }
+
+section#list article table.rune td.details table.table_details span.quality.quality_normal{
+    background-color: #cccccc;
+}
+
+section#list article table.rune td.details table.table_details span.quality.quality_magic{
+    background-color: #55ff55;
+}
+
+section#list article table.rune td.details table.table_details span.quality.quality_rare{
+    background-color: #15c6e1;
+}
+
+section#list article table.rune td.details table.table_details span.quality.quality_hero{
+    background-color: #ad7fa8;
+}
+
+section#list article table.rune td.details table.table_details span.quality.quality_legend{
+    background-color: #f57900;
 }

public/css/ui.css

@@ -361,57 +361,58 @@ span.skill_image span.skill_tooltip ul.skill_levels li.unreached{
 
 
 input[type=button], input[type=submit]{
-    font-size: 115%;
+    font-size: 100%;
     font-weight: bold;
     color: #ffffff;
-    padding: 0.7em 1.3em 0.7em 1.3em;
+    padding: 0.3em 1em 0.3em 1em;
     background-color: #351e0b;
-    border: 0.2em solid #f2c920;;
+    border: 0.2em solid #f2c920;
     border-radius: 0.5em;
     text-shadow: 0 0 0.2em #000000;
     cursor: pointer;
     box-shadow: 0 0 0.3em #000000;
 }
 input[type=text], input[type=number]{
+    font-size: 80%;
     font-weight: bold;
     color: #000000;
     padding: 0 0.3em;
     background-color: #f3eeea;
-    border: 0.2em solid #f2c920;;
+    border: 0.2em solid #f2c920;
     border-radius: 0.5em;
     text-shadow: 0 0 0.1em #ffffff;
     box-shadow: 0 0 0.3em #000000;
 }
+input[type=number]{
+    width: 3em;
+}
 input[type=checkbox]{
-    height: 1.5em;
-    width: 1.5em;
     font-weight: bold;
     color: #ffffff;
-    padding: 0.7em 1.3em 0.7em 1.3em;
     background-color: #351e0b;
-    border: 0.2em solid #f2c920;;
+    border: 0.2em solid #f2c920;
     border-radius: 0.5em;
     text-shadow: 0 0 0.2em #000000;
     cursor: pointer;
     box-shadow: 0 0 0.3em #000000;
 }
 select{
-    font-size: 115%;
+    font-size: 80%;
     font-weight: bold;
     color: #ffffff;
     padding: 0 0.3em;
     background-color: #351e0b;
-    border: 0.2em solid #f2c920;;
+    border: 0.2em solid #f2c920;
     border-radius: 0.5em;
     text-shadow: 0 0 0.2em #000000;
     cursor: pointer;
     box-shadow: 0 0 0.3em #000000;
 }
 a.a_button{ /* Links that look like buttons. */
-    font-size: 115%;
+    font-size: 100%;
     font-weight: bold;
     color: #ffffff;
-    padding: 0.7em 1.3em 0.7em 1.3em;
+    padding: padding: 0.3em 1em 0.3em 1em;
     background-color: #351e0b;
     border: 0.2em solid #f2c920;;
     border-radius: 0.5em;
@@ -440,220 +441,36 @@ a.a_button{ /* Links that look like buttons. */
 
 
 
-/* Runes */
-div.rune_circle{
-    width: 300px;
-    height: 300px;
-    position: relative;
-}
-div.rune_circle img.rune_circle_slots{
-    position: absolute;
-    width: 219px;
-    height: 249px;
-    left: 40px;
-    top: 25px;
-/*     z-index: 1; */
-}
-div.rune_circle img.rune_base{
-    position: absolute;
-    width: 105px;
-    height: 105px;
-/*     z-index: 2; */
-}
-div.rune_circle img.rune_base.rune_base_1{
-    transform: rotate(0deg);
-    top: 29px;
-    left: 96px;
-}
-div.rune_circle img.rune_base.rune_base_2{
-    transform: rotate(60deg);
-    top: 60px;
-    left: 157px;
-}
-div.rune_circle img.rune_base.rune_base_3{
-    transform: rotate(120deg);
-    top: 130px;
-    left: 157px;
-}
-div.rune_circle img.rune_base.rune_base_4{
-    transform: rotate(180deg);
-    top: 160px;
-    left: 96px;
-}
-div.rune_circle img.rune_base.rune_base_5{
-    transform: rotate(240deg);
-    top: 130px;
-    left: 35px;
-}
-div.rune_circle img.rune_base.rune_base_6{
-    transform: rotate(300deg);
-    top: 60px;
-    left: 36px;
-}
-div.rune_circle img.rune_icon{
-    position: absolute;
-    width: 30px;
-    height: 30px;
-/*     z-index: 3; */
-}
-div.rune_circle img.rune_icon.rune_icon_1{
-    top: 65px;
-    left: 132px;
-}
-div.rune_circle img.rune_icon.rune_icon_2{
-    top: 95px;
-    left: 195px;
-}
-div.rune_circle img.rune_icon.rune_icon_3{
-    top: 168px;
-    left: 197px;
-}
-div.rune_circle img.rune_icon.rune_icon_4{
-    top: 200px;
-    left: 132px;
-}
-div.rune_circle img.rune_icon.rune_icon_5{
-    top: 170px;
-    left: 70px;
-}
-div.rune_circle img.rune_icon.rune_icon_6{
-    top: 92px;
-    left: 71px;
-}
-div.rune_circle img.rune_icon.rune_icon_Normal{
-    filter: sepia(100%) saturate(500%) grayscale(100%);;
-}
-div.rune_circle img.rune_icon.rune_icon_Magic{
-    filter: sepia(100%) saturate(500%) hue-rotate(60deg);
-}
-div.rune_circle img.rune_icon.rune_icon_Rare{
-    filter: sepia(100%) saturate(500%) hue-rotate(120deg);
-}
-div.rune_circle img.rune_icon.rune_icon_Hero{
-    filter: sepia(100%) saturate(500%) hue-rotate(250deg);
-}
-div.rune_circle img.rune_icon.rune_icon_Legendary{
-    filter: sepia(100%) saturate(500%) hue-rotate(330deg);
-}
-div.rune_circle span.rune_level{
-	text-align: left;
-    color: #ffffff;
-    font-weight: bold;
-    font-size: 70%;
-    position: absolute;
-    width: 40px;
-    height: 40px;
-/*     z-index: 3; */
-}
-div.rune_circle span.rune_level.rune_level_1{
-    transform: rotate(0deg);
-    top: 105px;
-    left: 137px;
-}
-div.rune_circle span.rune_level.rune_level_2{
-    transform: rotate(60deg);
-    top: 124px;
-    left: 155px;
-}
-div.rune_circle span.rune_level.rune_level_3{
-    transform: rotate(300deg);
-    top: 145px;
-    left: 180px;
-}
-div.rune_circle span.rune_level.rune_level_4{
-    transform: rotate(0deg);
-    top: 177px;
-    left: 137px;
-}
-div.rune_circle span.rune_level.rune_level_5{
-    transform: rotate(60deg);
-    top: 162px;
-    left: 87px;
-}
-div.rune_circle span.rune_level.rune_level_6{
-    transform: rotate(300deg);
-    top: 108px;
-    left: 111px;
-}
-div.rune_circle span.rune_stars{
-	text-align: left;
-    position: absolute;
-    width: 40px;
-    height: 40px;
-/*     z-index: 3; */
-    color: #ffffff;
-    font-weight: bold;
-    font-size: 70%;
-}
-div.rune_circle span.rune_stars.rune_stars_1{
-    transform: rotate(0deg);
-    top: 94px;
-    left: 140px;
-}
-div.rune_circle span.rune_stars.rune_stars_2{
-    transform: rotate(60deg);
-    top: 120px;
-    left: 167px;
-}
-div.rune_circle span.rune_stars.rune_stars_3{
-    transform: rotate(300deg);
-    top: 147px;
-    left: 193px;
-}
-div.rune_circle span.rune_stars.rune_stars_4{
-    transform: rotate(0deg);
-    top: 188px;
-    left: 142px;
-}
-div.rune_circle span.rune_stars.rune_stars_5{
-    transform: rotate(60deg);
-    top: 172px;
-    left: 80px;
-}
-div.rune_circle span.rune_stars.rune_stars_6{
-    transform: rotate(300deg);
-    top: 100px;
-    left: 102px;
-}
-div.rune_circle span.rune_stars span.rune_stars_num{
-    color: #ffffff;
-    font-weight: bold;
-}
-div.rune_circle span.rune_stars img.rune_stars_star{
-    width: 10px;
-    height: 10px;
-    margin-left: -5px;
-}
-
-
+/**
+ * Rune boxes
+ */
 div.rune_panel{
-	width: 8em;
-	height: 8em;
-	border: 0.2em solid #000000;
-	border-radius: 1em;
-	position: relative;
+    width: 8em;
+    height: 8em;
+    border: 0.2em solid #000000;
+    border-radius: 1em;
+    position: relative;
 }
 div.rune_panel.rune_quality_0{ /* Normal */
-	background-image: repeating-radial-gradient(#ffffff, #cccccc 30%, #ffffff 60%);
+    background-image: repeating-radial-gradient(#ffffff, #cccccc 30%, #ffffff 60%);
 }
 div.rune_panel.rune_quality_1{ /* Magic */
-	background-image: repeating-radial-gradient(#aaffaa, #88cc88 30%, #aaffaa 60%);
+    background-image: repeating-radial-gradient(#aaffaa, #88cc88 30%, #aaffaa 60%);
 }
 div.rune_panel.rune_quality_2{ /* Rare */
-	background-image: repeating-radial-gradient(#aaaaff, #8888cc 30%, #aaaaff 60%);
+    background-image: repeating-radial-gradient(#aaaaff, #8888cc 30%, #aaaaff 60%);
 }
 div.rune_panel.rune_quality_3{ /* Hero */
-	background-image: repeating-radial-gradient(#ffaacc, #cc88aa 30%, #ffaacc 60%);
+    background-image: repeating-radial-gradient(#ffaacc, #cc88aa 30%, #ffaacc 60%);
 }
 div.rune_panel.rune_quality_4{ /* Legend */
-	background-image: repeating-radial-gradient(#f48200, #b76201 30%, #f48200 60%);
+    background-image: repeating-radial-gradient(#f48200, #b76201 30%, #f48200 60%);
 }
 div.rune_panel img.rune_base{
     position: absolute;
     width: 9em;
     height: 9em;
     margin: -0.5em;
-/*     z-index: 1; */
     top: 0;
     left: 0;
 }
@@ -678,179 +495,78 @@ div.rune_panel.rune_slot_6 img.rune_base{
 div.rune_panel img.rune_icon{
     position: absolute;
     height: 3em;
-/*     z-index: 2; */
-    /*top: 3.8em;
-    left: 3.5em;*/
 }
 div.rune_panel.rune_slot_1 img.rune_icon{
-	top: 3.4em;
-	left: 3.1em;
+    top: 3.4em;
+    left: 3.1em;
 }
 div.rune_panel.rune_slot_2 img.rune_icon{
-	top: 2.9em;
-	left: 2.5em;
+    top: 2.9em;
+    left: 2.5em;
 }
 div.rune_panel.rune_slot_3 img.rune_icon{
-	top: 2.2em;
-	left: 2.5em;
+    top: 2.2em;
+    left: 2.5em;
 }
 div.rune_panel.rune_slot_4 img.rune_icon{
-	top: 2em;
-	left: 3.1em;
+    top: 2em;
+    left: 3.1em;
 }
 div.rune_panel.rune_slot_5 img.rune_icon{
-	top: 2.2em;
-	left: 3.5em;
+    top: 2.2em;
+    left: 3.5em;
 }
 div.rune_panel.rune_slot_6 img.rune_icon{
-	top: 2.9em;
-	left: 3.5em;
+    top: 2.9em;
+    left: 3.5em;
 }
 div.rune_panel.rune_original_quality_0 img.rune_icon{
-	filter: sepia(100%) saturate(500%) grayscale(100%);
+    filter: sepia(100%) saturate(500%) grayscale(100%);
 }
 div.rune_panel.rune_original_quality_1 img.rune_icon{
-	filter: sepia(100%) saturate(500%) hue-rotate(60deg);
+    filter: sepia(100%) saturate(500%) hue-rotate(60deg);
 }
 div.rune_panel.rune_original_quality_2 img.rune_icon{
-	filter: sepia(100%) saturate(500%) hue-rotate(120deg);
+    filter: sepia(100%) saturate(500%) hue-rotate(120deg);
 }
 div.rune_panel.rune_original_quality_3 img.rune_icon{
-	filter: sepia(100%) saturate(500%) hue-rotate(230deg);
+    filter: sepia(100%) saturate(500%) hue-rotate(230deg);
 }
 div.rune_panel.rune_original_quality_4 img.rune_icon{
-	filter: sepia(100%) saturate(500%) hue-rotate(330deg);
+    filter: sepia(100%) saturate(500%) hue-rotate(330deg);
 }
 div.rune_panel span.rune_stars{
-	position: absolute;
-	width: 9em;
-	left: 0.9em;
-	top: 0.2em;
-	text-align: left;
+    position: absolute;
+    width: 9em;
+    left: 0.9em;
+    top: 0.2em;
+    text-align: left;
 }
 div.rune_panel span.rune_stars img.star{
-/* 	z-index: 4; */
-	width: 1.2em;
-	height: 1.2em;
-	margin-left: -0.4em;
+/*     z-index: 4; */
+    width: 1.2em;
+    height: 1.2em;
+    margin-left: -0.4em;
     filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
 }
 div.rune_panel.rune_level_15 span.rune_stars img.star{
-	filter: sepia(100%) saturate(300%) hue-rotate(320deg) saturate(400%) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+    filter: sepia(100%) saturate(300%) hue-rotate(320deg) saturate(400%) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
 }
 div.rune_panel span.rune_level{
-	font-size: 130%;
-	font-weight: bold;
-	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;
-	position: relative;
-	top: 4.7em;
-	left: 1.5em;
+    font-size: 130%;
+    font-weight: bold;
+    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;
+    position: relative;
+    top: 4.7em;
+    left: 1.5em;
 }
 div.rune_panel span.rune_level::before {
   content: "+";
 }
 div.rune_panel.rune_level_15 span.rune_level{
-	color: #ff6f2d;
-}
-
-
-
-
-
-
-
-div.rune_box{
-	width: 10em;
-	height: 10em;
-	position:relative;
-	border-radius: 1em;
-	border: 0.2em solid #000000;
-}
-div.rune_box.rune_box_Normal{
-    background-image: repeating-radial-gradient(#ffffff, #cccccc 30%, #ffffff 60%);
-}
-div.rune_box.rune_box_Magic{
-    background-image: repeating-radial-gradient(#aaffaa, #88cc88 30%, #aaffaa 60%);
-}
-div.rune_box.rune_box_Rare{
-    background-image: repeating-radial-gradient(#aaaaff, #8888cc 30%, #aaaaff 60%);
-}
-div.rune_box.rune_box_Hero{
-    background-image: repeating-radial-gradient(#ffaacc, #cc88aa 30%, #ffaacc 60%);
-}
-div.rune_box.rune_box_Legendary{
-    background-image: repeating-radial-gradient(#f48200, #b76201 30%, #f48200 60%);
-}
-div.rune_box img.rune_base{
-    position: absolute;
-    width: 10em;
-    height: 10em;
-/*     z-index: 1; */
-    top: 0;
-    left: 0;
-}
-div.rune_box img.rune_base.rune_base_1{
-    transform: rotate(0deg);
-}
-div.rune_box img.rune_base.rune_base_2{
-    transform: rotate(60deg);
-}
-div.rune_box img.rune_base.rune_base_3{
-    transform: rotate(120deg);
-}
-div.rune_box img.rune_base.rune_base_4{
-    transform: rotate(180deg);
-}
-div.rune_box img.rune_base.rune_base_5{
-    transform: rotate(240deg);
-}
-div.rune_box img.rune_base.rune_base_6{
-    transform: rotate(300deg);
-}
-div.rune_box img.rune_icon{
-    position: absolute;
-    width: 3em;
-    height: 3em;
-/*     z-index: 2; */
-    top: 3.8em;
-    left: 3.5em;
-}
-div.rune_box img.rune_icon.rune_icon_Normal{
-    filter: sepia(100%) saturate(500%) grayscale(100%);;
-}
-div.rune_box img.rune_icon.rune_icon_Magic{
-    filter: sepia(100%) saturate(500%) hue-rotate(60deg);
-}
-div.rune_box img.rune_icon.rune_icon_Rare{
-    filter: sepia(100%) saturate(500%) hue-rotate(120deg);
-}
-div.rune_box img.rune_icon.rune_icon_Hero{
-    filter: sepia(100%) saturate(500%) hue-rotate(250deg);
-}
-div.rune_box img.rune_icon.rune_icon_Legendary{
-    filter: sepia(100%) saturate(500%) hue-rotate(330deg);
-}
-div.rune_box span.rune_level{
-	position: absolute;
-	font-size: 110%;
-	bottom: 0.2em;
-	left: 0.2em;
-	color: #ffffff;
-	font-weight: bold;
-	text-shadow: 0 0 0.1em #000000;
-}
-div.rune_box span.rune_stars{
-	position: absolute;
-	width: 9em;
-	left: 0.5em;
-	top: 0.2em;
-	text-align: right;
-}
-div.rune_box span.rune_stars img.rune_star{
-/* 	z-index: 4; */
-	width: 1.5em;
-	height: 1.5em;
-	margin-left: -0.6em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+    color: #ff6f2d;
 }
+/**
+ * /Rune boxes
+ */