Major visual overhaul.

application/config.php

@@ -8,12 +8,23 @@
 
     $path = [
         "img" => [
-            "content" => $root . "img/content/",
-            "layout" => $root . "img/layout/",
-            "monster" => $root . "img/content/monster/",
-            "skill" => $root . "img/content/skill/",
-            "essence" => $root . "img/layout/essence/",
-            "rune" => $root . "img/layout/rune/",
+            "root" => $root . "img/",
+            "icon" => $root . "img/icon/",
+            "logo" => $root . "img/logo/",
+            "currency" => $root . "img/currency/",
+            "unit" => $root . "img/unit/",
+            "area" => $root . "img/area/",
+            "skill" => $root . "img/skill/",
+            "essence" => $root . "img/essence/",
+            "rune" => $root . "img/rune/",
+            "element" => $root . "img/element/",
+            "skill_guild" => $root . "img/skill_guild/",
+            "decoration" => $root . "img/decoration/",
+            "source" => $root . "img/source/",
+            "skill_leader" => $root . "img/skill_leader/",
+            "inventory" => $root . "img/inventory/",
+            "effect" => $root . "img/effect/",
+            "building" => $root . "img/building/",
         ],
         "fonts" => $root . "fonts/",
         "css" => $root . "css/",
@@ -30,3 +41,4 @@
     ];
 
 ?>
+

application/entity/Inventory.php

@@ -100,11 +100,11 @@
         public function get_image(){
             global $base_dir;
             global $path;
-            if (file_exists($base_dir . "img/content/inventory/" . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["content"] . "inventory/" . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png";
+            if (file_exists($base_dir . "img/inventory/" . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["inventory"] . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
     }

application/entity/K_Area.php

@@ -63,7 +63,7 @@
 
         /**
          * Gets the path to the area image. The image must be in the
-         * img/content/area/ directory, and its name must be the monster id,
+         * img/area/ directory, and its name must be the monster id,
          * padded with '0' to 9 digites, and the extension must be '.png'.
          *
          * @return path to the image, or a path to a fixed unknown image if it
@@ -74,9 +74,9 @@
             global $path;
             global $AREA_TYPE;
             global $DUNGEON;
-            if ($this->id > 10000 && file_exists($base_dir . "img/content/area/HOH.png")){
+            if ($this->id > 10000 && file_exists($base_dir . "img/area/HOH.png")){
                 // Hall of Heroes
-                return $path["img"]["content"] . "area/HOH.png";
+                return $path["img"]["area"] . "HOH.png";
             }
             elseif (
               (
@@ -91,9 +91,9 @@
                 $this->type == $AREA_TYPE["TRIAL_OF_ASCENSION"] ||
                 $this->type == $AREA_TYPE["WORLD_BOSS"] ||
                 $this->type == $AREA_TYPE["DIMENSIONAL_RIFT"]
-              ) && file_exists($base_dir . "img/content/area/" . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png")
+              ) && file_exists($base_dir . "img/area/" . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png")
             ){
-                return $path["img"]["content"] . "area/" . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png";
+                return $path["img"]["area"] . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png";
             }
             elseif ($this->type == $AREA_TYPE["CAIROS_DUNGEON"] && in_array($this->id, $DUNGEON)){
                 switch ($this->id){
@@ -102,37 +102,37 @@
                             case 1:
                             case 6:
                                 // Light
-                                if (file_exists($base_dir . "img/content/unit/00060204.png")){
-                                    return $path["img"]["content"] . "unit/00060204.png";
+                                if (file_exists($base_dir . "img/unit/00060204.png")){
+                                    return $path["img"]["unit"] . "00060204.png";
                                 }
                                 break;
                                 break;
                             case 2:
                             case 7:
                                 // Dark
-                                if (file_exists($base_dir . "img/content/unit/00060204.png")){
-                                    return $path["img"]["content"] . "unit/00060204.png";
+                                if (file_exists($base_dir . "img/unit/00060204.png")){
+                                    return $path["img"]["unit"] . "00060204.png";
                                 }
                                 break;
                             case 3:
                             case 8:
                                 // Wind
-                                if (file_exists($base_dir . "img/content/unit/00060203.png")){
-                                    return $path["img"]["content"] . "unit/00060203.png";
+                                if (file_exists($base_dir . "img/unit/00060203.png")){
+                                    return $path["img"]["unit"] . "00060203.png";
                                 }
                                 break;
                             case 4:
                             case 9:
                                 // Fire
-                                if (file_exists($base_dir . "img/content/unit/00060202.png")){
-                                    return $path["img"]["content"] . "unit/00060202.png";
+                                if (file_exists($base_dir . "img/unit/00060202.png")){
+                                    return $path["img"]["unit"] . "00060202.png";
                                 }
                                 break;
                             case 5:
                             case 10:
                                 // Water
-                                if (file_exists($base_dir . "img/content/unit/00060201.png")){
-                                    return $path["img"]["content"] . "unit/00060201.png";
+                                if (file_exists($base_dir . "img/unit/00060201.png")){
+                                    return $path["img"]["unit"] . "00060201.png";
                                 }
                                 break;
                         }
@@ -142,37 +142,37 @@
                             case 1:
                             case 6:
                                 // Wind
-                                if (file_exists($base_dir . "img/content/unit/00060303.png")){
-                                    return $path["img"]["content"] . "unit/00060303.png";
+                                if (file_exists($base_dir . "img/unit/00060303.png")){
+                                    return $path["img"]["unit"] . "00060303.png";
                                 }
                                 break;
                                 break;
                             case 2:
                             case 7:
                                 // Light
-                                if (file_exists($base_dir . "img/content/unit/00060304.png")){
-                                    return $path["img"]["content"] . "unit/00060304.png";
+                                if (file_exists($base_dir . "img/unit/00060304.png")){
+                                    return $path["img"]["unit"] . "00060304.png";
                                 }
                                 break;
                             case 3:
                             case 8:
                                 // Water
-                                if (file_exists($base_dir . "img/content/unit/00060301.png")){
-                                    return $path["img"]["content"] . "unit/00060301.png";
+                                if (file_exists($base_dir . "img/unit/00060301.png")){
+                                    return $path["img"]["unit"] . "00060301.png";
                                 }
                                 break;
                             case 4:
                             case 9:
                                 // Dark
-                                if (file_exists($base_dir . "img/content/unit/00060305.png")){
-                                    return $path["img"]["content"] . "unit/00060305.png";
+                                if (file_exists($base_dir . "img/unit/00060305.png")){
+                                    return $path["img"]["unit"] . "00060305.png";
                                 }
                                 break;
                             case 5:
                             case 10:
                                 // Fire
-                                if (file_exists($base_dir . "img/content/unit/00060302.png")){
-                                    return $path["img"]["content"] . "unit/00060302.png";
+                                if (file_exists($base_dir . "img/unit/00060302.png")){
+                                    return $path["img"]["unit"] . "00060302.png";
                                 }
                                 break;
                         }
@@ -182,78 +182,78 @@
                             case 1:
                             case 6:
                                 // Water
-                                if (file_exists($base_dir . "img/content/unit/000621301.png")){
-                                    return $path["img"]["content"] . "unit/000621301.png";
+                                if (file_exists($base_dir . "img/unit/000621301.png")){
+                                    return $path["img"]["unit"] . "000621301.png";
                                 }
                                 break;
                                 break;
                             case 2:
                             case 7:
                                 // Fire
-                                if (file_exists($base_dir . "img/content/unit/000621302.png")){
-                                    return $path["img"]["content"] . "unit/000621302.png";
+                                if (file_exists($base_dir . "img/unit/000621302.png")){
+                                    return $path["img"]["unit"] . "000621302.png";
                                 }
                                 break;
                             case 3:
                             case 8:
                                 // Wind
-                                if (file_exists($base_dir . "img/content/unit/000621303.png")){
-                                    return $path["img"]["content"] . "unit/000621303.png";
+                                if (file_exists($base_dir . "img/unit/000621303.png")){
+                                    return $path["img"]["unit"] . "000621303.png";
                                 }
                                 break;
                             case 4:
                             case 9:
                                 // Light
-                                if (file_exists($base_dir . "img/content/unit/000621304.png")){
-                                    return $path["img"]["content"] . "unit/000621304.png";
+                                if (file_exists($base_dir . "img/unit/000621304.png")){
+                                    return $path["img"]["unit"] . "000621304.png";
                                 }
                                 break;
                             case 5:
                             case 10:
                                 // Dark
-                                if (file_exists($base_dir . "img/content/unit/000621305.png")){
-                                    return $path["img"]["content"] . "unit/000621305.png";
+                                if (file_exists($base_dir . "img/unit/000621305.png")){
+                                    return $path["img"]["unit"] . "000621305.png";
                                 }
                                 break;
                         }
                         break;
                     case $DUNGEON["HALL_OF_WATER"]:
-                        if (file_exists($base_dir . "img/content/unit/00060101.png")){
-                            return $path["img"]["content"] . "unit/00060101.png";
+                        if (file_exists($base_dir . "img/unit/00060101.png")){
+                            return $path["img"]["unit"] . "00060101.png";
                         }
                         break;
                     case $DUNGEON["HALL_OF_FIRE"]:
-                        if (file_exists($base_dir . "img/content/unit/00060102.png")){
-                            return $path["img"]["content"] . "unit/00060102.png";
+                        if (file_exists($base_dir . "img/unit/00060102.png")){
+                            return $path["img"]["unit"] . "00060102.png";
                         }
                         break;
                     case $DUNGEON["HALL_OF_WIND"]:
-                        if (file_exists($base_dir . "img/content/unit/00060103.png")){
-                            return $path["img"]["content"] . "unit/00060103.png";
+                        if (file_exists($base_dir . "img/unit/00060103.png")){
+                            return $path["img"]["unit"] . "00060103.png";
                         }
                         break;
                     case $DUNGEON["HALL_OF_LIGHT"]:
-                        if (file_exists($base_dir . "img/content/unit/00060104.png")){
-                            return $path["img"]["content"] . "unit/00060104.png";
+                        if (file_exists($base_dir . "img/unit/00060104.png")){
+                            return $path["img"]["unit"] . "00060104.png";
                         }
                         break;
                     case $DUNGEON["HALL_OF_DARK"]:
-                        if (file_exists($base_dir . "img/content/unit/00060105.png")){
-                            return $path["img"]["content"] . "unit/00060105.png";
+                        if (file_exists($base_dir . "img/unit/00060105.png")){
+                            return $path["img"]["unit"] . "00060105.png";
                         }
                         break;
                     case $DUNGEON["HALL_OF_MAGIC"]:
-                        if (file_exists($base_dir . "img/content/unit/00062004.png")){
-                            return $path["img"]["content"] . "unit/00062004.png";
+                        if (file_exists($base_dir . "img/unit/00062004.png")){
+                            return $path["img"]["unit"] . "00062004.png";
                         }
                         break;
                     default:
-                        if (file_exists($base_dir . "img/content/area/" . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png")){
-                            return $path["img"]["content"] . "area/" . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png";
+                        if (file_exists($base_dir . "img/area/" . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png")){
+                            return $path["img"]["area"] . str_pad($this->id, 9, '0', STR_PAD_LEFT) . ".png";
                         }
                 }
             }
-            return $path["img"]["layout"] . "unknown.png";
+            return $path["img"]["root"] . "unknown.png";
         }
 
     }

application/entity/K_Building.php

@@ -55,7 +55,7 @@
 
         /**
          * Gets the path to the building image. The image must be in the
-         * img/content/building/ directory, and its name must be the monster id,
+         * img/building/ directory, and its name must be the monster id,
          * padded with '0' to 4 digites, and the extension must be '.png'.
          *
          * @return path to the image, or a path to a fixed unknown image if it
@@ -64,11 +64,11 @@
         public function get_image(){
             global $base_dir;
             global $path;
-            if (file_exists($base_dir . "img/content/building/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["content"] . "building/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
+            if (file_exists($base_dir . "img/building/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["building"] . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
 

application/entity/K_Decoration.php

@@ -116,11 +116,11 @@
         public function get_image(){
             global $base_dir;
             global $path;
-            if (file_exists($base_dir . "img/content/decoration/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["content"] . "decoration/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
+            if (file_exists($base_dir . "img/decoration/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["decoration"] . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
 

application/entity/K_Effect.php

@@ -59,14 +59,22 @@
             }
         }
 
+        /**
+         * Gets the pathto the monster image. The image must be in the
+         * img/effect/ directory, and its name must be the effect id,
+         * padded with '0' to 4 digits, and the extension must be '.png'.
+         *
+         * @return path to the image, or a path to a fixed unknown image if it
+         *         doesn't exist.
+         */
         public function get_image(){
             global $base_dir;
             global $path;
-            if (file_exists($base_dir . "img/content/effect/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["content"] . "effect/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
+            if (file_exists($base_dir . "img/effect/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["effect"] . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
     }

application/entity/K_Guild_Skill_Group.php

@@ -68,7 +68,7 @@
 
         /**
          * Gets the pathto the monster image. The image must be in the
-         * img/content/monster/ directory, and its name must be the monster id,
+         * img/skill_guild/ directory, and its name must be the monster id,
          * padded with '0' to 1 digits, and the extension must be '.png'.
          *
          * @return path to the image, or a path to a fixed unknown image if it
@@ -77,11 +77,11 @@
         public function get_image(){
             global $base_dir;
             global $path;
-            if (file_exists($base_dir . "img/content/skill_guild/" . str_pad($this->id, 1, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["content"] . "skill_guild/" . str_pad($this->id, 1, '0', STR_PAD_LEFT) . ".png";
+            if (file_exists($base_dir . "img/skill_guild/" . str_pad($this->id, 1, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["skill_guild"] . str_pad($this->id, 1, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
 

application/entity/K_Leader_Skill.php

@@ -30,7 +30,7 @@
         public $area;
 
         /**
-         * Affected elements.
+         * Affected element.
          */
         public $element;
 
@@ -63,37 +63,95 @@
             $this->area = $r["area"];
             $this->element = $r["element"]; 
         }
-        
+
+        /**
+         * Gets the path to the skill image. The image must be in the
+         * img/skill_leader/ directory, and its name must be the skill id,
+         * padded with '0' to 4 digites, and the extension must be '.png'.
+         *
+         * @return Path to the image, or a path to a fixed unknown image if it
+         *         doesn't exist.
+         */
         public function get_image(){
             global $base_dir;
             global $path;
             if (file_exists($base_dir . "img/content/skill_leader/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["content"] . "skill_leader/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
+                return $path["img"]["skill_leader"] . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
-        
+
+        /**
+         * Composes a human readable description of the skill.
+         *
+         * @return The description.
+         */
         public function create_description(){
-            $s = "Increases the " . $this->attribute . " of ally monsters ";
-            if (strlen($this->element) > 0){
-                $s = $s . " with " . $this->element . " attribute ";
+            global $STAT;
+            global $ELEMENT;
+            global $EFFECT_AREA;
+            $s = "Increases the ";
+            switch ($this->attribute){
+                case $STAT["ATK"]:
+                    $s .= "attack power";
+                    break;
+                case $STAT["DEF"]:
+                    $s .= "defense";
+                    break;
+                case $STAT["HP"]:
+                    $s .= "HP";
+                    break;
+                case $STAT["SPD"]:
+                    $s .= "attack speed";
+                    break;
+                case $STAT["CRIT_RATE"]:
+                    $s .= "critical rate";
+                    break;
+                case $STAT["CRIT_DMG"]:
+                    $s .= "critical damage";
+                    break;
+                case $STAT["ACC"]:
+                    $s .= "accuracy";
+                    break;
+                case $STAT["RES"]:
+                    $s .= "resistance";
+                    break;
             }
-            $s = $s . " by " . $this->amount . "%";
+            $s .= " of ally monsters ";
+            switch ($this->element){
+                case $ELEMENT["WATER"]:
+                    $s .= " with Water attribute ";
+                    break;
+                case $ELEMENT["FIRE"]:
+                    $s .= " with Fire attribute ";
+                    break;
+                case $ELEMENT["WIND"]:
+                    $s .= " with Wind attribute ";
+                    break;
+                case $ELEMENT["LIGHT"]:
+                    $s .= " with Light attribute ";
+                    break;
+                case $ELEMENT["DARK"]:
+                    $s .= " with Dark attribute ";
+                    break;
+            }
+            $s = $s . "by " . $this->amount . "%";
             switch ($this->area){
-                case "Dungeon":
+                case $EFFECT_AREA["DUNGEON"]:
                     $s = $s . " in the Dungeons";
                     break;
-                case "Arena":
+                case $EFFECT_AREA["ARENA"]:
                     $s = $s . " in the Arena";
                     break;
-                case "Guild":
+                case $EFFECT_AREA["GUILD"]:
                     $s = $s . " in Guild content";
                     break;
             }
             $s = $s . ".";
             return $s;
         }
+
     }
 ?>

application/entity/K_Rune_Set.php

@@ -59,14 +59,22 @@
             }
         }
 
+        /**
+         * Gets the path to the set image. The image must be in the
+         * img/rune/ directory, and its name must be the set id,
+         * padded with '0' to 2 digits, and the extension must be '.png'.
+         *
+         * @return Path to the image, or a path to a fixed unknown image if it
+         *         doesn't exist.
+         */
         public function get_image(){
             global $base_dir;
             global $path;
-            if (file_exists($base_dir . "img/layout/rune/" . str_pad($this->id, 2, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["layout"] . "rune/" . str_pad($this->id, 2, '0', STR_PAD_LEFT) . ".png";
+            if (file_exists($base_dir . "img/rune/" . str_pad($this->id, 2, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["rune"] . str_pad($this->id, 2, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
     }

application/entity/K_Skill.php

@@ -135,15 +135,23 @@
                 array_push($this->effect, new K_Effect($this->db, $r["effect"]));
             }
         }
-        
+
+        /**
+         * Gets the path to the skill image. The image must be in the
+         * img/skill/ directory, and its name must be the set id,
+         * padded with '0' to 8 digits, and the extension must be '.png'.
+         *
+         * @return Path to the image, or a path to a fixed unknown image if it
+         *         doesn't exist.
+         */
         public function get_image(){
             global $base_dir;
             global $path;
-            if (file_exists($base_dir . "img/content/skill/" . str_pad($this->id, 8, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["content"] . "skill/" . str_pad($this->id, 8, '0', STR_PAD_LEFT) . ".png";
+            if (file_exists($base_dir . "img/skill/" . str_pad($this->id, 8, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["skill"] . str_pad($this->id, 8, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
     }

application/entity/K_Source.php

@@ -61,21 +61,21 @@
         }
 
         /**
-         * Gets the pathto the monster image. The image must be in the
-         * img/content/monster/ directory, and its name must be the monster id,
-         * padded with '0' to 4 digites, and the extension must be '.png'.
+         * Gets the path to the source image. The image must be in the
+         * img/source/ directory, and it's name must be the source id,
+         * padded with '0' to 4 digits, and the extension must be '.png'.
          *
-         * @return path to the image, or a path to a fixed unknown image if it
+         * @return Path to the image, or a path to a fixed unknown image if it
          *         doesn't exist.
          */
         public function get_image(){
             global $base_dir;
             global $path;
-            if (file_exists($base_dir . "img/content/source/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["content"] . "source/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
+            if (file_exists($base_dir . "img/source/" . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["source"] . str_pad($this->id, 4, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
 

application/entity/K_Unit.php

@@ -331,16 +331,16 @@
                 $this->load_skills();
                 $this->load_sources();
             }
-            if (strlen($this->awakens_from) > 0 && $this->awakens_to == ""){
-                // No to, no from, silver monster.
+            // No to, no from. Silver monster.
+            if ($this->awakens_from == "" && $this->awakens_to == ""){
                 $this->title = $this->element_name . " " . $this->name;
             }
-            elseif (strlen($this->awakens_from) > 0 && $this->awakens_to == ""){
-                // Already awakened
+            // Awakened
+            elseif ($this->awakens_from != ""){
                 $this->title = $this->name;
             }
+            // Gold
             elseif (strlen($this->awakens_to) > 0){
-                // Awakeable.
                 $this->title = $this->element_name . " " . $this->name;
             }
         }
@@ -419,21 +419,21 @@
         }
 
         /**
-         * Gets the pathto the monster image. The image must be in the
-         * img/content/monster/ directory, and its name must be the monster id,
-         * padded with '0' to 4 digites, and the extension must be '.png'.
+         * Gets the path to the unit image. The image must be in the
+         * img/unit/ directory, and it's name must be the unit id,
+         * padded with '0' to 8 digits, and the extension must be '.png'.
          *
-         * @return path to the image, or a path to a fixed unknown image if it
+         * @return Path to the image, or a path to a fixed unknown image if it
          *         doesn't exist.
          */
         public function get_image(){
             global $dir;
             global $path;
-            if (file_exists($dir . "img/content/unit/" . str_pad($this->id, 8, '0', STR_PAD_LEFT) . ".png")){
-                return $path["img"]["content"] . "unit/" . str_pad($this->id, 8, '0', STR_PAD_LEFT) . ".png";
+            if (file_exists($dir . "img/unit/" . str_pad($this->id, 8, '0', STR_PAD_LEFT) . ".png")){
+                return $path["img"]["unit"] . str_pad($this->id, 8, '0', STR_PAD_LEFT) . ".png";
             }
             else{
-                return $path["img"]["layout"] . "unknown.png";
+                return $path["img"]["root"] . "unknown.png";
             }
         }
 

application/entity/Rune.php

@@ -287,7 +287,7 @@
                 $this->refresh_names();
             }
         }
-        
+
         /**
          * Decodes some properties and assigns name variables.
          */

application/helper/html.php

@@ -43,7 +43,7 @@
         }
         $html .= "<span class='stars'>\n";
         for ($i = 0; $i < $stars; $i ++){
-            $html .= "<img class='star $star_class' src='" . $path["img"]["layout"] . "icon/star.png'/>\n";
+            $html .= "<img class='star $star_class' src='" . $path["img"]["icon"] . "star.png'/>\n";
         }
         $html .= "</span>\n";
         $html .= "<img title='" . $unit->title . "' class='monster border_" . $k->element_name . "' src='" . $k->get_image() . "'/>\n";
@@ -69,11 +69,11 @@
         }
         $html = "";
         $html .= "<div class='rune_panel rune_slot_" . $rune->slot . " rune_level_" . $rune->level . " rune_quality_" . strtolower($rune->quality_name) . " rune_original_quality_" . strtolower($rune->original_quality_name) . " rune_ancient_" . $rune->ancient . "'>\n";
-        $html .= "<img class='rune_base' src='" . $path["img"]["layout"] . "rune/base.png'/>\n";
+        $html .= "<img class='rune_base' src='" . $path["img"]["rune"] . "base.png'/>\n";
         $html .= "<img class='rune_icon' src='" . $rune->type->get_image() . "'/>\n";
         $html .= "<span class='rune_stars'>\n";
         for ($i = 0; $i < $rune->stars; $i ++){
-            $html .= "<img class='star' src='" . $path["img"]["layout"] . "icon/star.png'/>\n";
+            $html .= "<img class='star' src='" . $path["img"]["icon"] . "star.png'/>\n";
         }
         $html .= "</span>\n";
         $html .= "<span class='rune_level'>\n";
@@ -183,7 +183,7 @@
             $html .= $grind . "\n";
             $html .= "</span>\n";
             if ($substats_enchant[$i] == 1){
-                $html .= "<img title='Enchanted' src='" . $path["img"]["layout"] . "rune/enchanted.png'/>\n";
+                $html .= "<img title='Enchanted' src='" . $path["img"]["rune"] . "enchanted.png'/>\n";
             }
             $html .= "</td>\n";
             $html .= "</tr>\n";
@@ -266,18 +266,18 @@
         $html = "";
         if ($craft->gem == 1){
             if ($craft->inmemorial == 1){
-                $base = $path["img"]["layout"] . "grind/gem_inmemorial.png";
+                $base = $path["img"]["grind"] . "gem_inmemorial.png";
             }
             else{
-                $base = $path["img"]["layout"] . "grind/gem.png";
+                $base = $path["img"]["grind"] . "gem.png";
             }
         }
         else{
             if ($craft->inmemorial == 1){
-                $base = $path["img"]["layout"] . "grind/grind_inmemorial.png";
+                $base = $path["img"]["grind"] . "grind_inmemorial.png";
             }
             else{
-                $base = $path["img"]["layout"] . "grind/grind.png";
+                $base = $path["img"]["grind"] . "grind.png";
             }
         }
         if ($craft->inmemorial == 0 && isset($craft->rune)){

application/page/Report_Runecraft_Page.php

@@ -46,6 +46,7 @@
             $this->view = $path["view"] . "report_runecraft.php";
             $this->parse_filters();
             $s = $this->build_query();
+error_log($s);
             $q = $this->db->query($s);
             $prev_monster = "";
             $prev_rune = "";
@@ -101,8 +102,6 @@
             global $FILTER_RUNECRAFT;
             global $FILTER_SKILLUP;
             $this->filters = $FILTER_RUNECRAFT;
-            var_dump($FILTER_SKILLUP);
-            var_dump($this->filters);
             // Monster
             if (isset($_GET["monster_min_stars"]) && intval($_GET["monster_min_stars"]) > 0 && intval($_GET["monster_min_stars"]) < 7){
                 $this->filters["monster_min_stars"] = $_GET["monster_min_stars"];
@@ -132,16 +131,16 @@
             if (isset($_GET["rune_max_level"]) && intval($_GET["max_level"]) >= 0 && intval($_GET["rune_max_level"]) <= 15){
                 $this->filters["rune_max_level"] = $_GET["rune_max_level"];
             }
-            if (isset($_GET["rune_min_quality"]) && intval($_GET["rune_min_quality"]) >= 0 && intval($_GET["rune_min_quality"]) < 5){
+            if (isset($_GET["rune_min_quality"]) && intval($_GET["rune_min_quality"]) >= $QUALITY["NORMAL"] && intval($_GET["rune_min_quality"]) <= $QUALITY["LEGEND"]){
                 $this->filters["rune_min_quality"] = $_GET["rune_min_quality"];
             }
-            if (isset($_GET["rune_max_quality"]) && intval($_GET["rune_max_quality"]) >= 0 && intval($_GET["rune_max_quality"]) < 5){
+            if (isset($_GET["rune_max_quality"]) && intval($_GET["rune_max_quality"]) >= $QUALITY["NORMAL"] && intval($_GET["rune_max_quality"]) <= $QUALITY["LEGEND"]){
                 $this->filters["rune_max_quality"] = $_GET["rune_max_quality"];
             }
-            if (isset($_GET["rune_min_original_quality"]) && intval($_GET["rune_min_original_quality"]) >= 0 && intval($_GET["rune_min_original_quality"]) < 5){
+            if (isset($_GET["rune_min_original_quality"]) && intval($_GET["rune_min_original_quality"]) >= $QUALITY["NORMAL"] && intval($_GET["rune_min_original_quality"]) <= $QUALITY["LEGEND"]){
                 $this->filters["rune_min_original_quality"] = $_GET["rune_min_original_quality"];
             }
-            if (isset($_GET["rune_max_original_quality"]) && intval($_GET["rune_max_original_quality"]) >= 0 && intval($_GET["rune_max_original_quality"]) < 5){
+            if (isset($_GET["rune_max_original_quality"]) && intval($_GET["rune_max_original_quality"]) >= $QUALITY["NORMAL"] && intval($_GET["rune_max_original_quality"]) <= $QUALITY["LEGEND"]){
                 $this->filters["rune_max_original_quality"] = $_GET["rune_max_original_quality"];
             }
             if (isset($_GET["rune_min_efficiency"]) && intval($_GET["rune_min_efficiency"]) >= 0 && intval($_GET["rune_min_efficiency"]) <= 100){

application/view/fusion.php

@@ -80,11 +80,11 @@
                             <a target='_blank' title='<?=$fusion->product->name?>' href='/catalog/<?=$fusion->product->id?>'>
                                 <div class='monster_panel'>
                                     <span class='stars'>
-                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
+                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
+                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
+                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
+                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
                                     </span>
                                     <img title='<?=$fusion->product->name?>' class='monster border_<?=$fusion->product->element_name?>' src='<?=$fusion->product->get_image()?>'/>
                                     <span class='level'>
@@ -128,7 +128,7 @@
 <?php
                                                 for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                                    <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                    <img class='star <?=$star_class?>' src='<?=$path["img"]["icon"]?>star.png'/>
 <?php
                                                 }
 ?>
@@ -152,11 +152,11 @@
                                         <a target='_blank' title='<?=$sub_fusion->product_awaken->name?>' href='/catalog/<?=$sub_fusion->product_awaken->id?>'>
                                             <div class='awakened monster_panel'>
                                                 <span class='stars'>
-                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                    <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                    <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                 </span>
                                                 <img title='<?=$sub_fusion->product_awaken->name?>' class='monster border_<?=$sub_fusion->product_awaken->element_name?>' src='<?=$sub_fusion->product_awaken->get_image()?>'/>
                                                 <span class='level'>
@@ -170,7 +170,7 @@
 <?php
                                                     for ($i = 0; $i < $sub_fusion->product->base_stars; $i ++){
 ?>
-                                                        <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                        <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
 <?php
                                                     }
 ?>
@@ -186,7 +186,7 @@
                                             foreach ($sub_fusion->product->essences as $essence){
 ?>
                                                 <div class='essence border_<?=$essence["element"]?>'>
-                                                    <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["layout"]?>essence/<?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
+                                                    <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["essence"]?><?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
                                                     <span>
                                                         <?=$essence["amount"]?>
                                                     </span>
@@ -231,7 +231,7 @@
 <?php
                                                             for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                                                <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                <img class='star <?=$star_class?>' src='<?=$path["img"]["icon"]?>star.png'/>
 <?php
                                                             }
 ?>
@@ -256,10 +256,10 @@
                                                     <a target='_blank' title='<?=$sub_monster->name?>' href='/catalog/<?=$sub_monster->id?>'>
                                                         <div class='awakened monster_panel'>
                                                             <span class='stars'>
-                                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                                             </span>
                                                             <img title='<?=$sub_monster->name?>' class='monster border_<?=$sub_monster->element_name?>' src='<?=$sub_monster->get_image()?>'/>
                                                             <span class='level'>
@@ -272,7 +272,7 @@
                                                         foreach ($sub_fusion->ingredient_unawaken[$num]->essences as $essence){
 ?>
                                                             <div class='essence border_<?=$essence["element"]?>'>
-                                                                <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["layout"]?>essence/<?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
+                                                                <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["essence"]?><?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
                                                                 <span>
                                                                     <?=$essence["amount"]?>
                                                                 </span>
@@ -287,7 +287,7 @@
 <?php
                                                                 for ($i = 0; $i < $sub_fusion->ingredient_unawaken[$num]->base_stars; $i ++){
 ?>
-                                                                    <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                    <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
 <?php
                                                                 }
 ?>
@@ -334,7 +334,7 @@
 <?php
                                                                         for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                                                            <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                                            <img class='star <?=$star_class?>' src='<?=$path["img"]["icon"]?>star.png'/>
 <?php
                                                                         }
 ?>
@@ -366,11 +366,11 @@
                                     <a target='_blank' title='<?=$fusion->ingredient[0]->name?>' href='/catalog/<?=$fusion->ingredient[0]->id?>'>
                                         <div class='awakened monster_panel'>
                                             <span class='stars'>
-                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
-                                                <img class='star star_purple' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
+                                                <img class='star star_purple' src='<?=$path["img"]["icon"]?>star.png'/>
                                             </span>
                                             <img title='<?=$fusion->ingredient[0]->name?>' class='monster border_<?=$fusion->ingredient[0]->element_name?>' src='<?=$fusion->ingredient[0]->get_image()?>'/>
                                             <span class='level'>
@@ -383,7 +383,7 @@
                                         foreach ($fusion->ingredient_unawaken[0]->essences as $essence){
 ?>
                                             <div class='essence border_<?=$essence["element"]?>'>
-                                                <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["layout"]?>essence/<?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
+                                                <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["essence"]?><?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
                                                 <span>
                                                     <?=$essence["amount"]?>
                                                 </span>
@@ -398,7 +398,7 @@
 <?php
                                                 for ($i = 0; $i < $fusion->ingredient[0]->base_stars; $i ++){
 ?>
-                                                    <img class='star star_gold' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                    <img class='star star_gold' src='<?=$path["img"]["icon"]?>star.png'/>
 <?php
                                                 }
 ?>
@@ -443,7 +443,7 @@
                                                     }
                                                     for ($i = 0; $i < $owned->stars; $i ++){
 ?>
-                                                    <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                    <img class='star <?=$star_class?>' src='<?=$path["img"]["icon"]?>star.png'/>
 <?php
                                                     }
 ?>

application/view/guild.php

@@ -134,12 +134,12 @@
 <?php
                                 if ($member->grade == $GUILD_MEMBER_GRADE["LEADER"]){
 ?>
-                                    <img alt='yes' src='<?=$path["img"]["layout"] . "icon/leader.png"?>'/>
+                                    <img alt='yes' src='<?=$path["img"]["icon"] . "leader.png"?>'/>
 <?php
                                 }
                                 elseif ($member->grade == $GUILD_MEMBER_GRADE["VICELEADER"]){
 ?>
-                                    <img alt='yes' src='<?=$path["img"]["layout"] . "icon/viceleader.png"?>'/>
+                                    <img alt='yes' src='<?=$path["img"]["icon"] . "viceleader.png"?>'/>
 <?php
                                 }
 ?>
@@ -156,59 +156,59 @@
                             <td class='score_icon <?=$odd?>'>
 <?php
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["BEGINER"] && ($ARENA_RANKING_RANK["BEGINER"] == null || $member->rating <= $ARENA_RANKING_RANK["BEGINER"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_beg.png";
+                                    $src = $path["img"]["icon"] . "rank_beg.png";
                                     $tit = "Beginer";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["CHALLENGER_1"] && ($ARENA_RANKING_RANK["CHALLENGER_1"] == null || $member->rating <= $ARENA_RANKING_RANK["CHALLENGER_1"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_cha1.png";
+                                    $src = $path["img"]["icon"] . "rank_cha1.png";
                                     $tit = "Challenger 1";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["CHALLENGER_2"] && ($ARENA_RANKING_RANK["CHALLENGER_2"] == null || $member->rating <= $ARENA_RANKING_RANK["CHALLENGER_2"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_cha2.png";
+                                    $src = $path["img"]["icon"] . "rank_cha2.png";
                                     $tit = "Challenger 2";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["CHALLENGER_3"] && ($ARENA_RANKING_RANK["CHALLENGER_3"] == null || $member->rating <= $ARENA_RANKING_RANK["CHALLENGER_3"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_cha3.png";
+                                    $src = $path["img"]["icon"] . "rank_cha3.png";
                                     $tit = "Challenger 3";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["FIGHTER_1"] && ($ARENA_RANKING_RANK["FIGHTER_1"] == null || $member->rating <= $ARENA_RANKING_RANK["FIGHTER_1"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_fig1.png";
+                                    $src = $path["img"]["icon"] . "rank_fig1.png";
                                     $tit = "Fighter 1";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["FIGHTER_2"] && ($ARENA_RANKING_RANK["FIGHTER_2"] == null || $member->rating <= $ARENA_RANKING_RANK["FIGHTER_2"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_fig2.png";
+                                    $src = $path["img"]["icon"] . "rank_fig2.png";
                                     $tit = "Fighter 2";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["FIGHTER_3"] && ($ARENA_RANKING_RANK["FIGHTER_3"] == null || $member->rating <= $ARENA_RANKING_RANK["FIGHTER_3"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_fig3.png";
+                                    $src = $path["img"]["icon"] . "rank_fig3.png";
                                     $tit = "Fighter 3";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["CONQUEROR_1"] && ($ARENA_RANKING_RANK["CONQUEROR_1"] == null || $member->rating <= $ARENA_RANKING_RANK["CONQUEROR_1"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_con1.png";
+                                    $src = $path["img"]["icon"] . "rank_con1.png";
                                     $tit = "Conqueror 1";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["CONQUEROR_2"] && ($ARENA_RANKING_RANK["CONQUEROR_2"] == null || $member->rating <= $ARENA_RANKING_RANK["CONQUEROR_2"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_con2.png";
+                                    $src = $path["img"]["icon"] . "rank_con2.png";
                                     $tit = "Conqueror 2";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["CONQUEROR_3"] && ($ARENA_RANKING_RANK["CONQUEROR_3"] == null || $member->rating <= $ARENA_RANKING_RANK["CONQUEROR_3"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_con3.png";
+                                    $src = $path["img"]["icon"] . "rank_con3.png";
                                     $tit = "Conqueror 3";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["GUARDIAN_1"] && ($ARENA_RANKING_RANK["GUARDIAN_1"] == null || $member->rating <= $ARENA_RANKING_RANK["GUARDIAN_1"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_gua1.png";
+                                    $src = $path["img"]["icon"] . "rank_gua1.png";
                                     $tit = "Guardian 1";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["GUARDIAN_2"] && ($ARENA_RANKING_RANK["GUARDIAN_2"] == null || $member->rating <= $ARENA_RANKING_RANK["GUARDIAN_2"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_gua2.png";
+                                    $src = $path["img"]["icon"] . "rank_gua2.png";
                                     $tit = "Guardian 2";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["GUARDIAN_3"] && ($ARENA_RANKING_RANK["GUARDIAN_3"] == null || $member->rating <= $ARENA_RANKING_RANK["GUARDIAN_3"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_gua3.png";
+                                    $src = $path["img"]["icon"] . "rank_gua3.png";
                                     $tit = "Guardian 3";
                                 }
                                 if ($member->arena_score >= $ARENA_RANKING_POINTS["LEGEND"] && ($ARENA_RANKING_RANK["LEGEND"] == null || $member->rating <= $ARENA_RANKING_RANK["LEGEND"])){
-                                    $src = $path["img"]["layout"] . "icon/rank_leg.png";
+                                    $src = $path["img"]["icon"] . "rank_leg.png";
                                     $tit = "Legend";
                                 }
 ?>
@@ -218,7 +218,7 @@
 <?php
                                 if ($member->in_war){
 ?>
-                                    <img alt='yes' src='<?=$path["img"]["layout"] . "icon/ok.png"?>'/>
+                                    <img alt='yes' src='<?=$path["img"]["icon"] . "ok.png"?>'/>
 <?php
                                 }
 ?>
@@ -227,7 +227,7 @@
 <?php
                                 if ($member->has_defense){
 ?>
-                                    <img alt='yes' src='<?=$path["img"]["layout"] . "icon/ok.png"?>'/>
+                                    <img alt='yes' src='<?=$path["img"]["icon"] . "ok.png"?>'/>
 <?php
                                 }
 ?>

application/view/home.php

@@ -1,3 +1,6 @@
+<?php
+    global $EFFECT_AREA;
+?>
 <!DOCTYPE html>
 <html lang='en'>
     <head>
@@ -43,235 +46,179 @@
                 <h3>
                     <?=$page->name?>
                 </h3>
-                <div id='info'>
-<?php
-                    if (isset($page->rep)){
-?>
-                        <div id='rep'>
-                            <h4>
-                                Rep. Monster:
-                            </h4>
-                            <div class='monster_panel'>
-                                <?=html_unit_panel($page->rep)?>
-                            </div> <!-- .monster_panel -->
-                        </div>
 <?php
-                    } // if (isset($page->rep))
+                if (isset($page->rep)){
 ?>
-                    <div id='defense'>
+                    <div id='rep' class='profile_section'>
                         <h4>
-                            Arena defense:
+                            Rep. Monster
                         </h4>
+                        <div class='monster_panel'>
+                            <?=html_unit_panel($page->rep)?>
+                        </div> <!-- .monster_panel -->
+                    </div>
+<?php
+                } // if (isset($page->rep))
+?>
+                <div id='defense' class='profile_section'>
+                    <h4>
+                        Arena defense
+                    </h4>
 <?php
-                        foreach ($page->defense as $defense){
+                    $first = true;
+                    foreach ($page->defense as $defense){
 ?>
-                            <div class='monster_panel'>
-                                <?=html_unit_panel($defense)?>
+                        <div class='monster_panel'>
+                            <?=html_unit_panel($defense)?>
+                        </div>
+<?php
+                        if ($first && isset($defense->unit->leader_skill) && ($defense->unit->leader_skill->area == $EFFECT_AREA["GENERAL"] || $defense->unit->leader_skill->area == $EFFECT_AREA["ARENA"])){
+?>
+                            <div class='skill'>
+                                <img class='skill_img' title='<?=$defense->unit->leader_skill->create_description()?>' src='<?=$defense->unit->leader_skill->get_image()?>'/>
                             </div>
 <?php
                         }
+                        $first = false;
+                    }
 ?>
-                    </div>
-                    <div id='building'>
-                        <h4>
-                            Buildings:
-                        </h4>
+                </div>
+                <div id='building' class='profile_section'>
+                    <h4>
+                        Buildings
+                    </h4>
 <?php
-                        foreach ($page->building as $building){
+                    foreach ($page->building as $building){
 ?>
-                            <?=html_building_panel($building)?>
+                        <?=html_building_panel($building)?>
 <?php
-                        }
+                    }
 ?>
-                    </div>
-                    <div id='decoration'>
-                        <h4>
-                            Decorations:
-                        </h4>
+                </div>
+                <div id='decoration' class='profile_section'>
+                    <h4>
+                        Decorations
+                    </h4>
 <?php
-                        foreach ($page->decoration as $decoration){
+                    foreach ($page->decoration as $decoration){
 ?>
-                            <?=html_building_panel($decoration)?>
+                        <?=html_building_panel($decoration)?>
 <?php
-                        }
+                    }
 ?>
-                    </div>
-                    <div class='inventory' id='inventory_scroll'>
-                        <h4>
-                            Scrolls:
-                        </h4>
+                </div>
+                <div class='inventory profile_section' id='inventory_scroll'>
+                    <h4>
+                        Scrolls
+                    </h4>
 <?php
-                        foreach ($page->inventory_scroll as $item){
+                    foreach ($page->inventory_scroll as $item){
 ?>
-                            <?=html_item_panel($item)?>
+                        <?=html_item_panel($item)?>
 <?php
-                        }
+                    }
 ?>
-                    </div>
-                    <div class='inventory' id='inventory_craft_rune'>
-                        <h4>
-                            Rune crafting items:
-                        </h4>
+                </div>
+                <div class='inventory profile_section' id='inventory_craft_rune'>
+                    <h4>
+                        Rune crafting items
+                    </h4>
 <?php
-                        foreach ($page->inventory_craft_rune as $item){
+                    foreach ($page->inventory_craft_rune as $item){
 ?>
-                            <?=html_item_panel($item)?>
+                        <?=html_item_panel($item)?>
 <?php
-                        }
+                    }
 ?>
-                    </div>
-                    <div class='inventory' id='inventory_craft'>
-                        <h4>
-                            Other crafting items:
-                        </h4>
+                </div>
+                <div class='inventory profile_section' id='inventory_craft'>
+                    <h4>
+                        Other crafting items
+                    </h4>
 <?php
-                        foreach ($page->inventory_craft as $item){
+                    foreach ($page->inventory_craft as $item){
 ?>
-                            <?=html_item_panel($item)?>
+                        <?=html_item_panel($item)?>
 <?php
-                        }
+                    }
 ?>
-                    </div>
-                    <div class='inventory' id='inventory_essence'>
-                        <h4>
-                            Essences:
-                        </h4>
+                </div>
+                <div class='inventory profile_section' id='inventory_essence'>
+                    <h4>
+                        Essences
+                    </h4>
 <?php
-                        foreach ($page->inventory_essence as $item){
+                    foreach ($page->inventory_essence as $item){
 ?>
-                            <?=html_item_panel($item)?>
+                        <?=html_item_panel($item)?>
 <?php
-                        }
+                    }
 ?>
-                    </div>
                 </div>
-                <div id='currency'>
+                <div id='currency' class='profile_section'>
+                    <h4>
+                        Currency
+                    </h4>
                     <ul>
                         <li>
-                            <img title='Energy' src='<?=$path["img"]["layout"]?>currency/energy.png'/>
+                            <img title='Energy' src='<?=$path["img"]["currency"]?>energy.png'/>
                             <?=$page->currency["energy"]?> / <?=$page->currency["energy_max"]?>
                         </li>
                         <li>
-                            <img title='Arena Invitations' src='<?=$path["img"]["layout"]?>currency/arenaenergy.png'/>
+                            <img title='Arena Invitations' src='<?=$path["img"]["currency"]?>arenaenergy.png'/>
                             <?=$page->currency["arena_energy"]?> / <?=$page->currency["arena_energy_max"]?>
                         </li>
                         <li>
-                            <img title='Dimensional Energy' src='<?=$path["img"]["layout"]?>currency/dimensionenergy.png'/>
+                            <img title='Dimensional Energy' src='<?=$path["img"]["currency"]?>dimensionenergy.png'/>
                             <?=$page->currency["dimension_energy"]?> / <?=$page->currency["dimension_energy_max"]?>
                         </li>
                         <li>
-                            <img title='Dimensional Crystal' src='<?=$path["img"]["layout"]?>currency/darkportalenergy.png'/>
+                            <img title='Dimensional Crystal' src='<?=$path["img"]["currency"]?>darkportalenergy.png'/>
                             <?=$page->currency["darkportal_energy"]?> / <?=$page->currency["darkportal_energy_max"]?>
                         </li>
                         <li>
-                            <img title='Mana' src='<?=$path["img"]["layout"]?>currency/mana.png'/>
+                            <img title='Mana' src='<?=$path["img"]["currency"]?>mana.png'/>
                             <?=$page->currency["mana"]?>
                         </li>
                         <li>
-                            <img title='Crystal' src='<?=$path["img"]["layout"]?>currency/crystal.png'/>
+                            <img title='Crystal' src='<?=$path["img"]["currency"]?>crystal.png'/>
                             <?=$page->currency["crystal"]?>
                         </li>
                         <li>
-                            <img title='Social Points' src='<?=$path["img"]["layout"]?>currency/socialpoint.png'/>
+                            <img title='Social Points' src='<?=$path["img"]["currency"]?>socialpoint.png'/>
                             <?=$page->currency["social_point"]?>
                         </li>
                         <li>
-                            <img title='Honor Points' src='<?=$path["img"]["layout"]?>currency/honor.png'/>
+                            <img title='Honor Points' src='<?=$path["img"]["currency"]?>honor.png'/>
                             <?=$page->currency["honor_point"]?>
                         </li>
                         <li>
-                            <img title='Guild Points' src='<?=$path["img"]["layout"]?>currency/guildpoint.png'/>
+                            <img title='Guild Points' src='<?=$path["img"]["currency"]?>guildpoint.png'/>
                             <?=$page->currency["guild_point"]?>
                         </li>
                         <li>
-                            <img title='Honor Medals' src='<?=$path["img"]["layout"]?>currency/badge.png'/>
+                            <img title='Honor Medals' src='<?=$path["img"]["currency"]?>badge.png'/>
                             <?=$page->currency["honor_medal"]?>
                         </li>
                         <li>
-                            <img src='<?=$path["img"]["layout"]?>currency/mark.png'/>
+                            <img src='<?=$path["img"]["currency"]?>mark.png'/>
                             <?=$page->currency["honor_mark"]?>
                         </li>
                         <li>
-                            <img title='Ancient Coins' src='<?=$path["img"]["layout"]?>currency/ancientcoin.png'/>
+                            <img title='Ancient Coins' src='<?=$path["img"]["currency"]?>ancientcoin.png'/>
                             <?=$page->currency["event_coin"]?>
                         </li>
                         <li>
-                            <img title='Ancient Crystal' src='<?=$path["img"]["layout"]?>currency/ancientstone.png'/>
+                            <img title='Ancient Crystal' src='<?=$path["img"]["currency"]?>ancientstone.png'/>
                             <?=$page->currency["ancient_stone"]?>
                         </li>
                         <li>
-                            <img title='Shapeshifting Stones' src='<?=$path["img"]["layout"]?>currency/costumestone.png'/>
+                            <img title='Shapeshifting Stones' src='<?=$path["img"]["currency"]?>costumestone.png'/>
                             <?=$page->currency["costume_point"]?>
                         </li>
                     </ul>
                 </div>
             </article>
-            <article>
-                <h3>
-                    <a href='/catalog'>
-                        Catalog
-                    </a>
-                </h3>
-                <p>
-                    Check out the catalog of every monster in the game.
-                    <br/>
-                    Plan on which monster to look forward or which one is worth building.
-                </p>
-            </article>
-            <article>
-                <h3>
-                    <a href='/monsters'>
-                        Monsters
-                    </a>
-                </h3>
-                <p>
-                    Review your monster collection.
-                    <br/>
-                    Get detailed info about their stats, skills-ups, equiped runes...
-                </p>
-            </article>
-            <article>
-                <h3>
-                    <a href='/runes'>
-                        Runes
-                    </a>
-                </h3>
-                <p>
-                    Review your rune collection.
-                    <br/>
-                    Use a variety of filters to navigate your rune inventory, getting every piece if info about them at first glance.
-                </p>
-            </article>
-            <article>
-                <h3>
-                    <a href='/fusion'>
-                        Fusion
-                    </a>
-                </h3>
-                <p>
-                    Check out fhe fusion diagrams
-                    <br/>
-                    Get a glance at the ingredients and resources you need for yoour next fusion.
-                </p>
-            </article>
-            <article>
-                <h3>
-                    <a href='/report'>
-                        Reports
-                    </a>
-                </h3>
-                <p>
-                    Get useful info to improve your gameplay.
-                    <ul>
-                        <li>
-                            Learn which of your monsters are in greater need of Devilmons.
-                        </li>
-                        <li>
-                            See the equiped runes that can be replaced with better ones from your inventory.
-                        </li>
-                    </ul>
-                </p>
-            </article>
         </section>
 <?php
         include __DIR__ . "/inc/footer.php";

application/view/inc/filter_catalog.php

@@ -8,14 +8,15 @@
                 <span>Element:</span>
 <?php
                 $selected = Array("", "", "", "", "");
-                $selected[$filters["element"]] = "selected";
+                $selected[$filters["element"] - 1] = "selected";
 ?>
                 <select name='element'>
-                    <option value='<?=$ELEMENT["FIRE"]?>' <?=$selected[0]?>>Fire</option>
-                    <option value='<?=$ELEMENT["WATER"]?>' <?=$selected[1]?>>Water</option>
-                    <option value='<?=$ELEMENT["WIND"]?>' <?=$selected[2]?>>Rare</option>
-                    <option value='<?=$ELEMENT["LIGHT"]?>' <?=$selected[3]?>>Hero</option>
-                    <option value='<?=$ELEMENT["DARK"]?>' <?=$selected[4]?>>Legend</option>
+                    <option value='0'>All</option>
+                    <option value='<?=$ELEMENT["WATER"]?>' <?=$selected[0]?>>Water</option>
+                    <option value='<?=$ELEMENT["FIRE"]?>' <?=$selected[1]?>>Fire</option>
+                    <option value='<?=$ELEMENT["WIND"]?>' <?=$selected[2]?>>Wind</option>
+                    <option value='<?=$ELEMENT["LIGHT"]?>' <?=$selected[3]?>>Light</option>
+                    <option value='<?=$ELEMENT["DARK"]?>' <?=$selected[4]?>>Dark</option>
                 </select>
             </td>
             <td class='filter' id='filter_stars'>

application/view/inc/filter_monsters.php

@@ -40,8 +40,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='in_storage' <?=$checked?>/>
-                Show monsters in storage
+                <input type='checkbox' name='in_storage' id='filter_in_storage'<?=$checked?>/>
+                <label for='filter_in_storage'>Show monsters in storage</label>
             </td>
         </tr>
         <tr>
@@ -52,8 +52,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='without_runes' <?=$checked?>/>
-                Show monsters without runes
+                <input type='checkbox' name='without_runes' id='filter_without_runes' <?=$checked?>/>
+                <label for='filter_without_runes'>Show monsters without runes<label>
             </td>
         </tr>
     </table>

application/view/inc/filter_report_runecraft.php

@@ -28,8 +28,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='monster_in_storage' <?=$checked?>/>
-                Show monsters in storage
+                <input type='checkbox' name='monster_in_storage' id='filter_monster_in_storage' <?=$checked?>/>
+                <label for='filter_monster_in_storage'>Show monsters in storage</label>
             </td>
         </tr>
         <tr>
@@ -155,7 +155,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='grind' <?=$checked?>/> Grindstones
+                <input type='checkbox' name='grind' id='filter_grind' <?=$checked?>/>
+                <label for='filter_grind'>Grindstones</label>
             </td>
             <td class='filter filter_separator'>
                 <span>Min. quality:</span>
@@ -202,7 +203,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='gem' <?=$checked?>/> Gems
+                <input type='checkbox' name='gem' id='filter_gem' <?=$checked?>/>
+                <label for='filter_gem'>Gems</label>
             </td>
             <td class='filter filter_separator'>
                 <span>Min. quality:</span>

application/view/inc/filter_report_runeupgrade.php

@@ -27,8 +27,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='monster_in_storage' <?=$checked?>/>
-                Show monsters in storage
+                <input type='checkbox' name='monster_in_storage' id='filter_monster_in_storage' <?=$checked?>/>
+                <label for='filter_monster_in_storage'>Show monsters in storage</label>
             </td>
         </tr>
         <tr>

application/view/inc/filter_report_skillup.php

@@ -22,8 +22,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='family' <?=$checked?>/>
-                Show monsters with family with lower grade.
+                <input type='checkbox' name='family' id='filter_family' <?=$checked?>/>
+                <label for='filter_family'>Show monsters with family with lower grade.</label>
             </td>
         </tr>
         <tr>
@@ -34,8 +34,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='2a' <?=$checked?>/>
-                Include second-awakened monsters.
+                <input type='checkbox' name='2a' id='filter_2a'<?=$checked?>/>
+                <label for='filter_2a'>Include second-awakened monsters.</label>
             </td>
         </tr>
         <tr>
@@ -46,8 +46,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='homunculus' <?=$checked?>/>
-                Include Homunculus.
+                <input type='checkbox' name='homunculus' id='filter_homunculus' <?=$checked?>/>
+                <label for='filter_homunculus'>Include Homunculus.</label>
             </td>
         </tr>
         <tr>
@@ -58,8 +58,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='in_storage' <?=$checked?>/>
-                Show monsters in storage
+                <input type='checkbox' name='in_storage' id='filter_in_storage' <?=$checked?>/>
+                <label for='filter_in_storage'>Show monsters in storage.</label>
             </td>
         </tr>
         <tr>
@@ -70,8 +70,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='without_runes' <?=$checked?>/>
-                Show monsters without runes
+                <input type='checkbox' name='without_runes' id='filter_without_runes' <?=$checked?>/>
+                <label for='filter_without_runes'>Show monsters without runes.</label>
             </td>
         </tr>
         <tr>
@@ -82,8 +82,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='maxed' <?=$checked?>/>
-                Show fully skilled-up monster
+                <input type='checkbox' name='maxed' id='filter_maxed' <?=$checked?>/>
+                <label for='filter_maxed'>Show fully skilled-up monster</label>
             </td>
         </tr>
     </table>

application/view/inc/filter_runes.php

@@ -27,7 +27,7 @@
                 <span>Slot:</span>
                 <select multiple name='slot[]' id='filter_slot'>
 <?php
-                    for ($i = 0; $i < 6; $i ++){
+                    for ($i = 1; $i <= 6; $i ++){
                         if (in_array($i, $filters["slot"])){
                             $selected = "selected='selected'";
                         }
@@ -42,17 +42,17 @@
                 </select>
             </td>
             <td class='filter filter_stars' >
-                <span>Min. stars:</span>
+                <span>Stars:</span>
                 <input type='number' name='min_stars' id='filter_stars_min' min='1' max='6' value='<?=$filters["min_stars"]?>'/>
-                <span>Max. stars:</span>
+                -
                 <input type='number' name='max_stars' id='filter_stars_max' min='1' max='6' value='<?=$filters["max_stars"]?>'/>
             </td>
         </tr>
         <tr>
             <td class='filter'>
-                <span>Min. level:</span>
+                <span>Level:</span>
                 <input type='number' name='min_level' id='filter_level_min' min='0' max='15' value='<?=$filters["min_level"]?>'/>
-                <span>Max. level:</span>
+                -
                 <input type='number' name='max_level' id='filter_level_max' min='0' max='15' value='<?=$filters["max_level"]?>'/>
             </td>
         </tr>
@@ -72,7 +72,6 @@
 <?php
                     }
 ?>
-                    <option value='RES' <?=$selected?>>RES</option>
                 </select>
             </td>
             <td class='filter'>
@@ -110,8 +109,8 @@
                     <option value='4' <?=$selected[4]?>>Assigned (no storage)</option>
                 </select>
             </td>
-            <td class='filter'>
-                <span>Min. quality:</span>
+            <td class='filter' colspan='2'>
+                <span>Quality:</span>
 <?php
                 $selected = Array("", "", "", "", "");
                 $selected[$filters["min_quality"] - 1] = "selected";
@@ -123,7 +122,7 @@
                     <option value='<?=$QUALITY["HERO"]?>' <?=$selected[3]?>>Hero</option>
                     <option value='<?=$QUALITY["LEGEND"]?>' <?=$selected[4]?>>Legend</option>
                 </select>
-                <span>Max. quality:</span>
+                -
 <?php
                 $selected = Array("", "", "", "", "");
                 $selected[$filters["max_quality"] - 1] = "selected";
@@ -136,8 +135,12 @@
                     <option value='<?=$QUALITY["LEGEND"]?>' <?=$selected[4]?>>Legend</option>
                 </select>
             </td>
+        </tr>
+        <tr>
             <td class='filter'>
-                <span>Min. original quality:</span>
+            </td>
+            <td class='filter' colspan='2'>
+                <span>Original quality:</span>
 <?php
                 $selected = Array("", "", "", "", "");
                 $selected[$filters["min_original_quality"] - 1] = "selected";
@@ -149,7 +152,7 @@
                     <option value='<?=$QUALITY["HERO"]?>' <?=$selected[3]?>>Hero</option>
                     <option value='<?=$QUALITY["LEGEND"]?>' <?=$selected[4]?>>Legend</option>
                 </select>
-                <span>Max. original quality:</span>
+                -
 <?php
                 $selected = Array("", "", "", "", "");
                 $selected[$filters["max_original_quality"] - 1] = "selected";
@@ -163,6 +166,16 @@
                 </select>
             </td>
         </tr>
+        <tr>
+            <td class='filter'>
+            </td>
+            <td class='filter' colspan='2'>
+                <span>Efficiency:</span>
+                <input type='number' name='min_efficiency' id='filter_efficiency_min' min='0' max='100' value='<?=$filters["min_efficiency"]?>'/>%
+                -
+                <input type='number' name='max_efficiency' id='filter_efficiency_max' min='0' max='100' value='<?=$filters["max_efficiency"]?>'/>%
+            </td>
+        </tr>
         <tr>
             <td class='filter'>
                 <span>Group by:</span>
@@ -175,16 +188,10 @@
                     <option value='1' <?=$selected[1]?>>Type</option>
                 </select>
             </td>
-            <td class='filter'>
-                <span>Min. efficiency:</span>
-                <input type='number' name='min_efficiency' id='filter_efficiency_min' min='0' max='100' value='<?=$filters["min_efficiency"]?>'/>%
-                <span>Max. efficiency:</span>
-                <input type='number' name='max_efficiency' id='filter_efficiency_max' min='0' max='100' value='<?=$filters["max_efficiency"]?>'/>%
-            </td>
-            <td class='filter'>
-                <span>Min. maximum efficiency:</span>
+            <td class='filter' colspan='2'>
+                <span>Maximum efficiency:</span>
                 <input type='number' name='min_max_efficiency' id='filter_max_efficiency_min' min='0' max='100' value='<?=$filters["min_max_efficiency"]?>'/>%
-                <span>Max. maximum efficiency:</span>
+                -
                 <input type='number' name='max_max_efficiency' id='filter_max_efficiency_max' min='0' max='100' value='<?=$filters["max_max_efficiency"]?>'/>%
             </td>
         </tr>

application/view/inc/filter_runs.php

@@ -88,8 +88,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='defeat' <?=$checked?>/>
-                Show defeats
+                <input type='checkbox' name='defeat' id='filter_defeat' <?=$checked?>/>
+                <label for='filter_defeat'>Show defeats</label>
             </td>
         </tr>
         <tr>
@@ -100,8 +100,8 @@
                     $checked = "checked";
                 }
 ?>
-                <input type='checkbox' name='helper' <?=$checked?>/>
-                Show runs with friends/mentors
+                <input type='checkbox' name='helper' id='filter_helper' <?=$checked?>/>
+                <label for='filter_helper'>Show runs with friends/mentors</label>
             </td>
         </tr>
         <tr>

application/view/inc/header.php

@@ -1,6 +1,6 @@
 <header>
     <div id='logo'>
-        <img id='logo_img' src='<?=$path["img"]["layout"]?>logo/sw.png' alt=''/>
+        <img id='logo_img' src='<?=$path["img"]["logo"]?>sw.png' alt=''/>
         <h1 id='logo_text'>
             <span class='large'>D</span>
             <span class='small'>ata</span>

application/view/monster.php

@@ -66,7 +66,7 @@
                                 <?=$exp_txt?>
                             </span>
                         </div>
-                        Obtained on <?=$page->unit->create_time->format('Y-m-d')?> (<?=$datediff?> days ago) from <?=$page->unit->source->name?> <!-- TODO SOurce name, days ago -->
+                        Obtained on <?=$page->unit->create_time->format('Y-m-d')?> (<?=$datediff?> days ago)<!-- from <?=$page->unit->source->name?> TODO SOurce name, days ago -->
                     </div>
                 </div>
 <?php
@@ -234,61 +234,91 @@
                         </td>
                     </tr>
                 </table>
-                <div id='skills'>
+                <table id='skills'>
+                    <tr>
 <?php
-                    if ($page->unit->unit->leader_skill){
+                        if ($page->unit->unit->leader_skill){
 ?>
-                        <div class='skill'>
-                            <img class='skill_img' src='<?=$page->unit->unit->leader_skill->get_image()?>'/>
-                            <span class='skill_level'>
-                                &nbsp;
-                            </span>
-                            <span class='skill_name'>
-                                Leader skill
-                            </span>
-                            <span class='skill_description'>
-                                <?=$page->unit->unit->leader_skill->create_description()?>
-                            </span>
-                        </div>
+                            <td class='skill'>
+                                <img class='skill_img' src='<?=$page->unit->unit->leader_skill->get_image()?>'/>
+                                <span class='skill_level'>
+                                    &nbsp;
+                                </span>
+                            </td>
 <?php
-                    }
-                    $skill_num = 0;
-                    $absolute_level = 0;
-                    $absolute_max_level = 0;
-                    $ponderated_level = 0;
-                    $ponderated_max_level = 0;
-                    foreach ($page->unit->unit->skill as $skill){
-                        if ($skill->max_level > 1){
-                            $absolute_max_level += $skill->max_level - 1;
                         }
-                        $cur_lvl = $page->unit->skill_levels[$skill_num];
-                        if ($skill->max_level > 1){
-                            $absolute_level += $cur_lvl - 1;
-                            $ponderated_level += ($cur_lvl - 1) * (1 + ($skill_num / 2));
-                            $ponderated_max_level += ($skill->max_level - 1) * (1 + ($skill_num / 2));
+                        $skill_num = 0;
+                        $absolute_level = 0;
+                        $absolute_max_level = 0;
+                        $ponderated_level = 0;
+                        $ponderated_max_level = 0;
+                        foreach ($page->unit->unit->skill as $skill){
+                            if ($skill->max_level > 1){
+                                $absolute_max_level += $skill->max_level - 1;
+                            }
+                            $cur_lvl = $page->unit->skill_levels[$skill_num];
+                            if ($skill->max_level > 1){
+                                $absolute_level += $cur_lvl - 1;
+                                $ponderated_level += ($cur_lvl - 1) * (1 + ($skill_num / 2));
+                                $ponderated_max_level += ($skill->max_level - 1) * (1 + ($skill_num / 2));
+                            }
+                            $max_lvl = $skill->max_level;
+                            if ($max_lvl == $cur_lvl){
+                                $maxed = "maxed";
+                            }
+                            else{
+                                $maxed = "";
+                            }
+                            $skill_num ++;
+?>
+                            <td class='skill'>
+                                <img class='skill_img' src='<?=$skill->get_image()?>'/>
+                                <span class='skill_level <?=$maxed?>'>
+                                    <?=$cur_lvl?>/<?=$max_lvl?>
+                                </span>
+                            </td>
+<?php
                         }
-                        $max_lvl = $skill->max_level;
-                        if ($max_lvl == $cur_lvl){
-                            $maxed = "maxed";
+?>
+                    </tr>
+                    <tr>
+<?php
+                        if ($page->unit->unit->leader_skill){
+?>
+                            <td>
+                                <span class='skill_name'>
+                                    Leader skill
+                                </span>
+                                <span class='skill_description'>
+                                    <?=$page->unit->unit->leader_skill->create_description()?>
+                                </span>
+                            </td>
+<?php
                         }
-                        else{
-                            $maxed = "";
+                        foreach ($page->unit->unit->skill as $skill){
+?>
+                            <td>
+                                <span class='skill_name'>
+                                    <?=$skill->name?>
+                                </span>
+                                <span class='skill_description'>
+                                    <?=$skill->description?>
+                                </span>
+                            </td>
+<?php
                         }
 ?>
-                        <div class='skill'>
-                            <img class='skill_img' src='<?=$skill->get_image()?>'/>
-                            <span class='skill_level <?=$maxed?>'>
-                                <?=$cur_lvl?>/<?=$max_lvl?>
-                            </span>
-                            <span class='skill_name'>
-                                <?=$skill->name?>
-                            </span>
-                            <span class='skill_description'>
-                                <?=$skill->description?>
-                            </span>
+                    </tr>
+                    <tr>
 <?php
-                            if (count($skill->effect) > 0){
+                        if ($page->unit->unit->leader_skill){
 ?>
+                            <td></td>
+<?php
+                        }
+                        foreach ($page->unit->unit->skill as $skill){
+?>
+                            <td>
                                 <span class='skill_effects'>
 <?php
                                     foreach ($skill->effect as $effect){
@@ -298,41 +328,45 @@
                                     }
 ?>
                                 </span>
+                            </td>
 <?php
-                            }
-                            if ($skill->max_level > 1){
+                        }
 ?>
-                                <table class='skill_up'>
+                    </tr>
+                    <tr>
+<?php
+                        if ($page->unit->unit->leader_skill){
+?>
+                            <td></td>
 <?php
-                                    foreach ($skill->level as $level){
-                                        if ($level->level > 1){
-                                            $aquired = "";
-                                            if ($level->level <= $cur_lvl){
-                                                $aquired = "aquired";
-                                            }
+                        }
+                        foreach ($page->unit->unit->skill as $skill){
 ?>
-                                            <tr>
-                                                <td class='level <?=$aquired?>'>
-                                                    Lv. <?=$level->level?>
-                                                </td>
-                                                <td class='description <?=$aquired?>'>
-                                                    <?=$level->description?>
-                                                </td>
-                                            </tr>
+                            <td class='skill_up'>
 <?php
+                                foreach ($skill->level as $level){
+                                    if ($level->level > 1){
+                                        $aquired = "";
+                                        if ($level->level <= $cur_lvl){
+                                            $aquired = "aquired";
                                         }
-                                    }
 ?>
-                                </table>
+                                        <span class='level <?=$aquired?>'>
+                                            Lv. <?=$level->level?>
+                                        </span>
+                                        <span class='description <?=$aquired?>'>
+                                            <?=$level->description?>
+                                        </span>
 <?php
-                            }
+                                    }
+                                }
 ?>
-                        </div>
+                            </td>
 <?php
-                        $skill_num ++;
-                    }
+                        }
 ?>
-                </div> <!-- #skills -->
+                    </tr>
+                </table> <!-- #skills -->
                 <table id='skill_averages'>
                     <tr>
                         <td class='title'>

application/view/monster_info.php

@@ -64,7 +64,7 @@
 <?php
                                 }
 ?>
-                                <img class='family <?=$current?> <?=$disabled?>' src='<?=$path["img"]["content"] . "element/$element.png"?>'/>
+                                <img class='family <?=$current?> <?=$disabled?>' src='<?=$path["img"]["element"] . "$element.png"?>'/>
 <?php
                                 if ($current == "" && $disabled == ""){
 ?>
@@ -183,7 +183,7 @@
                                     foreach ($page->monster[$i]->essences as $essence){
 ?>
                                        <div class='essence border_<?=$essence["element"]?>'>
-                                            <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["layout"]?>essence/<?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
+                                            <img alt='<?=$essence["grade"]?> <?=$essence["element"]?> essence' title='<?=$essence["amount"]?>x <?=$essence["grade"]?> <?=$essence["element"]?> essence' class='essence' src='<?=$path["img"]["essence"]?><?=$essence["element"]?>_<?=$essence["grade"]?>.png'/>
                                             <span>
                                                 <?=$essence["amount"]?>
                                             </span>

application/view/report.php

@@ -44,7 +44,7 @@
                 Pending skill-ups
             </h2>
             <article>
-                <img alt=' ' src='<?=$path["img"]["content"]?>unit/00015105.png'> <!-- Devilmon image -->
+                <img alt=' ' src='<?=$path["img"]["unit"]?>00015105.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. 
@@ -60,7 +60,7 @@
                 Runes to replace
             </h2>
             <article class='report'>
-                <img alt=' ' src='<?=$path["img"]["layout"]?>rune/base.png'>
+                <img alt=' ' src='<?=$path["img"]["rune"]?>base.png'>
                 <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.
@@ -73,10 +73,10 @@
         </section>
         <section class='content report'>
             <h2>
-                Runes to replace
+                Runes to upgrade
             </h2>
             <article class='report'>
-                <img alt=' ' src='<?=$path["img"]["layout"]?>grind/gem_inmemorial.png'> 
+                <img alt=' ' src='<?=$path["img"]["grind"]?>gem_inmemorial.png'> 
                 <p>
                     Shows monsters with runes that can be crafted.
                     It list the grindstones and gems that are available for each rune.

application/view/report_skillup.php

@@ -106,7 +106,7 @@
 <?php
                                     for ($i = 0; $i < $unit->stars; $i ++){
 ?>
-                                        <img class='star <?=$star_class?>' src='<?=$path["img"]["layout"] . "icon/star.png"?>'/>
+                                        <img class='star <?=$star_class?>' src='<?=$path["img"]["icon"] . "star.png"?>'/>
 <?php
                                     }
 ?>

application/view/runes.php

@@ -54,12 +54,12 @@
                         case 1: // "TYPE":
                             $group = $rune->type->name;
                             $group_title = $rune->type->name;
-                            $group_image = $path["img"]["layout"] . "rune/" .str_pad($rune->type->id, 2, '0', STR_PAD_LEFT) . ".png";
+                            $group_image = $path["img"]["rune"] . str_pad($rune->type->id, 2, '0', STR_PAD_LEFT) . ".png";
                             break;
                         default:
                             $group = $rune->slot;
                             $group_title = "Slot " . $rune->slot;
-                            $group_image = $path["img"]["layout"] . "rune/base.png";
+                            $group_image = $path["img"]["rune"] . "base.png";
                     }
                     if ($prev_group != $group){
                         if ($prev_group == ""){

application/view/runs.php

@@ -89,7 +89,7 @@
 <?php
                                                 for ($i = 0; $i < $run->difficulty; $i ++){
 ?>
-                                                    <img class='difficulty' src='<?=$path["img"]["layout"]?>icon/star.png'/>
+                                                    <img class='difficulty' src='<?=$path["img"]["icon"]?>star.png'/>
 <?php
                                                 }
 ?>
@@ -110,7 +110,7 @@
                                     if ($run->helper == 1){
 ?>
                                         <div class='monster_panel helper'>
-                                            <img class='monster' title='Friend/Menstor' src='<?=$path["img"]["layout"]?>currency/socialpoint.png'/>
+                                            <img class='monster' title='Friend/Menstor' src='<?=$path["img"]["currency"]?>socialpoint.png'/>
                                         </div>
 <?php
                                     }
@@ -164,7 +164,7 @@
                                     if ($run->energy > 0){
 ?>
                                         <div class='item'>
-                                            <img class='item' title='Energy' src='<?=$path["img"]["layout"]?>currency/energy.png'/>
+                                            <img class='item' title='Energy' src='<?=$path["img"]["currency"]?>energy.png'/>
                                             <span class='item'><?=$run->energy?></span>
                                         </div>
 <?php
@@ -172,7 +172,7 @@
                                     if ($run->mana > 0){
 ?>
                                         <div class='item'>
-                                            <img class='item' title='Mana' src='<?=$path["img"]["layout"]?>currency/mana.png'/>
+                                            <img class='item' title='Mana' src='<?=$path["img"]["currency"]?>mana.png'/>
                                             <span class='item'><?=$run->mana?></span>
                                         </div>
 <?php
@@ -180,7 +180,7 @@
                                     if ($run->crystal > 0){
 ?>
                                         <div class='item'>
-                                            <img class='item' title='Crystal' src='<?=$path["img"]["layout"]?>currency/crystal.png'/>
+                                            <img class='item' title='Crystal' src='<?=$path["img"]["currency"]?>crystal.png'/>
                                             <span class='item'><?=$run->crystal?></span>
                                         </div>
 <?php
@@ -204,7 +204,7 @@
 ?>
                                         <div class='item'>
                                             <img class='item' title='<?=$sd->unit->title?>' src='<?=$sd->unit->get_image()?>'/>
-                                            <img class='item' title=' ' src='<?=$path["img"]["layout"]?>misc/mask-sd.png'/>
+                                            <img class='item' title=' ' src='<?=$path["img"]["misc"]?>mask-sd.png'/>
                                         </div>
 <?php
                                     }
@@ -212,7 +212,7 @@
 ?>
                                         <div class='item'>
                                             <img class='item' title='<?=$piece->unit->title?>' src='<?=$piece->unit->get_image()?>'/>
-                                            <img class='item' title=' ' src='<?=$path["img"]["layout"]?>misc/mask-piece.png'/>
+                                            <img class='item' title=' ' src='<?=$path["img"]["misc"]?>mask-piece.png'/>
                                             <span class='item'><?=$piece->quantity?></span>
                                         </div>
 <?php
@@ -220,7 +220,7 @@
                                     if ($run->shapeshifting > 0){
 ?>
                                         <div class='item'>
-                                            <img class='item' title='Shapeshifting Stones' src='<?=$path["img"]["layout"]?>currency/costumestone.png'/>
+                                            <img class='item' title='Shapeshifting Stones' src='<?=$path["img"]["currency"]?>costumestone.png'/>
                                             <span class='item'><?=$run->shapeshifting?></span>
                                         </div>
 <?php
@@ -228,7 +228,7 @@
                                     foreach ($run->rune as $rune){
 ?>
                                         <div class='item item_rune'>
-                                            <img class='item' title='Rune' src='<?=$path["img"]["layout"]?>rune/base.png'/>
+                                            <img class='item' title='Rune' src='<?=$path["img"]["rune"]?>base.png'/>
                                             <?=html_rune_table($rune)?>
                                         </div>
 <?php

install_base.py

@@ -631,6 +631,48 @@ def parseLeaderSkills(db, url):
             amount = skill["amount"]
             area = skill["area"]
             element = skill["element"]
+            if element == 'Water':
+                element = 1;
+            elif element == 'Fire':
+                element = 2;
+            elif element == 'Wind':
+                element = 3;
+            elif element == 'Light':
+                element = 4;
+            elif element == 'Dark':
+                element = 5;
+            else:
+                element = None
+            if attribute == 'HP':
+                attribute = 1
+            elif attribute == 'Attack Power':
+                attribute = 2
+            elif attribute == 'Defense':
+                attribute = 3
+            elif attribute == 'Attack Speed':
+                attribute = 4
+            elif attribute == 'Critical Rate':
+                attribute = 5
+            elif attribute == 'Critical DMG':
+                attribute = 6
+            elif attribute == 'Resistance':
+                attribute = 7
+            elif attribute == 'Accuracy':
+                attribute = 8
+            else:
+                attribute = None
+            if area == 'General':
+                area = 1
+            elif area == 'Element':
+                area = 1
+            elif area == 'Dungeon':
+                area = 2
+            elif area == 'Arena':
+                area = 3
+            elif area == 'Guild':
+                area = 4
+            else:
+                area = 1
             insert(db, "k_leader_skill", (id, attribute, amount, area, element))
 
         # Next page

public/css/catalog.css

@@ -4,4 +4,6 @@ section.list article{
 
 section.list article div.monster{
     display: inline-block;
+    font-size: 60%;
+    margin: 0.2em;
 }

public/css/filters.css

@@ -33,6 +33,8 @@ form.filter table td.filter span{
 }
 
 form.filter td.filter_title{
+    text-transform: capitalize;
+    font-variant: small-caps;
     font-weight: bold;
     border-right: 0.2em solid #ffffff;
     text-align: center;

public/css/home.css

@@ -1,38 +1,53 @@
 article#profile{
-    width: 40%;
-    text-align: left;
+    text-align: center;
 }
 
-article#profile h4{
-    color: #ffffff;
-    font-weight: bold;
-    margin: 0.5em 1em 0em 0.5em;
-    display: inline;
-    vertical-align: middle;
+article#profile div.profile_section{
+    border: 0.2em solid var(--ui-color-border);
+    max-width: 45%;
+    margin: 0.5em;
+    padding: 0 0.5em 0.5em 0.5em;
+    border-radius: 0.5em;
+    display: inline-block;
+    vertical-align: top;
+    text-align: center;
+    background-color: #00000033;
 }
 
-article#profile div#currency ul li img{
-    height: 1.2em;
-    width: 1.2em;
-    vertical-align: middle;
+article#profile div.profile_section h4{
+    margin: 0 -0.5em 0.5em -0.5em;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    padding: 0.2em;
+    border-bottom: 0.1em solid var(--ui-color-border);
+    background-color: #00000033;
 }
 
 article#profile div#rep div.monster_panel{
     font-size: 50%;
-    margin: 0;
-    vertical-align: middle;
+    margin: 0.2em;
+}
+
+article#profile div#defense{
+    position: relative;
 }
 
 article#profile div#defense div.monster_panel{
-    font-size: 35%;
-    margin: 0;
-    vertical-align: middle;
+    font-size: 50%;
+    margin: 0.2em;
 }
 
-/**
- * Monster panel
- */
-article#profile div.building_panel{
+article#profile div#defense div.skill{
+    position: absolute;
+    left: 0.2em;
+    top: 4em;
+}
+article#profile div#defense div.skill img{
+    width: 1.5em;
+    height: 1.5em;
+}
+
+article#profile div#building div.building_panel{
     display: inline-block;
     width: 2em;
     height: 2em;
@@ -42,11 +57,25 @@ article#profile div.building_panel{
     vertical-align: middle;
 }
 
-article#profile div#building h4, div#decoration h4{
-    display: block;
+article#profile div#building div.building_panel img.building, img.decoration{
+    width: 2em;
+    height: 2em;
+    border-style: solid;
+    border-width: 0.1em;
+    border-radius: 15%;
+}
+
+article#profile div#decoration div.building_panel{
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    margin: 0.2em 0em;
+    position: relative;
+    border-radius: 15%;
+    vertical-align: middle;
 }
 
-article#profile div.building_panel img.building{
+article#profile div#decoration div.building_panel img.building, img.decoration{
     width: 2em;
     height: 2em;
     border-style: solid;
@@ -54,27 +83,22 @@ article#profile div.building_panel img.building{
     border-radius: 15%;
 }
 
-article#profile div.building_panel span.level{
+article#profile div#decoration div.building_panel span.level{
     position: relative;
     bottom: 1.6em;
     font-weight: bold;
     color: #000;
     text-shadow: 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 0.4em #fff, 0 0 0.4em #fff;
-    font-size: 100%;
-    left: 0.4em;
-    bottom: 2.8em;
+    bottom: 1.4em;
     z-index: 1;
-    font-size: 50%;
-}
-
-article#profile div.building_panel span.level::before {
-  content: "Lv. ";
+    font-size: 1em;
+    display: block;
+    text-align: right;
+    pointer-events: none;
 }
 
 
-
-
-article#profile div.item_panel{
+article#profile div.inventory div.item_panel{
     display: inline-block;
     width: 2em;
     height: 2em;
@@ -84,11 +108,7 @@ article#profile div.item_panel{
     vertical-align: middle;
 }
 
-article#profile div#building h4, div#decoration h4{
-    display: block;
-}
-
-article#profile div.item_panel img.item{
+article#profile div.inventory div.item_panel img.item{
     width: 2em;
     height: 2em;
     border-style: solid;
@@ -96,15 +116,30 @@ article#profile div.item_panel img.item{
     border-radius: 15%;
 }
 
-article#profile div.item_panel span.amount{
+article#profile div.inventory div.item_panel span.amount{
     position: relative;
-    bottom: 1.6em;
     font-weight: bold;
     color: #000;
     text-shadow: 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 0.4em #fff, 0 0 0.4em #fff;
-    font-size: 100%;
-    left: 0.4em;
-    bottom: 2.8em;
+    font-size: 0.8em;
+    bottom: 1.6em;
     z-index: 1;
-    font-size: 50%;
-}
+    display: block;
+    text-align: right;
+    pointer-events: none;
+}
+
+article#profile div#currency{
+    text-align: left;
+}
+
+article#profile div#currency ul{
+    column-count: 2;
+}
+
+
+article#profile div#currency ul li img{
+    height: 1.2em;
+    width: 1.2em;
+    vertical-align: middle;
+}

public/css/monster.css

@@ -18,35 +18,35 @@ section#monster{
 section#monster article#profile div#monster_info{
     display: inline-block;
     vertical-align: top;
-    max-width: 12em;
+    max-width: 10em;
 }
 
 section#monster article#profile div#monster_info div#monster_details{
     display: block;
     font-size: 70%;
-    color: #ffffff;
+    margin-top: -3em;
 }
 
 section#monster article#profile div#monster_info div#exp{
-    border: 0.3em solid #f2c920;
-    border-radius: 1em;
-    height: 2em;
+    border: 0.3em solid var(--ui-color-border);
+    border-radius: 0.5em;
+    height: 1em;
     background-color: #00000088;
     position: relative;
-    font-size: 90%;
+    font-size: 100%;
 }
 section#monster article#profile div#monster_info div#exp span#exp_bar{
-    height: 2em;
-    border-radius: 0.7em;
+    height: 1em;
+    border-radius: 0.4em;
     display: block;
-    background-color: #ff0000;
+    background-color: #cc0000;
 }
 section#monster article#profile div#monster_info div#exp span#exp_text{
     display: block;
     text-align: center;
     margin-top: -1.5em;
     font-weight: bold;
-    color: #ffffff;
+    font-size: 0.5em;
     text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.1em #000000;
 }
 
@@ -85,46 +85,50 @@ section#monster article#profile table#stats td.total{
     font-weight: bold;
 }
 
-section#monster article#profile div#skills{
-    text-align: center;
-}
-
-section#monster article#profile div#skills div.skill{
-    display: inline-block;
+section#monster article#profile table#skills{
+    display: block;
     vertical-align: top;
     margin: 0.2em;
     color: #ffffff;
     text-align: center;
-    max-width: 20%;
+    width: 95%;
     position: relative;
+    border-collapse: collapse;
 }
 
-section#monster article#profile div#skills div.skill img.skill_img{
-    width: 5em;
-    height: 5em;
-    border: 0.3em solid #f2c920;
-    border-radius: 0.5em;
+section#monster article#profile table#skills td{
+    vertical-align: top;
+    padding: 0.2em 0.5em;
 }
-section#monster article#profile div#skills div.skill span.skill_level{
-    font-size: 130%;
-    position: absolute;
+
+section#monster article#profile table#skills img.skill_img{
+    width: 4em;
+    height: 4em;
+    border: 0.15em solid var(--ui-color-border);
+    border-radius: 0.4em;
+}
+section#monster article#profile table#skills span.skill_level{
+    font-size: 100%;
     top: 2.8em;
-    right: 1.8em;
+    display: block;
+    width: 3.5em;
+    margin: -1.5em auto 0.5em auto;
+    text-align: right;
     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{
+section#monster article#profile table#skills span.skill_level.maxed{
     color: #f2c920;
 }
 
-section#monster article#profile div#skills div.skill span.skill_name{
+section#monster article#profile table#skills span.skill_name{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
-    margin-top: 0;
+    margin: 0 0 0.5em 0;
     display: block;
     font-weight: bold;
 }
 
-section#monster article#profile div#skills div.skill span.skill_description{
+section#monster article#profile table#skills span.skill_description{
     font-size: 80%;
     font-style: italic;
     margin: 0;
@@ -133,54 +137,38 @@ section#monster article#profile div#skills div.skill span.skill_description{
     line-height: 0.95em;
 }
 
-section#monster article#profile div#skills div.skill span.skill_effects{
+section#monster article#profile table#skills span.skill_effects{
     display: block;
     text-align: center;
-    margin-top: 1em;
 }
 
-section#monster article#profile div#skills div.skill span.skill_effects img.effect_img{
+section#monster article#profile table#skills span.skill_effects img.effect_img{
     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{
+section#monster article#profile table#skills td.skill_up{
     margin: 0.5em auto 0 auto;
     border-collapse: collapse;
     font-size: 70%;
+    color: #999999;
+    font-style: italic;
 }
 
-section#monster article#profile div#skills div.skill table.skill_up td{
-    font-size: 90%;
-    color: #888888;
-    padding: 0.2em 
-    border: 0 solid #000000;
-    line-height: 1em;
-}
-@media screen and (max-width : 990px){
-    section#monster article#profile div#skills div.skill table.skill_up td{
-        padding: 0;
-        border: 0.1em solid black;
-        line-height: 0.95em;
-        font-size: 70%;
-    }
+section#monster article#profile table#skills td.skill_up span.level{
+    width: 3em;
+    display: inline-block;
 }
-
-section#monster article#profile div#skills div.skill table.skill_up td.level{
+section#monster article#profile table#skills td.skill_up span.description{
     font-style: italic;
-    padding-right: 0.8em;
-    min-width: 2em;
-    font-size: 80%
-}
-@media screen and (max-width : 990px){
-    section#monster article#profile div#skills div.skill table.skill_up td.level{
-        font-size: 70%
-    }
+    min-width: 6em;
+    display: inline-block;
+    width: 70%;
 }
 
-section#monster article#profile div#skills div.skill table.skill_up td.aquired{
+section#monster article#profile table#skills td.skill_up span.aquired{
     color: #ffffff;
     font-weight: bold;
 }
@@ -188,12 +176,10 @@ section#monster article#profile div#skills div.skill table.skill_up td.aquired{
 section#monster article#profile table#skill_averages{
     margin: 3em auto 2em auto;
     color: #ffffff;
-    font-size: 120%;
+    font-size: 90%;
     border-top: 0.1em solid #ffffff;
-    border-bottom: 0.1em solid #ffffff;
-    border-radius: 0.3em;
     padding-top: 2em;
-    padding-bottom: 2em;
+    padding-bottom: 0.5em;
 }
 
 section#monster article#profile table#skill_averages td.title{
@@ -222,13 +208,13 @@ section#runes{
 }
 
 section#runes article#rune_averages{
-    margin: 5em auto 2em auto;
+    margin: 2em auto 1em auto;
     text-align: center;
 }
 
 section#runes article#rune_averages table#table_averages{
     margin: auto;
-    color: #ffffff;
+    font-size: 80%
 }
 
 section#runes article#rune_averages table#table_averages td.title{

public/css/monster_info.css

@@ -131,7 +131,7 @@ article.stage div.skills div.skill{
 article.stage div.skills div.skill img.skill_img{
     width: 4em;
     height: 4em;
-    border: 0.3em solid #f2c920;
+    border: 0.15em solid var(--ui-color-border);
     border-radius: 0.5em;
 }
 
@@ -172,8 +172,7 @@ article.stage div.skills div.skill table.skill_up{
 
 article.stage div.skills div.skill table.skill_up td{
     font-size: 90%;
-    color: #888888;
-    padding: 0.2em 
+    padding: 0.2em;
     border: 0 solid #000000;
     line-height: 1em;
 }

public/css/monsters.css

@@ -1,6 +1,7 @@
 section.list div.monster{
     display: inline-block;
     position: relative;
+    font-size: 80%;
 }
 
 section.list div.monster div.monster_tooltip{
@@ -10,7 +11,7 @@ section.list div.monster div.monster_tooltip{
     z-index: 10;
     display: none;
     background: #351e0b;
-    border: 0.2em solid #f2c920;
+    border: 0.2em solid var(--ui-color-border);
     border-radius: 0.5em;
     padding: 0.5em;
 }
@@ -25,7 +26,6 @@ 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;
@@ -36,10 +36,22 @@ section.list div.monster div.monster_tooltip table.stats{
     font-size: 80%;
     border: 0.1em solid black;
     color: #ffffff;
+    border-collapse: collapse;
 }
 
 section.list div.monster div.monster_tooltip table.stats th{
     font-weight: bold;
+    border-bottom: 0.1em solid black;
+    background-color: #150e00;
+}
+
+section.list div.monster div.monster_tooltip table.stats tr{
+    line-height: 0.8em;
+}
+
+section.list div.monster div.monster_tooltip table.stats td{
+    border-bottom: 0.1em solid black;
+    color: #cccccc;
 }
 
 section.list div.monster div.monster_tooltip table.stats td.extra{
@@ -60,22 +72,24 @@ section.list div.monster div.monster_tooltip div.skills div.skill{
     vertical-align: top;
     max-width: 22%;
     margin: 0.5em;
-    font-size: 50%;
+    font-size: 70%;
     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: 3em;
+    height: 3em;
+    border: 0.3em solid var(--ui-color-border);
     border-radius: 0.5em;
 }
 section.list div.monster div.monster_tooltip div.skills div.skill span.skill_level{
-    font-size: 180%;
+    font-size: 130%;
     position: relative;
-    top: -2em;
-    right: -0.8em;
+    bottom: 1.4em;
+    width: 90%;
+    display: block;
+    text-align: right;
     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;
 }
 
@@ -85,6 +99,6 @@ section.list div.monster div.monster_tooltip div.skills div.skill span.skill_lev
 
 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: -2.5em;
+    margin-top: -1.8em;
     display: block;
 }

public/css/report.css

@@ -29,9 +29,9 @@ section.report article img{
     height: 5em;
     width: 5em;
     margin: 0.5em;
-    border-radius: 15%;
+    border-radius: 25%;
     background: #444444;
-    border: 0.2em solid #777777;
+    border: 0.1em solid var(--ui-color-border);
 }
 
 section.report article p{
@@ -39,7 +39,7 @@ section.report article p{
 }
 
 section.report article form{
-    border: 0.1em solid #000000;
+    border: 0.1em solid #483d2a;
     border-radius: 0.5em;
     padding: 0.5em;
     text-align: center;

public/css/report_runecraft.css

@@ -1,5 +1,6 @@
 section.content article{
     text-align: left;
+    position: relative;
 }
 
 @media screen and (max-width : 990px){
@@ -13,26 +14,14 @@ section.content article{
 
 section.content article div.monster{
     display: block;
-    width: 8em;
-}
-@media screen and (max-width : 990px){
-    section.content article div.monster{
-        display: block;
-        max-width: 100%;
-        width: initial;
-    }
+    font-size: 50%;
+    position: absolute;
 }
 
 section.content article div.monster_runes{
-    display:inline-block;
+    display: block;
     vertical-align: top;
-    width: 100%;
-}
-@media screen and (max-width : 990px){
-    section.content article div.monster_runes{
-        display: block;
-        max-width: 100%;
-    }
+    margin-left: 4em;
 }
 
 section.content article div.monster_runes > table.rune{
@@ -41,14 +30,17 @@ section.content article div.monster_runes > table.rune{
     vertical-align: top;
     margin: 0 -0.5em 0.5em 0.5em;
 }
+section.content article div.monster_runes > table.rune:before { content: '\A'; }
 
 section.content article div.monster_runes div.craft{
     display: inline-block;
     vertical-align: top;
     max-width: 45%;
     min-width: 35%;
-    padding: 1em;
-    margin: 0 0 1em 0;
+    padding: 1em 1em 1em 3em;
+    margin: 0 0 1em -2em;
     font-size: 80%;
-    background: linear-gradient(47deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 70%);
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 3%, rgba(255,255,255,0.3) 10%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 70%);
+    border-top-left-radius: 3em;
+    border-bottom-left-radius: 3em;
 }

public/css/report_runeupgrade.css

@@ -33,14 +33,14 @@ section.content article div.monster_runes > table.rune{
 }
 
 section.content article div.monster_runes div.alternatives{
-    padding: 0.5em;
+    padding: 0.2em;
     margin-top: -0.6em;
     margin-left: 1.5em;
     margin-bottom: 0.5em;
-    border-left: 0.3em solid #ffffff;
-    border-bottom: 0.3em solid #ffffff;
+    border-left: 0.1em solid #3c2929;;
+    border-bottom: 0.1em solid #3c2929;;
     border-bottom-left-radius: 1em;
     border-bottom-right-radius: 1em;
     font-size: 90%;
-    background: linear-gradient(47deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 70%);
+    background: linear-gradient(47deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 80%);
 }

public/css/report_skillup.css

@@ -7,6 +7,8 @@ section.content div.monster div.profile{
     text-align: center;
     display: inline-block;
     vertical-align: top;
+    font-size: 65%;
+    margin-bottom: -2em;
 }
 @media screen and (max-width : 990px){
     section.content div.monster div.profile{
@@ -16,20 +18,14 @@ section.content div.monster div.profile{
 }
 
 section.content div.monster div.skills{
-    text-align: center;
+    text-align: left;
     display: inline-block;
-    width: 60%;
-}
-@media screen and (max-width : 990px){
-    section.content div.monster div.skills{
-        width: 65%;
-    }
 }
 
 section.content div.monster div.skills div.skill{
     display: inline-block;
     vertical-align: top;
-    width: 22%;
+    width: 5em;
     margin: 0.5em;
     color: #ffffff;
     text-align: center;
@@ -44,17 +40,20 @@ section.content div.monster div.skills div.skill{
 section.content div.monster div.skills div.skill img{
     width: 3em;
     height: 3em;
-    border: 0.1em solid #f2c920;
+    border: 0.1em solid var(--ui-color-border);
     border-radius: 0.5em;
     margin: auto;
     display: block;
 }
 section.content div.monster div.skills div.skill span.skill_level{
-    font-size: 110%;
     position: relative;
-    top: -1.5em;
-    right: -0.5em;
+    display: block;
+    top: -1.3em;
+    width: 2.8em;
+    text-align: right;
     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;
+    pointer-events: none;
+    margin: auto;
 }
 
 section.content div.monster div.skills div.skill span.skill_level.maxed{

public/css/runes.css

@@ -1,17 +1,17 @@
 section.filters td.filter select#filter_type{
-    height: 32em;
+    height: 27em;
     overflow: hidden;
 }
 section.filters td.filter select#filter_slot{
-    height: 9.5em;
+    height: 8em;
     overflow: hidden;
 }
 section.filters td.filter select#filter_main_stat{
-    height: 17em;
+    height: 14em;
     overflow: hidden;
 }
 section.filters td.filter select#filter_sub_stat{
-    height: 17em;
+    height: 14em;
     overflow: hidden;
 }
 

public/css/runs.css

@@ -32,6 +32,7 @@ table#runs td.area div.area span.stage{
     width: 2em;
     text-align: right;
     text-shadow: 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.2em #000, 0 0 0.1em #000, 0 0 0.1em #000;
+    pointer-events: none;
 }
 
 table#runs td.area div.area span.difficulty{
@@ -40,6 +41,7 @@ table#runs td.area div.area span.difficulty{
     left: 0;
     width: 1.8em;
     text-align: right;
+    pointer-events: none;
 }
 table#runs td.area div.area span.difficulty img.difficulty{
     height: 0.6em;

public/css/ui.css

@@ -10,12 +10,34 @@
     --ui-color-a: #08fff6;
     --ui-color-a-hover: #cccccc;
     --ui-color-a-shadow: #000000;
+    --ui-color-border: #c8ad78;
     /**
      * Header and footer.
      */
-    --header-background: #884444;
-    --header-border: 0.2em solid #f2c920;
-    --header-border-radius: 0;
+    --header-background: #79683c;
+    --header-border: 0.15em solid var(--ui-color-border);
+    --header-border-radius: 0.2em;
+    --nav-color: var(--global-color);
+    --nav-color-hover: #333333;
+    --nav-background-hover: #ffffff33;
+    --nav-separator: 0.1em solid #ffffff44;
+    --nav-shadow: 0 0 0 #ffffff;
+    --nav-shadow-hover: 0 0 0.2em #ffffff;
+    /**
+     * Sections.
+     */
+    --section-border: 0.15em solid var(--ui-color-border);
+    --section-border-radius: 0.5em;
+    --section-padding: 0.5em;
+    --section-margin: 0.2em 2em 0.5em 2em;
+    --section-title-margin: -0.5em -0.5em 0.5em -0.5em;
+    --section-title-background: #6c2d0d;
+    --section-title-border-radius: 0.35em;
+    --section-title-padding: 0.2em 0 0.2em 2em;
+    --section-title-font-size: 100%;
+    --section-title-font-weight: bold;
+    --section-background-list: #331100;
+    --section-background-content: #755739;
     /**
      * Star filters.
      */
@@ -32,9 +54,21 @@
     --element-color-light: #f2f7aa;
     --element-color-dark: #4a0282;
     --element-color-magic: #e21af4;
-    
-  --main-txt-color: blue;
-  --main-padding: 15px;
+    /**
+     * Input elments
+     */
+    --input-color: #ffffff;
+    --input-color-placeholder: #777777;
+    --input-font-weight: normal;
+    --input-padding: 0;
+    --input-background: linear-gradient(0deg, rgba(187,132,64,1) 0%, rgba(200,173,120,1) 97%, rgba(209,169,143,1) 100%);
+    --input-background-unchecked: rgb(96, 71, 40);
+    --input-background-checked: rgba(209,169,143,1);
+    --input-border: 0;/*0.2em solid var(--ui-color-border);*/
+    --input-border-radius: 0.2em;
+    --input-text-shadow: 0 0 0.1em #000000;
+    --input-box-shadow: 0 0 0.2em #000000;
+    --input-button-padding: 0.3em 1em 0.3em 1em;
 }
 
 
@@ -54,99 +88,38 @@
         display: initial !important;
     }
 }
-.bold{
-    font-weight: bold;
-}
-.italic{
-    font-style: italic;
-}
-.pointer {
-    cursor: pointer;
-}
-.hidden{
-    display: none;
-}
-.pointer{
-    cursor: pointer;
-}
-.error{
-    border-color: #ffaaaa;
-}
-.color_Fire{
-    color: var(--element-color-fire);
-}
-.color_Wind{
-    color: var(--element-color-wind);
-}
-.color_Water{
-    color: var(--element-color-water);
-}
-.color_Light{
-    color: var(--element-color-light);
-}
-.color_Dark{
-    color: var(--element-color-dark);
-}
-.color_Magic{
-    color: var(--element-color-magic);
-}
-.border_Fire{
-    border-color: var(--element-color-fire);
-}
-.border_Wind{
-    border-color: var(--element-color-wind);
-}
-.border_Water{
-    border-color: var(--element-color-water);
-}
-.border_Light{
-    border-color: var(--element-color-light);
-}
-.border_Dark{
-    border-color: var(--element-color-dark);
-}
-.border_Magic{
-    border-color: var(--element-color-magic);
-}
-.background_Fire{
-    background-color: var(--element-color-fire);
-}
-.background_Wind{
-    background-color: var(--element-color-wind);
-}
-.background_Water{
-    background-color: var(--element-color-water);
-}
-.background_Light{
-    background-color: var(--element-color-light);
-}
-.background_Dark{
-    background-color: var(--element-color-dark);
-}
-.background_Magic{
-    background-color: var(--element-color-magic);
-}
+.bold{font-weight: bold;}
+.italic{font-style: italic;}
+.pointer {cursor: pointer;}
+.hidden{display: none;}
+.pointer{cursor: pointer;}
+.error{border-color: #ffaaaa;}
+.color_Fire{color: var(--element-color-fire);}
+.color_Wind{color: var(--element-color-wind);}
+.color_Water{color: var(--element-color-water);}
+.color_Light{color: var(--element-color-light);}
+.color_Dark{color: var(--element-color-dark);}
+.color_Magic{color: var(--element-color-magic);}
+.border_Fire{border-color: var(--element-color-fire);}
+.border_Wind{border-color: var(--element-color-wind);}
+.border_Water{border-color: var(--element-color-water);}
+.border_Light{border-color: var(--element-color-light);}
+.border_Dark{border-color: var(--element-color-dark);}
+.border_Magic{border-color: var(--element-color-magic);}
+.background_Fire{background-color: var(--element-color-fire);}
+.background_Wind{background-color: var(--element-color-wind);}
+.background_Water{background-color: var(--element-color-water);}
+.background_Light{background-color: var(--element-color-light);}
+.background_Dark{background-color: var(--element-color-dark);}
+.background_Magic{background-color: var(--element-color-magic);}
 
 /* Star colors. */
-img.star{
-    
-}
-img.star.star_silver{
-    filter: var(--star-filter-silver);
-}
-img.star.star_gold{
-    filter: var(--star-filter-gold);
-}
-img.star.star_purple{
-    filter: var(--star-filter-purple);
-}
-img.star.star_red{
-    filter: var(--star-filter-red);
-}
+img.star.star_silver{filter: var(--star-filter-silver);}
+img.star.star_gold{filter: var(--star-filter-gold);}
+img.star.star_purple{filter: var(--star-filter-purple);}
+img.star.star_red{filter: var(--star-filter-red);}
 
-html {
-    height: 100%;
-}
+html {height: 100%;}
 body{
     background-color: var(--global-background);
     color: var(--global-color);
@@ -178,8 +151,8 @@ a:hover{
 }
 header{
     border-bottom: var(--header-border);
-    border-left: var(--header-border);
-    border-right: var(--header-border);
+    /*border-left: var(--header-border);
+    border-right: var(--header-border);*/
     border-bottom-right-radius: var(--header-border-radius);
     border-bottom-left-radius: var(--header-border-radius);
     margin: 0 0 1em 0;
@@ -191,41 +164,52 @@ header div#logo{
     margin: auto;
     display: inline-block;
     vertical-align: middle;
-    width: 14em;
+    width: 10em;
     text-align: center;
+    float: left;
 }
 header div#logo img#logo_img{
-    max-width: 14em;
+    max-width: 8em;
+    max-height: 4em;
 }
 header div#logo h1#logo_text{
     font-style: italic;
-    margin: -2em auto -0.7em auto;
-    text-shadow: 0 0 0.3em var(--ui-color-a-shadow), 0 0 0.3em var(--ui-color-a-shadow), 0 0 0.3em var(--ui-color-a-shadow), 0 0 0.3em var(--ui-color-a-shadow), 0 0 0.4em var(--ui-color-a-shadow), 0 0 0.4em var(--ui-color-a-shadow), 0 0 0.4em var(--ui-color-a-shadow), 0 0 1em var(--ui-color-a-shadow), 0 0 1em var(--ui-color-a-shadow);
-}
-header div#logo h1#logo_text span.large{
-    font-size: 150%;
+    margin: -1.2em auto -0.7em auto;
+    text-shadow: 0 0 0.1em var(--ui-color-a-shadow), 0 0 0.1em var(--ui-color-a-shadow);
 }
+header div#logo h1#logo_text span.large{font-size: 90%;}
 header div#logo h1#logo_text span.small{
-    font-size: 70%;
+    font-size: 60%;
     margin-left: -0.5em;
 }
 header nav{
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 110%;
+    display: block;
+    height: 2em;
+    margin-left: 8em;
 }
 header nav a{
+    font-size: 110%;
     font-weight: bold;
     text-transform: capitalize;
     font-variant: small-caps;
-    margin: 0.5em;
+    margin: 0 -0.2em 0 0; /* -0.2 to compensate for strange space. */
     text-decoration: none;
     position: relative;
     transition: all .4s ease-in-out;
+    color: var(--nav-color);
+    border-left: var(--nav-separator);
+    padding: 0.3em;
+    text-align: center;
+    display: inline-block;
+    vertical-align: middle;
+    text-shadow: var(--nav-shadow);
 }
+header nav a:last-of-type{border-right: var(--nav-separator)}
+
 header nav a:hover{
-    color: #333333;
-    text-shadow: 0 0 0.7em #ffffff;
+    background-color: var(--nav-background-hover);
+    color: var(--nav-color-hover);
+    text-shadow: var(--nav-shadow-hover);
 }
 @media screen and (max-width : 990px){
     header nav a{
@@ -241,8 +225,8 @@ footer{
     font-size: 80%;
     text-align: center;
     border-top: var(--header-border);
-    border-left: var(--header-border);
-    border-right: var(--header-border);
+    /*border-left: var(--header-border);
+    border-right: var(--header-border);*/
     border-top-right-radius: var(--header-border-radius);
     border-top-left-radius: var(--header-border-radius);
     margin: 2em 0 0 0;
@@ -267,83 +251,92 @@ footer table#footer_table td{
         line-height: 0.9em;
     }
 }
-input[type=button], input[type=submit]{
+input, select, a.a_button{
     font-size: 100%;
-    font-weight: bold;
-    padding: 0.3em 1em 0.3em 1em;
-    background-color: #351e0b;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.5em;
-    text-shadow: 0 0 0.2em #000000;
+    text-transform: capitalize;
+    font-variant: small-caps;
     cursor: pointer;
-    box-shadow: 0 0 0.3em #000000;
-}
-input[type=text], input[type=number], input[type=date]{
-    font-size: 80%;
-    font-weight: bold;
-    padding: 0 0.3em;
-    background-color: #351e0b;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.5em;
-    box-shadow: 0 0 0.3em #000000;
-}
-input[type=number]{
-    width: 3em;
-}
+    color: var(--input-color);
+    font-weight: var(--input-font-weight);
+    padding: var(--input-padding);
+    background: var(--input-background);
+    border: var(--input-border);
+    border-radius: var(--input-border-radius);
+    text-shadow: var(--input-text-shadow);
+    box-shadow: var(--input-box-shadow);
+}
+input[type=button], input[type=submit]{padding: var(--input-button-padding);}
+input[type=text], input[type=number], input[type=date], select{font-size: 80%;}
+input[type=number]{width: 3em;}
+select[multiple]{scrollbar-width: none;}
 input[type=checkbox]{
-    font-weight: bold;
-    background-color: #351e0b;
-    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;
+    display: none;
+    margin-left: -2em;
+    overflow: hidden;
 }
-select{
-    font-size: 80%;
-    font-weight: bold;
-    padding: 0 0.1em;
-    background-color: #351e0b;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.5em;
-    text-shadow: 0 0 0.2em #000000;
+input[type=checkbox] + label{
+    display: inline-block;
+    vertical-align: middle;
     cursor: pointer;
-    box-shadow: 0 0 0.3em #000000;
 }
-a.a_button{ /* Links that look like buttons. */
-    font-size: 100%;
+input[type=checkbox]:not(:checked) + label:before{
+    content: " ";
+    text-align: center;
     font-weight: bold;
-    padding: 0.3em 1em 0.3em 1em;
-    background-color: #351e0b;
-    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;
+    color: var(--input-color);
+    text-shadow: var(--input-text-shadow);
+    line-height: 0.8em;
+    padding-top: 0.1em;
     display: inline-block;
+    vertical-align: middle;
+    width: 0.8em;
+    height: 0.8em;
+    margin-right: 0.5em;
+    border: 0.2em solid var(--ui-color-border);
+    border-radius: var(--input-border-radius);
+    box-shadow: var(--input-box-shadow);
+    background: var(--input-background-unchecked);
+}
+input[type=checkbox]:checked + label:before{
+    content: "+";
+    text-align: center;
+    font-weight: bold;
+    color: var(--input-color);
+    text-shadow: var(--input-text-shadow);
+    line-height: 0.8em;
+    padding-top: 0.1em;
+    display: inline-block;
+    vertical-align: middle;
+    width: 0.8em;
+    height: 0.8em;
+    margin-right: 0.5em;
+    border: 0.2em solid var(--ui-color-border);
+    border-radius: var(--input-border-radius);
+    box-shadow: var(--input-box-shadow);
+    background: var(--input-background-checked);
 }
-::placeholder {
-    color: #777777;
-}
+::placeholder {color: var(--input-color-placeholder);}
 
 section{
     text-align: left;
-    border: 0.2em solid #f2c920;
-    border-radius: 0.5em;
-    padding: 0.5em;
-    margin: 0.2em 2em 0.5em 2em;
+    border: var(--section-border);
+    border-radius: var(--section-border-radius);
+    padding: var(--section-padding);
+    margin: var(--section-margin);
 }
 
 section h2{
-    margin: -0.25em -0.25em 0.5em -0.25em;
-    border-bottom: 0.1em solid #f2c920;
-    background-color: #000000bb;
+    margin: var(--section-title-margin);
+    border-bottom: var(--section-border);
+    background-color: var(--section-title-background);
+    border-top-left-radius: var(--section-title-border-radius);
+    border-top-right-radius: var(--section-title-border-radius);
+    padding: var(--section-title-padding);
+    font-size: var(--section-title-font-size);
+    font-weight: var(--section-title-font-weight);
     text-align: left;
-    border-top-left-radius: 0.25em;
-    border-top-right-radius: 0.25em;
-    padding: 0.25em 0 0.25em 2em;
-    font-size: 200%;
-    font-weight: bold;
+    text-transform: capitalize;
+    font-variant: small-caps;
 }
 @media screen and (max-width : 990px){
     section h2{
@@ -355,14 +348,14 @@ section h2{
 section.list{
     display: block;
     text-align: center;
-    background-color: #331100;
+    background-color: var(--section-background-list);
 }
 
 
 /* Main content, when it a single monster, rune... */
 section.content{
     text-align: center;
-    background-color: #553311;
+    background-color: var(--section-background-content);
 }
 
 
@@ -401,70 +394,46 @@ div.rune_panel img.rune_base{
     top: 0;
     left: 0;
 }
-div.rune_panel.rune_ancient_1 img.rune_base{
-    filter: brightness(150%) contrast(90%) saturate(100%) drop-shadow(0 0 0.3em #ffffff) drop-shadow(0 0 0.1em #ffffff);
-}
-div.rune_panel.rune_slot_1 img.rune_base{
-    transform: rotate(0deg);
-}
-div.rune_panel.rune_slot_2 img.rune_base{
-    transform: rotate(57deg);
-}
-div.rune_panel.rune_slot_3 img.rune_base{
-    transform: rotate(123deg);
-}
-div.rune_panel.rune_slot_4 img.rune_base{
-    transform: rotate(180deg);
-}
-div.rune_panel.rune_slot_5 img.rune_base{
-    transform: rotate(237deg);
-}
-div.rune_panel.rune_slot_6 img.rune_base{
-    transform: rotate(303deg);
-}
+div.rune_panel.rune_ancient_1 img.rune_base{filter: brightness(150%) contrast(90%) saturate(100%) drop-shadow(0 0 0.3em #ffffff) drop-shadow(0 0 0.1em #ffffff);}
+div.rune_panel.rune_slot_1 img.rune_base{transform: rotate(0deg);}
+div.rune_panel.rune_slot_2 img.rune_base{transform: rotate(57deg);}
+div.rune_panel.rune_slot_3 img.rune_base{transform: rotate(123deg);}
+div.rune_panel.rune_slot_4 img.rune_base{transform: rotate(180deg);}
+div.rune_panel.rune_slot_5 img.rune_base{transform: rotate(237deg);}
+div.rune_panel.rune_slot_6 img.rune_base{transform: rotate(303deg);}
 div.rune_panel img.rune_icon{
     position: absolute;
     height: 3em;
 }
 div.rune_panel.rune_slot_1 img.rune_icon{
-    top: 3.4em;
-    left: 3.1em;
+    top: 3.0em;
+    left: 2.7em;
 }
 div.rune_panel.rune_slot_2 img.rune_icon{
     top: 2.9em;
-    left: 2.5em;
+    left: 2.3em;
 }
 div.rune_panel.rune_slot_3 img.rune_icon{
     top: 2.2em;
-    left: 2.5em;
+    left: 2.3em;
 }
 div.rune_panel.rune_slot_4 img.rune_icon{
     top: 2em;
-    left: 3.1em;
+    left: 2.8em;
 }
 div.rune_panel.rune_slot_5 img.rune_icon{
     top: 2.2em;
-    left: 3.5em;
+    left: 3.3em;
 }
 div.rune_panel.rune_slot_6 img.rune_icon{
     top: 2.9em;
-    left: 3.5em;
-}
-div.rune_panel.rune_original_quality_normal img.rune_icon{
-    filter: sepia(100%) saturate(500%) grayscale(100%);
-}
-div.rune_panel.rune_original_quality_magic img.rune_icon{
-    filter: sepia(100%) saturate(500%) hue-rotate(60deg);
-}
-div.rune_panel.rune_original_quality_rare img.rune_icon{
-    filter: sepia(100%) saturate(500%) hue-rotate(120deg);
-}
-div.rune_panel.rune_original_quality_hero img.rune_icon{
-    filter: sepia(100%) saturate(500%) hue-rotate(230deg);
-}
-div.rune_panel.rune_original_quality_legend img.rune_icon{
-    filter: sepia(100%) saturate(500%) hue-rotate(330deg);
+    left: 3.3em;
 }
+div.rune_panel.rune_original_quality_normal img.rune_icon{filter: sepia(100%) saturate(500%) grayscale(100%);}
+div.rune_panel.rune_original_quality_magic img.rune_icon{filter: sepia(100%) saturate(500%) hue-rotate(60deg);}
+div.rune_panel.rune_original_quality_rare img.rune_icon{filter: sepia(100%) saturate(500%) hue-rotate(120deg);}
+div.rune_panel.rune_original_quality_hero img.rune_icon{filter: sepia(100%) saturate(500%) hue-rotate(230deg);}
+div.rune_panel.rune_original_quality_legend img.rune_icon{filter: sepia(100%) saturate(500%) hue-rotate(330deg);}
 div.rune_panel span.rune_stars{
     position: absolute;
     width: 9em;
@@ -478,9 +447,7 @@ div.rune_panel span.rune_stars img.star{
     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);
-}
+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);}
 div.rune_panel span.rune_level{
     font-size: 130%;
     font-weight: bold;
@@ -492,9 +459,7 @@ div.rune_panel span.rune_level{
 div.rune_panel span.rune_level::before {
   content: "+";
 }
-div.rune_panel.rune_level_15 span.rune_level{
-    color: #ff6f2d;
-}
+div.rune_panel.rune_level_15 span.rune_level{color: #ff6f2d;}
 /**
  * /Rune boxes
  */
@@ -524,6 +489,7 @@ div.monster_panel span.stars{
     position: absolute;
     top: 0.4em;
     right: 0.5em;
+    pointer-events: none;
 }
 @media screen and (max-width : 990px){
     div.monster_panel span.stars{
@@ -533,9 +499,10 @@ div.monster_panel span.stars{
 }
 
 div.monster_panel span.stars img.star{
-    width: 1em;
-    height: 1em;
-    margin-left: -0.4em;
+    width: 1.3em;
+    height: 1.3em;
+    margin-left: -0.65em;
+    pointer-events: none;
 }
 @media screen and (max-width : 990px){
     div.monster_panel span.stars img.star{
@@ -563,18 +530,16 @@ div.monster_panel img.monster{
 
 div.monster_panel span.level{
     position: relative;
-    bottom: 1.6em;
     font-weight: bold;
     color: #000;
-    text-shadow: 0 0 0.1em #fff, 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
-    font-size: 100%;
-    right: -1.5em;
-    bottom: 1.5em;
+    text-shadow: 0 0 0.1em #fff, 0 0 0.1em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.5em #fff, 0 0 0.5em #fff;
+    font-size: 2.5em;
+    width: 90%;
+    text-align: right;
+    bottom: 1.3em;
     z-index: 1;
-}
-
-div.monster_panel span.level::before {
-  content: "Lv. ";
+    pointer-events: none;
+    display: block;
 }
 
 /**
@@ -593,9 +558,9 @@ table.rune{
     position: relative;
     border-radius: 1em;
     margin: 0.5em;
-}
-table.rune{
+    background-color: #7d6640;
     font-size: 70%;
+    border: 0.3em solid #3c2929;
 }
 table.rune td.icon div.assigned{
     max-width: 2.5em;
@@ -611,38 +576,19 @@ table.rune td.icon div.assigned img.monster_image{
     border-width: 0.2em;
     border-radius: 15%;
 }
-table.rune td.icon{
-    border-bottom: 0.2em solid #777777;
-    border-left: 0.2em solid #777777;
-    border-top: 0.2em solid #777777;
-    background-color: #655c59;
-}
-table.rune td.icon div.rune_panel{
-    font-size: 70%;
-}
-table.rune td.stats{
-    border-bottom: 0.2em solid #777777;
-    border-top: 0.2em solid #777777;
-    background-color: #655c59;
-    width: 8em;
-}
+table.rune td.icon div.rune_panel{font-size: 70%;}
+table.rune td.stats{width: 8em;}
 
-table.rune td.stats table{
-    font-size: 90%;
-}
+table.rune td.stats table{font-size: 90%;}
 
 table.rune td.stats table tr.main_stat{
     font-weight: bold;
     font-size: 110%;
 }
 
-table.rune td.stats table tr.innate_stat{
-    font-style: italic;
-}
+table.rune td.stats table tr.innate_stat{font-style: italic;}
 
-table.rune td.stats table td.stat{
-    text-align: right;
-}
+table.rune td.stats table td.stat{text-align: right;}
 table.rune td.stats table td.value{
     text-align: left;
     padding-left: 0.2em;
@@ -656,9 +602,7 @@ table.rune td.stats table td.value span.grind{
     font-weight: bold;
     margin-left: -0.4em;
 }
-table.rune td.stats table td.value span.grind_{
-    display: none;
-}
+table.rune td.stats table td.value span.grind_{display: none;}
 table.rune td.stats table td.value img{
     width: 1em;
     height: 1em;
@@ -668,20 +612,11 @@ table.rune td.stats table td.value img{
 
 table.rune td.details{
     padding-left: 0.5em;
-    border-bottom: 0.2em solid #777777;
-    border-right: 0.2em solid #777777;
-    border-top: 0.2em solid #777777;
-    background-color: #655c59;
     width: 16em;
-}
-
-table.rune td.details table.table_details{
     font-size: 80%;
 }
 
-table.rune td.details table.table_details td.title{
-    text-align: right;
-}
+table.rune td.details table.table_details td.title{text-align: right;}
 table.rune td.details table.table_details td.value{
     text-align: left;
     padding-left: 1em;
@@ -696,25 +631,15 @@ table.rune td.details table.table_details span.quality{
     width: 5em;
 }
 
-table.rune td.details table.table_details span.quality.quality_normal{
-    background-color: #cccccc;
-}
+table.rune td.details table.table_details span.quality.quality_normal{background-color: #cccccc;}
 
-table.rune td.details table.table_details span.quality.quality_magic{
-    background-color: #55ff55;
-}
+table.rune td.details table.table_details span.quality.quality_magic{background-color: #55ff55;}
 
-table.rune td.details table.table_details span.quality.quality_rare{
-    background-color: #15c6e1;
-}
+table.rune td.details table.table_details span.quality.quality_rare{background-color: #15c6e1;}
 
-table.rune td.details table.table_details span.quality.quality_hero{
-    background-color: #ad7fa8;
-}
+table.rune td.details table.table_details span.quality.quality_hero{background-color: #ad7fa8;}
 
-table.rune td.details table.table_details span.quality.quality_legend{
-    background-color: #f57900;
-}
+table.rune td.details table.table_details span.quality.quality_legend{background-color: #f57900;}
 /**
  * /Rune table
  */
@@ -727,7 +652,7 @@ table.rune td.details table.table_details span.quality.quality_legend{
 div.craft_panel{
     width: 3em;
     height: 3em;
-    border: 0.2em solid #000000;
+    border: 0.1em solid #3c2929;
     border-radius: 0.5em;
     position: relative;
     text-align: center;
@@ -763,24 +688,12 @@ div.craft_panel img.craft_icon{
     top: 0.6em;
     left: 1em;
 }
-div.craft_panel.craft_ancient_1 img.craft_base{
-    filter: brightness(150%) contrast(90%) saturate(100%) drop-shadow(0 0 0.3em #ffffff) drop-shadow(0 0 0.1em #ffffff);
-}
-div.craft_panel.craft_quality_normal img.craft_base{
-    filter: sepia(100%) saturate(500%) grayscale(100%);
-}
-div.craft_panel.craft_quality_magic img.craft_base{
-    filter: sepia(100%) saturate(500%) hue-rotate(60deg);
-}
-div.craft_panel.craft_quality_rare img.craft_base{
-    filter: sepia(100%) saturate(500%) hue-rotate(120deg);
-}
-div.craft_panel.craft_quality_hero img.craft_base{
-    filter: sepia(100%) saturate(500%) hue-rotate(230deg);
-}
-div.craft_panel.craft_quality_legend img.craft_base{
-    filter: sepia(100%) saturate(500%) hue-rotate(330deg);
-}
+div.craft_panel.craft_ancient_1 img.craft_base{filter: brightness(150%) contrast(90%) saturate(100%) drop-shadow(0 0 0.3em #ffffff) drop-shadow(0 0 0.1em #ffffff);}
+div.craft_panel.craft_quality_normal img.craft_base{filter: sepia(100%) saturate(500%) grayscale(100%);}
+div.craft_panel.craft_quality_magic img.craft_base{filter: sepia(100%) saturate(500%) hue-rotate(60deg);}
+div.craft_panel.craft_quality_rare img.craft_base{filter: sepia(100%) saturate(500%) hue-rotate(120deg);}
+div.craft_panel.craft_quality_hero img.craft_base{filter: sepia(100%) saturate(500%) hue-rotate(230deg);}
+div.craft_panel.craft_quality_legend img.craft_base{filter: sepia(100%) saturate(500%) hue-rotate(330deg);}
 div.craft_panel span.craft_stat{
     display: block;
     width: 100%;