Several improements, mostly in UI.

 - Fix a blank screen error in the run section.
 - Fix the monster sorting in the skill-up report.
 - CSS improvements is sections that looked wrong on mobile devices.
 - Filter windows are now collapsable.
 - Some inventory items fixed.
 - Added sme of the missing item images.

application/action/edit_profile.php

@@ -27,7 +27,6 @@
             $mail = filter_input(INPUT_POST, 'mail');
             // TODO: Validate mail
             $s = $db->prepare('UPDATE player SET mail = :mail WHERE uid = :uid;');
-error_log("UPDATE player SET mail = '$mail' WHERE uid = '$player';");
             $s->bindValue(':uid', $player);
             $s->bindValue(':mail', $mail);
             if(!$s->execute()){

application/action/new_team.php

@@ -13,7 +13,6 @@
         $area_type = filter_input(INPUT_POST, 'area_type');
         $area = filter_input(INPUT_POST, 'area');
         $stage = filter_input(INPUT_POST, 'stage');
-        error_log("STAGE1: " . $stage);
         $difficulty = filter_input(INPUT_POST, 'difficulty');
         $ids = filter_input(INPUT_POST, 'ids');
         $name = filter_input(INPUT_POST, 'name');
@@ -136,15 +135,10 @@
         if ($id_count != sizeof($unique_id)){
             return -4;
         }
-        
-        
-        error_log("STAGE2: " . $stage);
-        
         $s = "SELECT CASE WHEN MAX(id) IS NULL THEN 1 ELSE MAX(id) + 1 END AS id FROM team;";
         $q = $db->query($s);
         $r = $q->fetchArray(SQLITE3_ASSOC);
         $team_id = $r["id"];
-        
         $statement = $db->prepare('INSERT INTO team (uid, id, name, description, area_type, area, stage, difficulty) VALUES (:uid, :id, :name, :description, :area_type, :area, :stage, :difficulty);');
         $statement->bindValue(':uid', $player);
         $statement->bindValue(':id', $team_id);
@@ -155,16 +149,13 @@
         $statement->bindValue(':stage', $stage);
         $statement->bindValue(':difficulty', $difficulty);
         $res = $statement->execute();
-        
         if (!$res){
             return -5;
         }
-        
         foreach ($id as $i){
             $s = "INSERT INTO team_unit VALUES ($team_id, $i);";
             $db->query($s);
         }
-        
         return 0;
     }
 ?>

application/bin/log-profile.py

@@ -388,6 +388,10 @@ def parseInventory(db, data):
         # TODO: Master id?
         amount = item["item_quantity"]
         insert(db, "inventory", (uid, id, type, amount))
+    # Fix rune craft item type.
+    cursor = db.cursor()
+    cursor.execute("UPDATE inventory SET type = 27 WHERE type = 29 AND id IN (2001, 4001, 4002, 4003, 9001, 9002, 9003, 8001);")
+    cursor.close()
 
 """
 Parses summon stone list (table summon_special).

application/entity/Custom_Filter.php

@@ -67,7 +67,7 @@
             $this->uid = $r["uid"];
             $this->page = $r["page"];
             $this->name = e($r["name"]);
-            $this->description = e($r["description"]);
+            $this->description = $r["description"]; // Must be properly formated!
             $this->condition = $r["condition"];
         }
 

application/entity/Inventory.php

@@ -48,9 +48,10 @@
          * building, populating it and it's items.
          *
          * @param SQLite3 $db Connection to the database.
-         * @param int $id Building identifier.
+         * @param int $id Item identifier.
+         * @param int $type Item type identifier. Optional, will try to guess if null.
          */
-        public function __construct($db, $id){
+        public function __construct($db, $id, $type = null){
             global $path;
             global $INVENTORY_TYPE;
             parent::__construct($db);
@@ -64,13 +65,17 @@
                   inventory.amount AS amount
                 FROM
                   inventory,
+                  k_inventory,
                   k_inventory_type
-                LEFT JOIN k_inventory ON
-                   k_inventory.id = inventory.id
                 WHERE
                   inventory.type = k_inventory_type.id AND
-                  inventory.id = $id;
+                  inventory.id = k_inventory.id AND
+                  inventory.type = k_inventory.type AND
+                  inventory.id = $id
             ";
+            if ($type != null){
+                $s .= "AND inventory.type = $type";
+            }
             $q = $this->db->query($s);
             $r = $q->fetchArray(SQLITE3_ASSOC);
             $this->type = $r["type"];

application/entity/K_Unit.php

@@ -394,11 +394,9 @@
               SELECT id
               FROM k_unit_transformation
               WHERE  unit = " . $this->id . ";";
-            error_log("TRANSFORMATION: " . $s);
             $q = $this->db->query($s);
             $r = $q->fetchArray(SQLITE3_ASSOC);
             if ($r){
-                error_log("LOADING TRANSFORMATION");
                 $this->transformation = new K_Unit_Transformation($this->db, $r["id"]);
             }
         }

application/entity/Unit.php

@@ -349,7 +349,6 @@
                 unit.building = building.id AND
                 building.building = '" . $BUILDING["MONSTER_STORAGE"] . "';
             ";
-            error_log('S: ' . $s);
             $q = $this->db->query($s);
             if ($q->fetchArray(SQLITE3_ASSOC) == false){
                 $this->in_storage = false;
@@ -367,7 +366,7 @@
             $this->teams = [];
             $s = "
               SELECT DISTINCT team.id AS id
-              FROM 
+              FROM
                 team,
                 team_unit
               WHERE
@@ -461,7 +460,6 @@
         public function are_skills_maxed(){
             $maxed = true;
             for ($i = 0; $i < sizeof($this->unit->skill); $i ++){
-                error_log("    " . $this->skill_levels[$i] . "/" . $this->unit->skill[$i]->max_level);
                 if ($this->unit->skill[$i]->max_level > $this->skill_levels[$i]){
                     $maxed = false;
                     break;

application/page/Home_Page.php

@@ -17,6 +17,11 @@
          */
         public $uid;
 
+        /**
+         * Player level.
+         */
+        public $level;
+
         /**
          * Player name.
          */
@@ -115,6 +120,7 @@
               SELECT
                 uid,
                 name,
+                level,
                 country,
                 experience,
                 rep,
@@ -143,6 +149,7 @@
             if ($r){
                 $this->uid = $r["uid"];
                 $this->name = $r["name"];
+                $this->level = $r["level"];
                 $this->country = $r["country"];
                 $this->experience = $r["experience"];
                 if (strlen($r["rep"]) > 0){
@@ -195,57 +202,66 @@
                 array_push($this->decoration, new Decoration($db, $r["decoration"]));
             }
             $s = "
-                SELECT id
+                SELECT
+                  id,
+                  type
                 FROM inventory
                 WHERE
                   uid = '$UID' AND
                   type = " . $INVENTORY_TYPE["SCROLL"] . " AND
-                  amount > 0;
+                  amount > 0
+                ORDER BY inventory.type;
             ";
             $q = $this->db->query($s);
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->inventory_scroll, new Inventory($db, $r["id"]));
+                array_push($this->inventory_scroll, new Inventory($db, $r["id"], $r["type"]));
             }
             // Rune crafting items are marked as generic crafting.
             $s = "
-                SELECT inventory.id
+                SELECT
+                  inventory.id AS id,
+                  inventory.type AS type
                 FROM
-                  inventory,
-                  k_inventory
+                  inventory
                 WHERE
                   inventory.uid = '$UID' AND
-                  inventory.id = k_inventory.id AND
-                  k_inventory.type = " . $INVENTORY_TYPE["RUNE_CRAFT"] . " AND
-                  amount > 0;
+                  inventory.type = " . $INVENTORY_TYPE["RUNE_CRAFT"] . " AND
+                  amount > 0
+                ORDER BY inventory.id;
             ";
             $q = $this->db->query($s);
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->inventory_craft_rune, new Inventory($db, $r["id"]));
+                array_push($this->inventory_craft_rune, new Inventory($db, $r["id"], $r["type"]));
             }
             $s = "
-                SELECT inventory.id
+                SELECT
+                  inventory.id AS id,
+                  inventory.type AS type
                 FROM
-                  inventory,
-                  k_inventory
+                  inventory
                 WHERE
                   inventory.uid = '$UID' AND
-                  inventory.id = k_inventory.id AND
-                  k_inventory.type = " . $INVENTORY_TYPE["CRAFT_STUFF"] . " AND
-                  amount > 0;
+                  inventory.type = " . $INVENTORY_TYPE["CRAFT_STUFF"] . " AND
+                  amount > 0
+                ORDER BY inventory.id;
             ";
             $q = $this->db->query($s);
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->inventory_craft, new Inventory($db, $r["id"]));
+                array_push($this->inventory_craft, new Inventory($db, $r["id"], $r["type"]));
             }
             $s = "
-                SELECT inventory.id AS id
+                SELECT
+                  inventory.id AS id,
+                  inventory.type AS type
                 FROM
                   inventory,
                   k_inventory
                 WHERE
+                  inventory.id = k_inventory.id AND
+                  inventory.type = k_inventory.type AND
                   inventory.uid = '$UID' AND
-                  k_inventory.id = inventory.id AND
-                  k_inventory.type = " . $INVENTORY_TYPE["ESSENCES"] . "
+                  inventory.type = " . $INVENTORY_TYPE["ESSENCES"] . " AND
+                  amount > 0
                 ORDER BY
                   upper(name) NOT LIKE '%MAGIC%',
                   upper(name) NOT LIKE '%FIRE%',
@@ -260,7 +276,7 @@
             ";
             $q = $this->db->query($s);
             while ($r = $q->fetchArray(SQLITE3_ASSOC)){
-                array_push($this->inventory_essence, new Inventory($db, $r["id"]));
+                array_push($this->inventory_essence, new Inventory($db, $r["id"], $r["type"]));
             }
             $this->title = "SWDB";
             $this->description = "Summoners War DataBase";

application/page/Report_Runecraft_Page.php

@@ -46,7 +46,6 @@
             $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 = "";

application/page/Report_Skillup_Page.php

@@ -48,7 +48,7 @@
                 array_push($this->units, new Unit($db, $r_mon["id"]));
             }
             $this->title = "Urgent skill-ups - SWDB";
-            $this->description = "Monster in need os skilling up";
+            $this->description = "Monster in need of skilling up";
             $this->canonical = $root . "report/skillups";
         }
 
@@ -99,41 +99,45 @@
          */
         private function build_query(){
             global $UID;
-            $s =
-              "SELECT DISTINCT " .
-              "  unit.id AS id, " .
-              "  sum(unit_skill.level * ((k_skill.slot + 1) / 2)) AS ponderated_lvl, " .
-              "  sum(unit_skill.level) AS lvl, " .
-              "  sum(k_skill.max_level * ((k_skill.slot + 1) / 2)) AS ponderated_max_lvl, " .
-              "  sum(k_skill.max_level) AS max_lvl " .
-              "FROM " .
-              "  unit, " .
-              "  k_unit, " .
-              "  unit_skill, " .
-              "  k_unit_skill, " .
-              "  k_skill " .
-              "WHERE " .
-              "  unit.uid = '$UID' AND " .
-              "  unit.unit = k_unit.id AND " .
-              "  unit_skill.unit = unit.id AND " .
-              "  unit_skill.skill = k_unit_skill.skill AND " .
-              "  k_unit.id = k_unit_skill.unit AND " .
-              "  k_skill.id = k_unit_skill.skill AND " .
-              "  unit.stars >= " . $this->filters["min_stars"] . " AND " .
-              "  unit.stars <= " . $this->filters["max_stars"] . " ";
+            $s = "
+              SELECT DISTINCT
+                unit.id AS id,
+                sum(unit_skill.level * (CAST(k_skill.slot + 1 AS FLOAT) / 2.0)) AS ponderated_lvl,
+                sum(unit_skill.level) AS lvl,
+                sum(k_skill.max_level * (CAST(k_skill.slot + 1 AS FLOAT) / 2.0)) AS ponderated_max_lvl,
+                sum(k_skill.max_level) AS max_lvl
+              FROM
+                unit,
+                k_unit,
+                unit_skill,
+                k_unit_skill,
+                k_skill
+              WHERE
+                unit.uid = '$UID' AND
+                unit.unit = k_unit.id AND
+                unit_skill.unit = unit.id AND
+                unit_skill.skill = k_unit_skill.skill AND
+                k_unit.id = k_unit_skill.unit AND
+                k_skill.id = k_unit_skill.skill AND
+                k_skill.max_level > 1 AND
+                unit.stars >= " . $this->filters["min_stars"] . " AND
+                unit.stars <= " . $this->filters["max_stars"]
+            ;
             if ($this->filters["2a"]){
-                $s = $s .
-                  "  AND (( " .
-                  "    k_unit.natural_stars >= " . $this->filters["min_natural_stars"] . " AND " .
-                  "    k_unit.natural_stars <= " . $this->filters["max_natural_stars"] . " " .
-                  "  ) OR ( " .
-                  "    k_unit.base_stars - k_unit.natural_stars > 1 " .
-                  "  )) ";
+                $s = $s . "
+                    AND ((
+                      k_unit.natural_stars >= " . $this->filters["min_natural_stars"] . " AND
+                      k_unit.natural_stars <= " . $this->filters["max_natural_stars"] . "
+                    ) OR (
+                      k_unit.base_stars - k_unit.natural_stars > 1
+                    ))
+                ";
             }
             else{
-                $s = $s .
-                  "  AND k_unit.natural_stars >= " . $this->filters["min_natural_stars"] . " AND " .
-                  "  k_unit.natural_stars <= " . $this->filters["max_natural_stars"] . " ";
+                $s = $s . "
+                    AND k_unit.natural_stars >= " . $this->filters["min_natural_stars"] . " AND
+                    k_unit.natural_stars <= " . $this->filters["max_natural_stars"]
+                ;
             }
             if (!$this->filters["in_storage"]){
                 // TODO
@@ -153,9 +157,6 @@
                     $s = $s . " AND k_unit.id <> 23015 AND k_unit.id <> 23005 ";
                 }
             }
-            //if (!$this->filters["2a"]){
-            //    $s = $s . " AND (k_unit.awakens_from IS NULL OR k_unit.awakens_to IS NOT NULL OR k_unit.base_stars - k_unit.natural_stars = 1) ";
-            //}
             if (!$this->filters["homunculus"]){
                 $s = $s . " AND k_unit.homunculus <> 1 ";
             }
@@ -164,13 +165,14 @@
             if (!$this->filters["maxed"]){
                 $s = $s . " HAVING ponderated_lvl < ponderated_max_lvl ";
             }
-            $s = $s .
-              "ORDER BY " .
-              "  ponderated_lvl * 100 / ponderated_max_lvl, " .
-              "  unit.stars DESC; " .
-              "  unit.level DESC, " .
-              "  lvl * 100 / max_lvl, " .
-              "  max_lvl - lvl DESC; ";
+            $s = $s . "
+              ORDER BY
+                CAST(ponderated_lvl AS FLOAT) / CAST(ponderated_max_lvl AS FLOAT),
+                unit.stars DESC,
+                unit.level DESC,
+                CAST(lvl AS FLOAT) / CAST(max_lvl AS FLOAT),
+                max_lvl - lvl DESC;
+            ";
             return $s;
         }
     }

application/view/catalog.php

@@ -27,19 +27,42 @@
         <meta name='twitter:image' content='<?=$page->icon?>'/>
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
+        <script>
+
+            /**
+             * Shows or hiddes the filters panel.
+             */
+            function toggleFilters(){
+                var content = document.getElementById('filters_content');
+                var slid = document.getElementById('filters_slid');
+                if (content.style.maxHeight != '30em'){
+                    content.style.maxHeight = '30em';
+                    slid.style.transform = 'rotate(90deg)';
+                }
+                else{
+                    content.style.maxHeight = '0px';
+                    slid.style.transform = 'rotate(0deg)';
+                }
+            };
+        </script>
     </head>
     <body>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
         <section class='filters'>
-            <h2>
+            <h2 id='filters_title' onClick='toggleFilters();'>
+                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=$path["img"]["icon"]?>slid.png'/>
                 Catalog filters
             </h2>
+            <article id='filters_content'>
 <?php
-            $filters = $page->filters;
-            include __DIR__ . "/inc/filter_catalog.php";
+                $filters = $page->filters;
+                $custom_filters = $page->custom_filters;
+                include __DIR__ . "/inc/filter_catalog.php";
 ?>
+            </article>
+
         </section> <!-- #filters -->
         <section class='list'>
             <h2>

application/view/fusion.php

@@ -27,44 +27,43 @@
         <meta name='twitter:image' content='<?=$page->icon?>'/>
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
+        <script>
+
+            /**
+             * Shows or hiddes the filters panel.
+             */
+            function toggleFilters(){
+                var content = document.getElementById('filters_content');
+                var slid = document.getElementById('filters_slid');
+                if (content.style.maxHeight != '30em'){
+                    content.style.maxHeight = '30em';
+                    slid.style.transform = 'rotate(90deg)';
+                }
+                else{
+                    content.style.maxHeight = '0px';
+                    slid.style.transform = 'rotate(0deg)';
+                }
+            };
+        </script>
     </head>
     <body>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
         <section class='filters'>
-            <h2>
-                Fusion filter
+            <h2 id='filters_title' onClick='toggleFilters();'>
+                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=$path["img"]["icon"]?>slid.png'/>
+                Fusion filters
             </h2>
-            <form action='/fusion/' method='get' id='filter_fusion' class='filter'>
-                <table>
-                    <tr>
-                        <td class='filter'>
-                            <span>Target:</span>
-                            <select name='product' id='filter_product'>
-                                <option value=''>All</option>
-<?php
-                                foreach ($page->products as $product){
-                                    if ($product->id == $page->filters["product"]){
-                                        $selected = "selected";
-                                    }
-                                    else{
-                                        $selected = "";
-                                    }
-?>
-                                     <option value='<?=$product->id?>' <?=$selected?>><?=$product->element_name?> <?=$product->name?></option>
+            <article id='filters_content'>
 <?php
-                                }
+                $filters = $page->filters;
+                $custom_filters = $page->custom_filters;
+                include __DIR__ . "/inc/filter_fusion.php";
 ?>
-                            </select>
-                        </td>
-                    </tr>
-                </table>
-                <div id='filter_apply'>
-                    <input type='submit' value='Apply'/>
-                </div>
-            </form>
-        </section><!-- #filters -->
+            </article>
+
+        </section> <!-- #filters -->
 <?php
         foreach ($page->fusion as $fusion){
 ?>

application/view/guild.php

@@ -73,26 +73,28 @@
                                     <?=$group->name?>
                                 </span>
                                 <img class='skill_group_image' alt='<?=$group->name?>' src='<?=$group->get_image()?>'/>
-                                <ul>
-                                    <li class='description'>
+                                <div class='skill_group_content'>
+                                    <span class='description'>
                                         <?=$group->description?>
-                                    </li>
+                                    </span>
+                                    <ul>
 <?php
-                                    foreach ($group->skills as $skill){
-                                        if ($skill->level > $page->guild->level){
-                                            $unavailable = "unavailable";
-                                        }
-                                        else{
-                                            $unavailable = "";
-                                        }
+                                        foreach ($group->skills as $skill){
+                                            if ($skill->level > $page->guild->level){
+                                                $unavailable = "unavailable";
+                                            }
+                                            else{
+                                                $unavailable = "";
+                                            }
 ?>
-                                        <li class='<?=$unavailable?>'>
-                                            Lv. <?=$skill->level?>: <?=$skill->effect?>
-                                        </li>
+                                            <li class='<?=$unavailable?>'>
+                                                Lv. <?=$skill->level?>: <?=$skill->effect?>
+                                            </li>
 <?php
-                                    }
+                                        }
 ?>
-                                </ul>
+                                    </ul>
+                                </div>
                             </div>
 <?php
                         }

application/view/home.php

@@ -42,7 +42,15 @@
             </h2>
             <article id='profile'>
                 <h3>
-                    <?=$page->name?>
+                    <span id='user_name'>
+                        <?=$page->name?>
+                    </span>
+                    <span id='user_level'>
+                        Lv. <?=$page->level?>
+                        <span id='user_exp'>
+                            (exp: <?=$page->experience?>)
+                        </span>
+                    </span>
                 </h3>
 <?php
                 if (isset($page->rep)){
@@ -86,11 +94,19 @@
                         Buildings
                     </h4>
 <?php
+                    $half = sizeof($page->building) / 2;
+                    $i = 0;
                     foreach ($page->building as $building){
+                        if ($i == $half){
+?>
+                            <br class='desktop'/>
+<?php
+                        }
 ?>
                         <?=html_building_panel($building)?>
 <?php
-                    }
+                        $i ++;
+                    }$i ++;
 ?>
                 </div>
                 <div id='decoration' class='profile_section'>
@@ -98,10 +114,18 @@
                         Decorations
                     </h4>
 <?php
+                    $half = sizeof($page->decoration) / 2;
+                    $i = 0;
                     foreach ($page->decoration as $decoration){
+                        if ($i == $half){
+?>
+                            <br class='desktop'/>
+<?php
+                        }
 ?>
                         <?=html_building_panel($decoration)?>
 <?php
+                        $i ++;
                     }
 ?>
                 </div>
@@ -110,10 +134,18 @@
                         Scrolls
                     </h4>
 <?php
+                    $half = sizeof($page->building) / 2;
+                    $i = 0;
                     foreach ($page->inventory_scroll as $item){
+                        if ($half > 6 && $i == $half){
+?>
+                            <br class='desktop'/>
+<?php
+                        }
 ?>
                         <?=html_item_panel($item)?>
 <?php
+                        $i ++;
                     }
 ?>
                 </div>
@@ -122,10 +154,17 @@
                         Rune crafting items
                     </h4>
 <?php
+                    $prev = 0;
                     foreach ($page->inventory_craft_rune as $item){
+                        if ($prev != 0 && $prev + 2000 < $item->id){
+?>
+                            <br class='desktop'/>
+<?php
+                        }
 ?>
                         <?=html_item_panel($item)?>
 <?php
+                        $prev = $item->id;
                     }
 ?>
                 </div>
@@ -134,10 +173,17 @@
                         Other crafting items
                     </h4>
 <?php
+                    $prev = 0;
                     foreach ($page->inventory_craft as $item){
+                        if ($prev != 0 && $prev < 5000 && $item->id > 5000){
+?>
+                            <br class='desktop'/>
+<?php
+                        }
 ?>
                         <?=html_item_panel($item)?>
 <?php
+                        $prev = $item->id;
                     }
 ?>
                 </div>
@@ -146,10 +192,17 @@
                         Essences
                     </h4>
 <?php
+                    $prev = "";
                     foreach ($page->inventory_essence as $item){
+                        if ($prev != "" && $prev != preg_split('/\s+/', $item->name)[2]){
+?>
+                            <br class='desktop'/>
+<?php
+                        }
 ?>
                         <?=html_item_panel($item)?>
 <?php
+                        $prev = preg_split('/\s+/', $item->name)[2];
                     }
 ?>
                 </div>

application/view/inc/filter_fusion.php

@@ -0,0 +1,28 @@
+<form action='/fusion/' method='get' id='filter_fusion' class='filter'>
+    <table>
+        <tr>
+            <td class='filter'>
+                <span>Target:</span>
+                <select name='product' id='filter_product'>
+                    <option value=''>All</option>
+<?php
+                    foreach ($page->products as $product){
+                        if ($product->id == $page->filters["product"]){
+                            $selected = "selected";
+                        }
+                        else{
+                            $selected = "";
+                        }
+?>
+                            <option value='<?=$product->id?>' <?=$selected?>><?=$product->element_name?> <?=$product->name?></option>
+<?php
+                    }
+?>
+                </select>
+            </td>
+        </tr>
+    </table>
+    <div id='filter_apply'>
+        <input type='submit' value='Apply'/>
+    </div>
+</form>

application/view/inc/filter_runs.php

@@ -11,7 +11,7 @@
             </td>
             <td class='filter'>
 <?php
-                $selected = [];
+                $selected = array_fill(0, sizeof($AREA_TYPE) + 1, "");
                 $selected[$filters["area_type"]] = "selected";
 ?>
                 <span>Region:</span>
@@ -33,7 +33,7 @@
             </td>
             <td class='filter'>
 <?php
-                $selected = [];
+                $selected = array_fill(0, 9002, "");
                 $selected[$filters["area"]] = "selected";
 ?>
                 <span>Area:</span>

application/view/monster.php

@@ -258,6 +258,17 @@
                 </table>
                 <table id='skills'>
                     <tr>
+<?php
+                        $colspan = sizeof($page->unit->unit->skill);
+                        if ($page->unit->unit->leader_skill){
+                            $colspan ++;
+                        }
+?>
+                        <th colspan='<?=$colspan?>'>
+                            Skills
+                        </th>
+                    </tr>
+                    <tr>
 <?php
                         if ($page->unit->unit->leader_skill){
 ?>
@@ -339,6 +350,24 @@
 <?php
                         }
                         foreach ($page->unit->unit->skill as $skill){
+?>
+                            <td>
+                                <span class='skill_formula'>
+                                    <?=$skill->multiplier_formula?>
+                                </span>
+                            </td>
+<?php
+                        }
+?>
+                    </tr>
+                    <tr>
+<?php
+                        if ($page->unit->unit->leader_skill){
+?>
+                            <td></td>
+<?php
+                        }
+                        foreach ($page->unit->unit->skill as $skill){
 ?>
                             <td>
                                 <span class='skill_effects'>
@@ -388,22 +417,11 @@
                         }
 ?>
                     </tr>
-                </table> <!-- #skills -->
-                <table id='skill_averages'>
-                    <tr>
-                        <td class='title'>
-                            Absolute skill-ups:
-                        </td>
-                        <td class='value'>
-                            <?=number_format($absolute_level * 100 / $absolute_max_level, 2)?>%
-                        </td>
-                    </tr>
                     <tr>
-                        <td class='title'>
-                            Ponderated skill-ups:
-                        </td>
-                        <td class='value'>
-                            <?=number_format($ponderated_level * 100 / $ponderated_max_level, 2)?>%
+                        <td colspan='<?=$colspan?>' id='skill_averages'>
+                            Absolute skill-ups: <?=number_format($absolute_level * 100 / $absolute_max_level, 2)?>%
+                            <br/>
+                            Ponderated skill-ups: <?=number_format($ponderated_level * 100 / $ponderated_max_level, 2)?>%
                         </td>
                     </tr>
                 </table>

application/view/monster_info.php

@@ -162,84 +162,39 @@
                             }
 ?>
                         </div> <!-- .extra -->
-                        <div class='skills'>
-<?php
-                            if ($page->monster[$i]->leader_skill){
-?>
-                                <div class='skill'>
-                                    <img class='skill_img' src='<?=$page->monster[$i]->leader_skill->get_image()?>'/>
-                                    <span class='skill_level'>
-                                        &nbsp;
-                                    </span>
-                                    <span class='skill_name'>
-                                        Leader skill
-                                    </span>
-                                    <span class='skill_description'>
-                                        <?=$page->monster[$i]->leader_skill->create_description()?>
-                                    </span>
-                                </div>
-<?php
-                            }
-                            foreach ($page->monster[$i]->skill as $skill){
-?>
-                                <div class='skill'>
-                                    <img class='skill_img' src='<?=$skill->get_image()?>'/>
-                                    <span class='skill_name'>
-                                        <?=$skill->name?>
-                                    </span>
-                                    <span class='skill_description'>
-                                        <?=$skill->description?>
-                                    </span>
-<?php
-                                    if (count($skill->effect) > 0){
-?>
-                                        <span class='skill_effects'>
+                        <table class='skills'>
+                            <tr>
 <?php
-                                            foreach ($skill->effect as $effect){
+                                $colspan = sizeof($page->monster[$i]->skill);
+                                if ($page->monster[$i]->leader_skill){
+                                    $colspan ++;
+                                }
 ?>
-                                                <img class='effect_img' title='<?=$effect->name?>' src='<?=$effect->get_image()?>'/>
+                                <th colspan='<?=$colspan?>'>
+                                    Skills
+                                </th>
+                            </tr>
+                            <tr>
 <?php
-                                            }
+                                if ($page->monster[$i]->leader_skill){
 ?>
+                                    <td class='skill'>
+                                        <img class='skill_img' src='<?=$page->monster[$i]->leader_skill->get_image()?>'/>
+                                        <span class='skill_level'>
+                                            &nbsp;
                                         </span>
+                                        <span class='skill_name'>
+                                            Leader skill
+                                        </span>
+                                        <span class='skill_description'>
+                                            <?=$page->monster[$i]->leader_skill->create_description()?>
+                                        </span>
+                                    </td>
 <?php
-                                    }
-                                    if ($skill->max_level > 1){
-?>
-                                        <table class='skill_up'>
-<?php
-                                            foreach ($skill->level as $level){
-                                                if ($level->level > 1){
-?>
-                                                    <tr>
-                                                        <td class='level'>
-                                                            Lv. <?=$level->level?>
-                                                        </td>
-                                                        <td class='description'>
-                                                            <?=$level->description?>
-                                                        </td>
-                                                    </tr>
-<?php
-                                                }
-                                            }
-?>
-                                        </table>
-<?php
-                                    }
-?>
-                                </div>
-<?php
-                            }
-?>
-                        </div> <!-- #skills -->
-<?php
-                        if ($page->monster[$i]->transformation != null){
-?>
-                            <div class='transformation_skills'>
-<?php
-                                foreach ($page->monster[$i]->transformation->skill as $skill){
+                                }
+                                foreach ($page->monster[$i]->skill as $skill){
 ?>
-                                    <div class='skill'>
+                                    <td class='skill'>
                                         <img class='skill_img' src='<?=$skill->get_image()?>'/>
                                         <span class='skill_name'>
                                             <?=$skill->name?>
@@ -248,6 +203,13 @@
                                             <?=$skill->description?>
                                         </span>
 <?php
+                                        if (strlen($skill->multiplier_formula) > 0){
+?>
+                                            <span class='skill_formula'>
+                                                <?=$skill->multiplier_formula?>
+                                            </span>
+<?php
+                                        }
                                         if (count($skill->effect) > 0){
 ?>
                                             <span class='skill_effects'>
@@ -284,11 +246,105 @@
 <?php
                                         }
 ?>
-                                    </div>
+                                    </td>
 <?php
                                 }
 ?>
-                            </div> <!-- #transformation_skills -->
+                            </tr>
+                        </table> <!-- #skills -->
+<?php
+                        if ($page->monster[$i]->transformation != null){
+?>
+                            <table class='skills'>
+                                <tr>
+<?php
+                                    $colspan = sizeof($page->monster[$i]->skill);
+                                    if ($page->monster[$i]->leader_skill){
+                                        $colspan ++;
+                                    }
+?>
+                                    <th colspan='<?=$colspan?>'>
+                                        Skills (transformation)
+                                    </th>
+                                </tr>
+                                <tr>
+<?php
+                                    if ($page->monster[$i]->leader_skill){
+?>
+                                        <td class='skill'>
+                                            <img class='skill_img' src='<?=$page->monster[$i]->leader_skill->get_image()?>'/>
+                                            <span class='skill_level'>
+                                                &nbsp;
+                                            </span>
+                                            <span class='skill_name'>
+                                                Leader skill
+                                            </span>
+                                            <span class='skill_description'>
+                                                <?=$page->monster[$i]->leader_skill->create_description()?>
+                                            </span>
+                                        </td>
+<?php
+                                    }
+                                    foreach ($page->monster[$i]->transformation->skill as $skill){
+?>
+                                        <td class='skill'>
+                                            <img class='skill_img' src='<?=$skill->get_image()?>'/>
+                                            <span class='skill_name'>
+                                                <?=$skill->name?>
+                                            </span>
+                                            <span class='skill_description'>
+                                                <?=$skill->description?>
+                                            </span>
+<?php
+                                            if (strlen($skill->multiplier_formula) > 0){
+?>
+                                                <span class='skill_formula'>
+                                                    <?=$skill->multiplier_formula?>
+                                                </span>
+<?php
+                                            }
+                                            if (count($skill->effect) > 0){
+?>
+                                                <span class='skill_effects'>
+<?php
+                                                    foreach ($skill->effect as $effect){
+?>
+                                                        <img class='effect_img' title='<?=$effect->name?>' src='<?=$effect->get_image()?>'/>
+<?php
+                                                    }
+?>
+                                                </span>
+<?php
+                                            }
+                                            if ($skill->max_level > 1){
+?>
+                                                <table class='skill_up'>
+<?php
+                                                    foreach ($skill->level as $level){
+                                                        if ($level->level > 1){
+?>
+                                                            <tr>
+                                                                <td class='level'>
+                                                                    Lv. <?=$level->level?>
+                                                                </td>
+                                                                <td class='description'>
+                                                                    <?=$level->description?>
+                                                                </td>
+                                                            </tr>
+<?php
+                                                        }
+                                                    }
+?>
+                                                </table>
+<?php
+                                            }
+?>
+                                        </td>
+<?php
+                                    }
+?>
+                                </tr>
+                            </table> <!-- #transformation_skills -->
 <?php
                         }
 ?>

application/view/monsters.php

@@ -30,236 +30,259 @@
         <meta name='twitter:image' content='<?=$page->icon?>'/>
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
+        <script>
+
+            /**
+             * Shows or hiddes the filters panel.
+             */
+            function toggleFilters(){
+                var content = document.getElementById('filters_content');
+                var slid = document.getElementById('filters_slid');
+                if (content.style.maxHeight != '30em'){
+                    content.style.maxHeight = '30em';
+                    slid.style.transform = 'rotate(90deg)';
+                }
+                else{
+                    content.style.maxHeight = '0px';
+                    slid.style.transform = 'rotate(0deg)';
+                }
+            };
+        </script>
     </head>
     <body>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section class='filters'>
-                <h2>
-                    Monster filters
-                </h2>
+        <section class='filters'>
+            <h2 id='filters_title' onClick='toggleFilters();'>
+                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=$path["img"]["icon"]?>slid.png'/>
+                Monster filters
+            </h2>
+            <article id='filters_content'>
 <?php
                 $filters = $page->filters;
+                $custom_filters = $page->custom_filters;
                 include __DIR__ . "/inc/filter_monsters.php";
 ?>
-            </section> <!-- #filters -->
-            <section class='list'>
-                <h2>
-                    Monsters
-                </h2>
-                <article>
+            </article>
+
+        </section> <!-- #filters -->
+        <section class='list'>
+            <h2>
+                Monsters
+            </h2>
+            <article>
 <?php
-                    foreach ($page->monsters as $mon){
+                foreach ($page->monsters as $mon){
 ?>
-                        <div class='monster'>
-                            <a href='/<?=$UID?>/monsters/<?=$mon->id?>'>
-                                <div class='monster_panel'>
-                                    <?=html_unit_panel($mon)?>
-                                </div>
-                            </a>
-                            <div class='monster_tooltip'>
-                                <h4>
-                                    <?=$mon->title?>
-                                </h4>
+                    <div class='monster'>
+                        <a href='/<?=$UID?>/monsters/<?=$mon->id?>'>
+                            <div class='monster_panel'>
+                                <?=html_unit_panel($mon)?>
+                            </div>
+                        </a>
+                        <div class='monster_tooltip'>
+                            <h4>
+                                <?=$mon->title?>
+                            </h4>
 <?php
-                                $building_attack = floor(($mon->attack * $page->building_stats["atk"] / 100) + ($mon->attack * $page->building_stats["elm"][$mon->unit->element] / 100));
-                                $building_defense = floor($page->building_stats["def"] * $mon->defense / 100);
-                                $building_hp = floor($page->building_stats["hp"] * $mon->hp / 100);
-                                $building_speed = $page->building_stats["spd"];
-                                $building_crit_rate = 0;
-                                $building_crit_damage = $page->building_stats["crd"];
-                                $building_accuracy = 0;
-                                $building_resistance = 0;
+                            $building_attack = floor(($mon->attack * $page->building_stats["atk"] / 100) + ($mon->attack * $page->building_stats["elm"][$mon->unit->element] / 100));
+                            $building_defense = floor($page->building_stats["def"] * $mon->defense / 100);
+                            $building_hp = floor($page->building_stats["hp"] * $mon->hp / 100);
+                            $building_speed = $page->building_stats["spd"];
+                            $building_crit_rate = 0;
+                            $building_crit_damage = $page->building_stats["crd"];
+                            $building_accuracy = 0;
+                            $building_resistance = 0;
 ?>
-                                <table class='stats'>
-                                    <tr>
-                                        <th>
-                                            Stats
-                                        </th>
-                                        <th>
-                                            Base
-                                        </th>
-                                        <th>
-                                            Runes
-                                        </th>
-                                        <th>
-                                            Buildings
-                                        </th>
-                                        <th>
-                                            Total
-                                        </th>
-                                    </tr>
-                                    <tr>
-                                        <th>
-                                            ATK
-                                        </th>
-                                        <td class='base'>
-                                            <?=$mon->attack?>
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$mon->rune_attack?>
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$building_attack?>
-                                        </td>
-                                        <td class='total'>
-                                            <?=$mon->attack + $mon->rune_attack + $building_attack?>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <th>
-                                            DEF
-                                        </th>
-                                        <td class='base'>
-                                            <?=$mon->defense?>
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$mon->rune_defense?>
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$building_defense?>
-                                        </td>
-                                        <td class='total'>
-                                            <?=$mon->defense + $mon->rune_defense + $building_defense?>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <th>
-                                            HP
-                                        </th>
-                                        <td class='base'>
-                                            <?=$mon->hp?>
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$mon->rune_hp?>
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$building_hp?>
-                                        </td>
-                                        <td class='total'>
-                                            <?=$mon->hp + $mon->rune_hp + $building_hp?>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <th>
-                                            SPD
-                                        </th>
-                                        <td class='base'>
-                                            <?=$mon->speed?>
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$mon->rune_speed?>
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$building_speed?>
-                                        </td>
-                                        <td class='total'>
-                                            <?=$mon->speed + $mon->rune_speed + $building_speed?>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <th>
-                                            CRR
-                                        </th>
-                                        <td class='base'>
-                                            <?=$mon->crit_rate?>%
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$mon->rune_crit_rate?>%
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$building_crit_rate?>%
-                                        </td>
-                                        <td class='total'>
-                                            <?=$mon->crit_rate + $mon->rune_crit_rate + $building_crit_rate?>%
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <th>
-                                            CRD
-                                        </th>
-                                        <td class='base'>
-                                            <?=$mon->crit_damage?>%
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$mon->rune_crit_damage?>%
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$building_crit_damage?>%
-                                        </td>
-                                        <td class='total'>
-                                            <?=$mon->crit_damage + $mon->rune_crit_damage + $building_crit_damage?>%
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <th>
-                                            ACC
-                                        </th>
-                                        <td class='base'>
-                                            <?=$mon->accuracy?>%
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$mon->rune_accuracy?>%
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$building_accuracy?>%
-                                        </td>
-                                        <td class='total'>
-                                            <?=$mon->accuracy + $mon->rune_accuracy + $building_accuracy?>%
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <th>
-                                            RES
-                                        </th>
-                                        <td class='base'>
-                                            <?=$mon->resistance?>%
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$mon->rune_resistance?>%
-                                        </td>
-                                        <td class='extra'>
-                                            +<?=$building_resistance?>%
-                                        </td>
-                                        <td class='total'>
-                                            <?=$mon->resistance + $mon->rune_resistance + $building_resistance?>%
-                                        </td>
-                                    </tr>
-                                </table>
-                                <div class='skills'>
+                            <table class='stats'>
+                                <tr>
+                                    <th>
+                                        Stats
+                                    </th>
+                                    <th>
+                                        Base
+                                    </th>
+                                    <th>
+                                        Runes
+                                    </th>
+                                    <th>
+                                        Buildings
+                                    </th>
+                                    <th>
+                                        Total
+                                    </th>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        ATK
+                                    </th>
+                                    <td class='base'>
+                                        <?=$mon->attack?>
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$mon->rune_attack?>
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$building_attack?>
+                                    </td>
+                                    <td class='total'>
+                                        <?=$mon->attack + $mon->rune_attack + $building_attack?>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        DEF
+                                    </th>
+                                    <td class='base'>
+                                        <?=$mon->defense?>
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$mon->rune_defense?>
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$building_defense?>
+                                    </td>
+                                    <td class='total'>
+                                        <?=$mon->defense + $mon->rune_defense + $building_defense?>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        HP
+                                    </th>
+                                    <td class='base'>
+                                        <?=$mon->hp?>
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$mon->rune_hp?>
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$building_hp?>
+                                    </td>
+                                    <td class='total'>
+                                        <?=$mon->hp + $mon->rune_hp + $building_hp?>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        SPD
+                                    </th>
+                                    <td class='base'>
+                                        <?=$mon->speed?>
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$mon->rune_speed?>
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$building_speed?>
+                                    </td>
+                                    <td class='total'>
+                                        <?=$mon->speed + $mon->rune_speed + $building_speed?>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        CRR
+                                    </th>
+                                    <td class='base'>
+                                        <?=$mon->crit_rate?>%
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$mon->rune_crit_rate?>%
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$building_crit_rate?>%
+                                    </td>
+                                    <td class='total'>
+                                        <?=$mon->crit_rate + $mon->rune_crit_rate + $building_crit_rate?>%
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        CRD
+                                    </th>
+                                    <td class='base'>
+                                        <?=$mon->crit_damage?>%
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$mon->rune_crit_damage?>%
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$building_crit_damage?>%
+                                    </td>
+                                    <td class='total'>
+                                        <?=$mon->crit_damage + $mon->rune_crit_damage + $building_crit_damage?>%
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        ACC
+                                    </th>
+                                    <td class='base'>
+                                        <?=$mon->accuracy?>%
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$mon->rune_accuracy?>%
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$building_accuracy?>%
+                                    </td>
+                                    <td class='total'>
+                                        <?=$mon->accuracy + $mon->rune_accuracy + $building_accuracy?>%
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <th>
+                                        RES
+                                    </th>
+                                    <td class='base'>
+                                        <?=$mon->resistance?>%
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$mon->rune_resistance?>%
+                                    </td>
+                                    <td class='extra'>
+                                        +<?=$building_resistance?>%
+                                    </td>
+                                    <td class='total'>
+                                        <?=$mon->resistance + $mon->rune_resistance + $building_resistance?>%
+                                    </td>
+                                </tr>
+                            </table>
+                            <div class='skills'>
 <?php
-                                    $skill_num = 0;
-                                    foreach ($mon->unit->skill as $skill){
-                                        $cur_lvl = $mon->skill_levels[$skill_num];
-                                        $max_lvl = $skill->max_level;
-                                        if ($max_lvl == $cur_lvl){
-                                            $maxed = "maxed";
-                                        }
-                                        else{
-                                            $maxed = "";
-                                        }
+                                $skill_num = 0;
+                                foreach ($mon->unit->skill as $skill){
+                                    $cur_lvl = $mon->skill_levels[$skill_num];
+                                    $max_lvl = $skill->max_level;
+                                    if ($max_lvl == $cur_lvl){
+                                        $maxed = "maxed";
+                                    }
+                                    else{
+                                        $maxed = "";
+                                    }
 ?>
-                                        <div class='skill'>
-                                            <img src='<?=$skill->get_image()?>'/>
-                                            <span class='skill_level <?=$maxed?>'>
-                                            	<?=$cur_lvl?>/<?=$max_lvl?>
-                                            </span>
-                                            <span class='skill_name'>
-                                                <?=$skill->name?>
-                                            </span>
-                                        </div>
+                                    <div class='skill'>
+                                        <img src='<?=$skill->get_image()?>'/>
+                                        <span class='skill_level <?=$maxed?>'>
+                                            <?=$cur_lvl?>/<?=$max_lvl?>
+                                        </span>
+                                        <span class='skill_name'>
+                                            <?=$skill->name?>
+                                        </span>
+                                    </div>
 <?php
-                                        $skill_num ++;
-                                    }
+                                    $skill_num ++;
+                                }
 ?>
-                                </div>
                             </div>
                         </div>
+                    </div>
 <?php
-                }
+            }
 ?>
-                    </article>
+                </article>
             </section> <!-- #catalog -->
 
 <?php

application/view/report_runecraft.php

@@ -30,21 +30,42 @@
         <meta name='twitter:image' content='<?=$page->icon?>'/>
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
+        <script>
+
+            /**
+             * Shows or hiddes the filters panel.
+             */
+            function toggleFilters(){
+                var content = document.getElementById('filters_content');
+                var slid = document.getElementById('filters_slid');
+                if (content.style.maxHeight != '30em'){
+                    content.style.maxHeight = '30em';
+                    slid.style.transform = 'rotate(90deg)';
+                }
+                else{
+                    content.style.maxHeight = '0px';
+                    slid.style.transform = 'rotate(0deg)';
+                }
+            };
+        </script>
     </head>
     <body>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
         <section class='filters'>
-            <h2>
-                <span>
-                    Report filters
-                </span>
+            <h2 id='filters_title' onClick='toggleFilters();'>
+                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=$path["img"]["icon"]?>slid.png'/>
+                Upgrade filters
             </h2>
+            <article id='filters_content'>
 <?php
-        $filters = $page->filters;
-        include __DIR__ . "/inc/filter_report_runecraft.php";
+                $filters = $page->filters;
+                $custom_filters = $page->custom_filters;
+                include __DIR__ . "/inc/filter_report_runecraft.php";
 ?>
+            </article>
+
         </section> <!-- #filters -->
 <?php
             foreach ($page->upgrades as $upgrade){

application/view/report_runeupgrade.php

@@ -31,22 +31,42 @@
         <meta name='twitter:image' content='<?=$page->icon?>'/>
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
+        <script>
+
+            /**
+             * Shows or hiddes the filters panel.
+             */
+            function toggleFilters(){
+                var content = document.getElementById('filters_content');
+                var slid = document.getElementById('filters_slid');
+                if (content.style.maxHeight != '30em'){
+                    content.style.maxHeight = '30em';
+                    slid.style.transform = 'rotate(90deg)';
+                }
+                else{
+                    content.style.maxHeight = '0px';
+                    slid.style.transform = 'rotate(0deg)';
+                }
+            };
+        </script>
     </head>
     <body id='body_report_runeupgrade'>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
         <section class='filters'>
-            <h2>
-                <span>
-                    Report filters
-                </span>
+            <h2 id='filters_title' onClick='toggleFilters();'>
+                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=$path["img"]["icon"]?>slid.png'/>
+                Upgrade filters
             </h2>
+            <article id='filters_content'>
 <?php
-            $filters = $page->filters;
-            $custom_filters = $page->custom_filters;
-            include __DIR__ . "/inc/filter_report_runeupgrade.php";
+                $filters = $page->filters;
+                $custom_filters = $page->custom_filters;
+                include __DIR__ . "/inc/filter_report_runeupgrade.php";
 ?>
+            </article>
+
         </section> <!-- #filters -->
 <?php
             foreach ($page->upgrades as $upgrade){

application/view/report_skillup.php

@@ -27,21 +27,42 @@
         <meta name='twitter:image' content='<?=$page->icon?>'/>
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
+        <script>
+
+            /**
+             * Shows or hiddes the filters panel.
+             */
+            function toggleFilters(){
+                var content = document.getElementById('filters_content');
+                var slid = document.getElementById('filters_slid');
+                if (content.style.maxHeight != '30em'){
+                    content.style.maxHeight = '30em';
+                    slid.style.transform = 'rotate(90deg)';
+                }
+                else{
+                    content.style.maxHeight = '0px';
+                    slid.style.transform = 'rotate(0deg)';
+                }
+            };
+        </script>
     </head>
     <body id='body_report_skillup'>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
         <section class='filters'>
-            <h2>
-                <span>
-                    Monster filters
-                </span>
+            <h2 id='filters_title' onClick='toggleFilters();'>
+                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=$path["img"]["icon"]?>slid.png'/>
+                Monster filters
             </h2>
+            <article id='filters_content'>
 <?php
-            $filters = $page->filters;
-            include __DIR__ . "/inc/filter_report_skillup.php";
+                $filters = $page->filters;
+                $custom_filters = $page->custom_filters;
+                include __DIR__ . "/inc/filter_report_skillup.php";
 ?>
+            </article>
+
         </section> <!-- #filters -->
 <?php
         $index = 1;
@@ -117,20 +138,20 @@
                         </div> <!-- .profile -->
                         <div class='skills'>
 <?php
-                            $skill_num = 0;
+                            $skill_num = 1;
                             $absolute_level = 0;
                             $absolute_max_level = 0;
-                            $ponderated_level = 0;
-                            $ponderated_max_level = 0;
+                            $ponderated_level = 0.0;
+                            $ponderated_max_level = 0.0;
                             foreach ($unit->unit->skill as $skill){
                                 if ($skill->max_level > 1){
-                                    $absolute_max_level += $skill->max_level - 1;
+                                    $absolute_max_level += $skill->max_level;
                                 }
-                                $cur_lvl = $unit->skill_levels[$skill_num];
+                                $cur_lvl = $unit->skill_levels[$skill_num - 1];
                                 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));
+                                    $absolute_level += $cur_lvl;
+                                    $ponderated_level += $cur_lvl * (($skill_num + 1) / 2.0);
+                                    $ponderated_max_level += $skill->max_level * (($skill_num + 1) / 2.0);
                                 }
                                 $max_lvl = $skill->max_level;
                                 if ($max_lvl == $cur_lvl){

application/view/runes.php

@@ -27,70 +27,91 @@
         <meta name='twitter:image' content='<?=$page->icon?>'/>
         <meta name='twitter:url' content='<?=$page->canonical?>'/>
         <meta name='robots' content='index follow'/>
+        <script>
+
+            /**
+             * Shows or hiddes the filters panel.
+             */
+            function toggleFilters(){
+                var content = document.getElementById('filters_content');
+                var slid = document.getElementById('filters_slid');
+                if (content.style.maxHeight != '30em'){
+                    content.style.maxHeight = '30em';
+                    slid.style.transform = 'rotate(90deg)';
+                }
+                else{
+                    content.style.maxHeight = '0px';
+                    slid.style.transform = 'rotate(0deg)';
+                }
+            };
+        </script>
     </head>
     <body>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section class='filters'>
-                <h2>
-                    Rune filters
-                </h2>
+        <section class='filters'>
+            <h2 id='filters_title' onClick='toggleFilters();'>
+                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=$path["img"]["icon"]?>slid.png'/>
+                Rune filters
+            </h2>
+            <article id='filters_content'>
 <?php
                 $filters = $page->filters;
                 $custom_filters = $page->custom_filters;
                 include __DIR__ . "/inc/filter_runes.php";
 ?>
+            </article>
 
-            </section> <!-- #filters -->
-<?php
-                $prev_group = "";
-                $group = "";
-                $group_title = "";
-                $group_image = "";
-                foreach ($page->runes as $rune){
-                    switch ($page->filters["group"]){
-                        case 1: // "TYPE":
-                            $group = $rune->type->name;
-                            $group_title = $rune->type->name;
-                            $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"]["rune"] . "base.png";
-                    }
-                    if ($prev_group != $group){
-                        if ($prev_group == ""){
-?>
-                            <section class='list'>
+        </section> <!-- #filters -->
 <?php
-                        }
-                        else{
+            $prev_group = "";
+            $group = "";
+            $group_title = "";
+            $group_image = "";
+            foreach ($page->runes as $rune){
+                switch ($page->filters["group"]){
+                    case 1: // "TYPE":
+                        $group = $rune->type->name;
+                        $group_title = $rune->type->name;
+                        $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"]["rune"] . "base.png";
+                }
+                if ($prev_group != $group){
+                    if ($prev_group == ""){
 ?>
-                                </article>
-                            </section>
-                            <section class='list'>
+                        <section class='list'>
 <?php
-                        }
-                        $prev_group = $group;
+                    }
+                    else{
 ?>
-                        <h2>
-                            <img class='group_image_<?=$group?>' alt='<?=$group_title?>' src='<?=$group_image?>'>
-                            <span>
-                                <?=$group_title?>
-                            </span>
-                        </h2>
-                        <article>
+                            </article>
+                        </section>
+                        <section class='list'>
 <?php
                     }
+                    $prev_group = $group;
 ?>
-                    <?=html_rune_table($rune, $rune->assigned_to)?>
+                    <h2>
+                        <img class='group_image_<?=$group?>' alt='<?=$group_title?>' src='<?=$group_image?>'>
+                        <span>
+                            <?=$group_title?>
+                        </span>
+                    </h2>
+                    <article>
 <?php
                 }
 ?>
-                </article> <!-- Close last group -->
-            </section>
+                <?=html_rune_table($rune, $rune->assigned_to)?>
+<?php
+            }
+?>
+            </article> <!-- Close last group -->
+        </section>
 
 <?php
         include __DIR__ . "/inc/footer.php";

application/view/runs.php

@@ -61,263 +61,282 @@
                 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                 xhttp.send('uid=<?=$UID?>&run=' + id + '&name=' + encodeURI(name) + '&description=' + encodeURI(description));
             }
+
+            /**
+             * Shows or hiddes the filters panel.
+             */
+            function toggleFilters(){
+                var content = document.getElementById('filters_content');
+                var slid = document.getElementById('filters_slid');
+                if (content.style.maxHeight != '30em'){
+                    content.style.maxHeight = '30em';
+                    slid.style.transform = 'rotate(90deg)';
+                }
+                else{
+                    content.style.maxHeight = '0px';
+                    slid.style.transform = 'rotate(0deg)';
+                }
+            };
         </script>
     </head>
     <body>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section class='filters'>
-                <h2>
-                    Run filters
-                </h2>
+        <section class='filters'>
+            <h2 id='filters_title' onClick='toggleFilters();'>
+                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=$path["img"]["icon"]?>slid.png'/>
+                Run filters
+            </h2>
+            <article id='filters_content'>
 <?php
                 $filters = $page->filters;
-                //TODO
+                $custom_filters = $page->custom_filters;
                 include __DIR__ . "/inc/filter_runs.php";
 ?>
+            </article>
 
-            </section> <!-- #filters -->
-            <section class='content'>
-                <h2>
-                    Runs
-                </h2>
-                <article>
-                    <table id='runs'>
+        </section> <!-- #filters -->
+        <section class='content'>
+            <h2>
+                Runs
+            </h2>
+            <article>
+                <table id='runs'>
+                    <tr>
+                        <th>
+                            Area
+                        </th>
+                        <th>
+                            Date
+                        </th>
+                        <th>
+                            Team
+                        </th>
+                        <th>
+                            Time
+                        </th>
+                        <th>
+                            Reward
+                        </th>
+                    </tr>
+<?php
+                    foreach ($page->runs as $run){
+                        $enable_save = true;
+?>
                         <tr>
-                            <th>
-                                Area
-                            </th>
-                            <th>
-                                Date
-                            </th>
-                            <th>
-                                Team
-                            </th>
-                            <th>
-                                Time
-                            </th>
-                            <th>
-                                Reward
-                            </th>
-                        </tr>
+                            <td class='area'>
+                                <div class='area'>
+                                    <img title='<?=$run->area->name?>' class='area' src='<?=$run->area->get_image($run->stage)?>'/>
 <?php
-                        foreach ($page->runs as $run){
-                            $enable_save = true;
+                                    if ($run->stage > 0){
 ?>
-                            <tr>
-                                <td class='area'>
-                                    <div class='area'>
-                                        <img title='<?=$run->area->name?>' class='area' src='<?=$run->area->get_image($run->stage)?>'/>
+                                        <span class='stage'><?=$run->stage?></span>
 <?php
-                                        if ($run->stage > 0){
+                                    }
+                                    // TODO: Labyrinth difficulty
+                                    if (in_array($run->area->id, $SCENARIO)){
 ?>
-                                            <span class='stage'><?=$run->stage?></span>
+                                        <span class='difficulty'>
 <?php
-                                        }
-                                        // TODO: Labyrinth difficulty
-                                        if (in_array($run->area->id, $SCENARIO)){
+                                            for ($i = 0; $i < $run->difficulty; $i ++){
 ?>
-                                            <span class='difficulty'>
+                                                <img class='difficulty' src='<?=$path["img"]["icon"]?>star.png'/>
 <?php
-                                                for ($i = 0; $i < $run->difficulty; $i ++){
+                                            }
 ?>
-                                                    <img class='difficulty' src='<?=$path["img"]["icon"]?>star.png'/>
+                                        </span>
 <?php
-                                                }
+                                    }
 ?>
-                                            </span>
+                                </div>
+                            </td>
+                            <td class='date'>
 <?php
-                                        }
+                                $date = date_create($run->dtime);
 ?>
-                                    </div>
-                                </td>
-                                <td class='date'>
+                                <?=date_format($date, "Y/m/d H:i:s")?>
+                            </td>
+                            <td class='team'>
 <?php
-                                    $date = date_create($run->dtime);
+                                if ($run->helper == 1){
+                                    $enable_save = false;
 ?>
-                                    <?=date_format($date, "Y/m/d H:i:s")?>
-                                </td>
-                                <td class='team'>
+                                    <div class='monster_panel helper'>
+                                        <img class='monster' title='Friend/Menstor' src='<?=$path["img"]["currency"]?>socialpoint.png'/>
+                                    </div>
 <?php
-                                    if ($run->helper == 1){
+                                }
+                                foreach ($run->party as $party){
+                                    if ($party instanceof K_Unit){
                                         $enable_save = false;
-?>
-                                        <div class='monster_panel helper'>
-                                            <img class='monster' title='Friend/Menstor' src='<?=$path["img"]["currency"]?>socialpoint.png'/>
-                                        </div>
-<?php
+                                        $disabled = "disabled";
                                     }
-                                    foreach ($run->party as $party){
-                                        if ($party instanceof K_Unit){
-                                            $enable_save = false;
-                                            $disabled = "disabled";
-                                        }
-                                        else{
-                                            $disabled = "";
-                                        }
-                                        if ($disabled == ""){
+                                    else{
+                                        $disabled = "";
+                                    }
+                                    if ($disabled == ""){
 ?>
-                                            <a target='_blank' href='/<?=$UID?>>/monster/<?=$party->id?>'>
+                                        <a target='_blank' href='/<?=$UID?>>/monster/<?=$party->id?>'>
 <?php
-                                        }
+                                    }
 ?>
-                                        <div class='monster_panel <?=$disabled?>'>
-                                            <?=html_unit_panel($party)?>
-                                        </div>
+                                    <div class='monster_panel <?=$disabled?>'>
+                                        <?=html_unit_panel($party)?>
+                                    </div>
 <?php
-                                        if ($disabled == ""){
+                                    if ($disabled == ""){
 ?>
-                                            </a>
+                                        </a>
 <?php
-                                        }
                                     }
+                                }
 ?>
-                                </td>
-                                <td class='time'>
+                            </td>
+                            <td class='time'>
 <?php
-                                    if ($run->win == 1){
-                                        $s = floor($run->time / 1000);
-                                        $m = floor($s / 60);
-                                        $s = floor($s % 60);
-                                        $ms = ($run-> time - (1000 * 60 * $m) - (1000 * 60 * $s) / 100);
-                                        $s = str_pad($s, 2, '0', STR_PAD_LEFT);
-                                        $ms = str_pad($ms, 2, '0', STR_PAD_LEFT);
+                                if ($run->win == 1){
+                                    $s = floor($run->time / 1000);
+                                    $m = floor($s / 60);
+                                    $s = floor($s % 60);
+                                    $ms = ($run-> time - (1000 * 60 * $m) - (1000 * 60 * $s) / 100);
+                                    $s = str_pad($s, 2, '0', STR_PAD_LEFT);
+                                    $ms = str_pad($ms, 2, '0', STR_PAD_LEFT);
 ?>
-                                        <?=$m?>:<?=$s?><span class='ms'>.<?=$ms?></span>
+                                    <?=$m?>:<?=$s?><span class='ms'>.<?=$ms?></span>
 <?php
-                                    }
-                                    else{
+                                }
+                                else{
 ?>
-                                        <span class='defeated'>Defeated</span>
+                                    <span class='defeated'>Defeated</span>
 <?php
-                                    }
+                                }
 ?>
-                                </td>
-                                <td class='reward'>
+                            </td>
+                            <td class='reward'>
 <?php
-                                    if ($run->energy > 0){
+                                if ($run->energy > 0){
 ?>
-                                        <div class='item'>
-                                            <img class='item' title='Energy' src='<?=$path["img"]["currency"]?>energy.png'/>
-                                            <span class='item'><?=$run->energy?></span>
-                                        </div>
+                                    <div class='item'>
+                                        <img class='item' title='Energy' src='<?=$path["img"]["currency"]?>energy.png'/>
+                                        <span class='item'><?=$run->energy?></span>
+                                    </div>
 <?php
-                                    }
-                                    if ($run->mana > 0){
+                                }
+                                if ($run->mana > 0){
 ?>
-                                        <div class='item'>
-                                            <img class='item' title='Mana' src='<?=$path["img"]["currency"]?>mana.png'/>
-                                            <span class='item'><?=$run->mana?></span>
-                                        </div>
+                                    <div class='item'>
+                                        <img class='item' title='Mana' src='<?=$path["img"]["currency"]?>mana.png'/>
+                                        <span class='item'><?=$run->mana?></span>
+                                    </div>
 <?php
-                                    }
-                                    if ($run->crystal > 0){
+                                }
+                                if ($run->crystal > 0){
 ?>
-                                        <div class='item'>
-                                            <img class='item' title='Crystal' src='<?=$path["img"]["currency"]?>crystal.png'/>
-                                            <span class='item'><?=$run->crystal?></span>
-                                        </div>
+                                    <div class='item'>
+                                        <img class='item' title='Crystal' src='<?=$path["img"]["currency"]?>crystal.png'/>
+                                        <span class='item'><?=$run->crystal?></span>
+                                    </div>
 <?php
-                                    }
-                                    foreach ($run->unit as $unit){
+                                }
+                                foreach ($run->unit as $unit){
 ?>
-                                        <div class='item'>
-                                            <img class='item' title='<?=$unit->title?>' src='<?=$unit->get_image()?>'/>
-                                        </div>
+                                    <div class='item'>
+                                        <img class='item' title='<?=$unit->title?>' src='<?=$unit->get_image()?>'/>
+                                    </div>
 <?php
-                                    }
-                                    foreach ($run->item as $item){
+                                }
+                                foreach ($run->item as $item){
 ?>
-                                        <div class='item'>
-                                            <img class='item' title='<?=$item->name?>' src='<?=$item->get_image()?>'/>
-                                            <span class='item'><?=$item->amount?></span>
-                                        </div>
+                                    <div class='item'>
+                                        <img class='item' title='<?=$item->name?>' src='<?=$item->get_image()?>'/>
+                                        <span class='item'><?=$item->amount?></span>
+                                    </div>
 <?php
-                                    }
-                                    foreach ($run->sd as $sd){
+                                }
+                                foreach ($run->sd as $sd){
 ?>
-                                        <div class='item'>
-                                            <img class='item' title='<?=$sd->unit->title?>' src='<?=$sd->unit->get_image()?>'/>
-                                            <img class='item' title=' ' src='<?=$path["img"]["misc"]?>mask-sd.png'/>
-                                        </div>
+                                    <div class='item'>
+                                        <img class='item' title='<?=$sd->unit->title?>' src='<?=$sd->unit->get_image()?>'/>
+                                        <img class='item' title=' ' src='<?=$path["img"]["misc"]?>mask-sd.png'/>
+                                    </div>
 <?php
-                                    }
-                                    foreach ($run->unit_piece as $piece){
+                                }
+                                foreach ($run->unit_piece as $piece){
 ?>
-                                        <div class='item'>
-                                            <img class='item' title='<?=$piece->unit->title?>' src='<?=$piece->unit->get_image()?>'/>
-                                            <img class='item' title=' ' src='<?=$path["img"]["misc"]?>mask-piece.png'/>
-                                            <span class='item'><?=$piece->quantity?></span>
-                                        </div>
+                                    <div class='item'>
+                                        <img class='item' title='<?=$piece->unit->title?>' src='<?=$piece->unit->get_image()?>'/>
+                                        <img class='item' title=' ' src='<?=$path["img"]["misc"]?>mask-piece.png'/>
+                                        <span class='item'><?=$piece->quantity?></span>
+                                    </div>
 <?php
-                                    }
-                                    if ($run->shapeshifting > 0){
+                                }
+                                if ($run->shapeshifting > 0){
 ?>
-                                        <div class='item'>
-                                            <img class='item' title='Shapeshifting Stones' src='<?=$path["img"]["currency"]?>costumestone.png'/>
-                                            <span class='item'><?=$run->shapeshifting?></span>
-                                        </div>
+                                    <div class='item'>
+                                        <img class='item' title='Shapeshifting Stones' src='<?=$path["img"]["currency"]?>costumestone.png'/>
+                                        <span class='item'><?=$run->shapeshifting?></span>
+                                    </div>
 <?php
-                                    }
-                                    foreach ($run->rune as $rune){
+                                }
+                                foreach ($run->rune as $rune){
 ?>
-                                        <div class='item item_rune'>
-                                            <img class='item' title='Rune' src='<?=$path["img"]["rune"]?>base.png'/>
-                                            <?=html_rune_table($rune)?>
-                                        </div>
+                                    <div class='item item_rune'>
+                                        <img class='item' title='Rune' src='<?=$path["img"]["rune"]?>base.png'/>
+                                        <?=html_rune_table($rune)?>
+                                    </div>
 <?php
-                                    }
+                                }
 ?>
-                                </td>
-                                <td class='action'>
+                            </td>
+                            <td class='action'>
 <?php
-                                    if ($enable_save){
+                                if ($enable_save){
 ?>
-                                        <img alt='Save Team' class='save_team' onclick='saveForm(<?=$run->id?>, true);' src='<?=$path["img"]["icon"]?>save.png'/>
+                                    <img alt='Save Team' class='save_team' onclick='saveForm(<?=$run->id?>, true);' src='<?=$path["img"]["icon"]?>save.png'/>
 <?php
-                                    }
+                                }
 ?>
-                                </td>
-                            </tr>
-<?php
-                        }
-?>
-                    </table>
-                </article>
-            </section>
-            <section id='save_team' class='content'>
-                <h2>
-                    Save run
-                </h2>
-                <article>
-                    <input id='save_id' type='hidden' value=''/>
-                    <table>
-                        <tr>
-                            <td class='save_title'>
-                                Name
-                            </td>
-                            <td class='save_values'>
-                                <input type='text' id='save_team_name' name='name'/>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class='save_title'>
-                                Description
-                            </td>
-                            <td class='save_values'>
-                                <textarea id='save_team_description' name='description'></textarea>
                             </td>
                         </tr>
-                        <tr>
-                            <td colspan='2'>
-                                <input type='button' value='Save' onClick='saveTeam();'/>
-                                <input type='button' value='Close' onClick='saveForm(null, false);'/>
-                            </td>
-                        </tr>
-                    </table>
-                </article>
-            </section>
+<?php
+                    }
+?>
+                </table>
+            </article>
+        </section>
+        <section id='save_team' class='content'>
+            <h2>
+                Save run
+            </h2>
+            <article>
+                <input id='save_id' type='hidden' value=''/>
+                <table>
+                    <tr>
+                        <td class='save_title'>
+                            Name
+                        </td>
+                        <td class='save_values'>
+                            <input type='text' id='save_team_name' name='name'/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class='save_title'>
+                            Description
+                        </td>
+                        <td class='save_values'>
+                            <textarea id='save_team_description' name='description'></textarea>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan='2'>
+                            <input type='button' value='Save' onClick='saveTeam();'/>
+                            <input type='button' value='Close' onClick='saveForm(null, false);'/>
+                        </td>
+                    </tr>
+                </table>
+            </article>
+        </section>
 <?php
         include __DIR__ . "/inc/footer.php";
 ?>

application/view/teams.php

@@ -487,87 +487,109 @@
                         break;
                 }
             }
+
+
+            /**
+             * Shows or hiddes the filters panel.
+             */
+            function toggleFilters(){
+                var content = document.getElementById('filters_content');
+                var slid = document.getElementById('filters_slid');
+                if (content.style.maxHeight != '30em'){
+                    content.style.maxHeight = '30em';
+                    slid.style.transform = 'rotate(90deg)';
+                }
+                else{
+                    content.style.maxHeight = '0px';
+                    slid.style.transform = 'rotate(0deg)';
+                }
+            };
         </script>
     </head>
     <body>
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-            <section class='filters'>
-                <h2>
-                    Team filters
-                </h2>
+        <section class='filters'>
+            <h2 id='filters_title' onClick='toggleFilters();'>
+                <img id='filters_slid' id='filters_slid' alt=' ' src='<?=$path["img"]["icon"]?>slid.png'/>
+                Team filters
+            </h2>
+            <article id='filters_content'>
 <?php
                 $filters = $page->filters;
-                include __DIR__ . "/inc/filter_team.php";
+                $custom_filters = $page->custom_filters;
+                include __DIR__ . "/inc/filter_teams.php";
 ?>
-            </section> <!-- #filters -->
-            <section class='list'>
-                <h2>
-                    Teams
-                </h2>
-                <article>
-                    <table id='teams'>
-                        <tr>
-                            <th>
-                                Team
-                            </th>
-                            <th>
-                                Description
-                            </th>
-                            <th>
-                                Units
-                            </th>
-                        </tr>
+            </article>
+
+        </section> <!-- #filters -->
+        <section class='list'>
+            <h2>
+                Teams
+            </h2>
+            <article>
+                <table id='teams'>
+                    <tr>
+                        <th>
+                            Team
+                        </th>
+                        <th>
+                            Description
+                        </th>
+                        <th>
+                            Units
+                        </th>
+                    </tr>
 <?php
-                        $odd = "odd";
-                        foreach ($page->teams as $team){
+                    $odd = "odd";
+                    foreach ($page->teams as $team){
 ?>
-                            <tr>
-                                <td class='team <?=$odd?>'>
-                                    <h4>
-                                        <?=$team->name?>
-                                    </h4>
+                        <tr>
+                            <td class='team <?=$odd?>'>
+                                <h4>
+                                    <?=$team->name?>
+                                </h4>
 <?php
-                                    $area = $team->area->name;
-                                    if (intval($team->stage) > 0){
-                                        $area = $area . " - " . $team->stage;
-                                    }
+                                $area = $team->area->name;
+                                if (intval($team->stage) > 0){
+                                    $area = $area . " - " . $team->stage;
+                                }
 ?>
-                                    <h5>
-                                        <?=$area?>
-                                    </h5>
-                                </td>
-                                <td class='description <?=$odd?>'>
-                                    <?=$team->description?>
-                                </td>
-                                <td class='units <?=$odd?>'>
+                                <h5>
+                                    <?=$area?>
+                                </h5>
+                            </td>
+                            <td class='description <?=$odd?>'>
+                                <?=$team->description?>
+                            </td>
+                            <td class='units <?=$odd?>'>
 <?php
-                                    foreach ($team->unit as $unit){
+                                foreach ($team->unit as $unit){
 ?>
-                                        <a href='/<?=$UID?>/monsters/<?=$unit->id?>'>
-                                            <div class='monster_panel'>
-                                                <?=html_unit_panel($unit)?>
-                                            </div>
-                                        </a>
+                                    <a href='/<?=$UID?>/monsters/<?=$unit->id?>'>
+                                        <div class='monster_panel'>
+                                            <?=html_unit_panel($unit)?>
+                                        </div>
+                                    </a>
 <?php
-                                    }
+                                }
 ?>
-                                </td>
-                            </tr>
+                            </td>
+                        </tr>
 <?php
-                            if ($odd == ""){
-                                $odd = "odd";
-                            }
-                            else{
-                                $odd = "";
-                            }
+                        if ($odd == ""){
+                            $odd = "odd";
+                        }
+                        else{
+                            $odd = "";
                         }
+                    }
 ?>
-                    </table>
-                    <input type='button' onClick='showNewTeam(true);' value='New Team'/>
-                </article>
-            </section> <!-- .list -->
+                </table>
+                <input type='button' onClick='showNewTeam(true);' value='New Team'/>
+            </article>
+        </section> <!-- .list -->
 
 <?php
         include __DIR__ . "/inc/footer.php";

install_data/install_base.sql

@@ -215,10 +215,10 @@ INSERT INTO k_inventory VALUES(4,9,'Mystical Summon','');
 INSERT INTO k_inventory VALUES(5,9,'Fire Scroll','');
 INSERT INTO k_inventory VALUES(6,9,'Water Scroll','');
 INSERT INTO k_inventory VALUES(7,9,'Wind Scroll','');
-INSERT INTO k_inventory VALUES(8,9,'Light and Dark Scroll','');
-INSERT INTO k_inventory VALUES(9,9,'Legendary Scroll','');
-INSERT INTO k_inventory VALUES(10,9,'Summon Stone','');
-INSERT INTO k_inventory VALUES(11,9,'Light and Dark Summon','');
+INSERT INTO k_inventory VALUES(8,9,'Summon Stone','');
+INSERT INTO k_inventory VALUES(9,9,'Light and Dark Summon Pieces','');
+INSERT INTO k_inventory VALUES(10,9,'Legendary Scroll','');
+INSERT INTO k_inventory VALUES(11,9,'Light and Dark Scroll','');
 INSERT INTO k_inventory VALUES(12,9,'Legendary Summon Pieces','');
 INSERT INTO k_inventory VALUES(13,9,'Transcendance Scroll','');
 INSERT INTO k_inventory VALUES(14,9,'Legendary Water Scroll','');
@@ -279,7 +279,9 @@ INSERT INTO k_inventory VALUES(143140501,61,'Rainbowmon (5*)','');
 INSERT INTO k_inventory VALUES(151050101,61,'Devilmon','');
 INSERT INTO k_inventory VALUES(217140115,61,'Super Angelmon','');
 INSERT INTO k_inventory VALUES(8002,29,'Ancient Magic Origin','');
-INSERT INTO k_inventory VALUES(9002,27,'Karzhan''s Rune Ore','');
+INSERT INTO k_inventory VALUES(9001,27,'Karzhan''s Rune Ore','');
+INSERT INTO k_inventory VALUES(9002,27,'Ellunia''s Rune Ore','');
+INSERT INTO k_inventory VALUES(9003,27,'Lumel''s Rune Ore','');
 INSERT INTO k_inventory VALUES(8001,27,'Ancient Magic Stone','');
 INSERT INTO k_inventory VALUES(9000,6,'Power Stone','');
 CREATE TABLE k_experience(

public/css/filters.css

@@ -3,12 +3,39 @@ section.filters{
     display: inline-block;
     min-width: 40%;
     background-color: #aa8866;
+    overflow: hidden;
+    padding-bottom: 0;
+    transition: all .3s ease-in-out;
 }
 @media screen and (max-width : 990px){
     section.filters{
         font-size: 80%;
     }
 }
+section.filters h2#filters_title{
+    cursor: pointer;
+    margin-bottom: 0;
+    user-select: none;
+}
+
+section.filters h2#filters_title img#filters_slid{
+    transform: rotate(0deg);
+    width: 1em;
+    height: 1em;
+    vertical-align: middle;
+    transition: all .4s ease-in-out;
+}
+
+section.filters article#filters_content{
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    display: block;
+    height: auto;
+    transition: all .6s ease-in-out;
+    max-height: 0;
+}
+
 
 form.custom_filter{
     border-bottom: 0.1em solid #ffffff;

public/css/guild.css

@@ -4,12 +4,20 @@ div#guild_details{
     width: 50%;
     vertical-align: top;
 }
+@media screen and (max-width : 990px){
+    div#guild_details{
+        display: block;
+        width: 95%;
+        margin: auto;
+        font-size: 90%;
+    }
+}
 div#guild_details span#guild_level{
-    font-size: 300%;
+    font-size: 120%;
 }
 div#guild_details span#guild_experience{
     font-style: italic;
-    padding-left: 2em;
+    padding-left: 1em;
 }
 div#guild_details p#guild_comment{
     color: #00ff00;
@@ -25,6 +33,14 @@ div#guild_details p#guild_notice{
 div#guild_details div#guild_skills{
     display: inline-block;
 }
+@media screen and (max-width : 990px){
+    div#guild_details div#guild_skills{
+        display: block;
+        width: 95%;
+        margin: auto;
+        font-size: 90%;
+    }
+}
 
 div#guild_details div#guild_skills div.skill_group{
     border: 0.2em solid #f2c920;
@@ -50,35 +66,47 @@ div#guild_details div#guild_skills div.skill_group span.skill_group_description{
 
 div#guild_details div#guild_skills div.skill_group img.skill_group_image{
     display: inline-block;
-    vertical-align: middle;
+    vertical-align: top;
     width: 5em;
     height: 5em;
     border: 0.1em solid #f2c920;
     border-radius: 0.5em;
     margin: 0.2em 0.2em 0.5em 1em;
 }
-
-div#guild_details div#guild_skills div.skill_group ul{
+@media screen and (max-width : 990px){
+    div#guild_details div#guild_skills div.skill_group img.skill_group_image{
+        height: 3em;
+        width: 3em;
+    }
+}
+div#guild_details div#guild_skills div.skill_group div.skill_group_content{
     display: inline-block;
+    vertical-align: top;
+    max-width: 80%;
+}
+
+div#guild_details div#guild_skills div.skill_group div.skill_group_content span.description{
+    display: block;
+}
+
+div#guild_details div#guild_skills div.skill_group div.skill_group_content ul{
+    display: block;
     font-weight: bold;
     font-size: 70%;
     vertical-align: middle;
-    margin: 0;
+    margin: 0.5em;
 }
-div#guild_details div#guild_skills div.skill_group ul li{
-    margin: -0.3em;
+@media screen and (max-width : 990px){
+    div#guild_details div#guild_skills div.skill_group div.skill_group_content ul{column-count: 2;}
 }
-div#guild_details div#guild_skills div.skill_group ul li.description{
-    list-style-type: none;
-    margin: -0.3em 0.3em 0.1em -3em;
+div#guild_details div#guild_skills div.skill_group div.skill_group_content ul li{
+    margin: -0.3em;
 }
 
-div#guild_details div#guild_skills div.skill_group ul li.unavailable{
+div#guild_details div#guild_skills div.skill_group ul div.skill_group_content li.unavailable{
     color: #888888;
 }
 
-
-
 table#guild_members{
     display: inline-block;
     width: 40%;
@@ -86,6 +114,14 @@ table#guild_members{
     border-collapse: collapse;
     color: #ffffff;
 }
+@media screen and (max-width : 990px){
+    table#guild_members{
+        width: 95%;
+        margin: auto;
+        font-size: 90%;
+        text-align: center;
+    }
+}
 table#guild_members th{
     background-color: #00000088;
     font-weight: bold;

public/css/home.css

@@ -2,6 +2,21 @@ article#profile{
     text-align: center;
 }
 
+article#profile h3 span#user_name{
+    font-size: 160%;
+    font-weight: bold;
+    display: block;
+}
+
+article#profile h3 span#user_level{
+    font-size: 100%;
+}
+
+article#profile h3 span#user_level span#user_exp{
+    font-style: italic;
+    font-weight: normal;
+}
+
 article#profile div.profile_section{
     border: 0.2em solid var(--ui-color-border);
     max-width: 45%;
@@ -13,6 +28,14 @@ article#profile div.profile_section{
     text-align: center;
     background-color: #00000033;
 }
+@media screen and (max-width : 990px){
+    article#profile div.profile_section{
+        display: block;
+        margin: 0.5em auto;
+        max-width: 95%;
+        width: 95%;
+    }
+}
 
 article#profile div.profile_section h4{
     margin: 0 -0.5em 0.5em -0.5em;
@@ -27,6 +50,9 @@ article#profile div#rep div.monster_panel{
     font-size: 50%;
     margin: 0.2em;
 }
+@media screen and (max-width : 990px){
+    article#profile div#rep div.monster_panel{font-size: 70%;}
+}
 
 article#profile div#defense{
     position: relative;

public/css/monster.css

@@ -64,7 +64,7 @@ section#monster article#profile table#stats{
     display: inline-block;
     border: 0.1em solid black;
     color: #ffffff;
-    margin: 2em auto 2em auto;
+    margin: auto;
     border-collapse: collapse;
     border-radius: 0.4em;
 }
@@ -96,14 +96,17 @@ section#monster article#profile table#stats td.total{
 section#monster article#profile table#skills{
     display: block;
     vertical-align: top;
-    margin: 0.2em;
+    margin: 1em auto;
     color: #ffffff;
     text-align: center;
-    width: 95%;
+    width: 98%;
     position: relative;
     border-collapse: collapse;
+    table-layout: fixed;
 }
 
+section#monster article#profile table#skills th{border: none;}
+
 section#monster article#profile table#skills td{
     vertical-align: top;
     padding: 0.2em 0.5em;
@@ -145,6 +148,17 @@ section#monster article#profile table#skills span.skill_description{
     line-height: 0.95em;
 }
 
+section#monster article#profile table#skills span.skill_formula{
+    display: block;
+    text-align: center;
+    margin-top: 1em;
+    font-size: 50%;
+    color: #cccccc;
+    font-weight: bold;
+    font-style: italic;
+    font-family: monospace, monospace;
+}
+
 section#monster article#profile table#skills span.skill_effects{
     display: block;
     text-align: center;
@@ -177,27 +191,13 @@ section#monster article#profile table#skills td.skill_up span.description{
 }
 
 section#monster article#profile table#skills td.skill_up span.aquired{
-    color: #ffffff;
     font-weight: bold;
 }
 
-section#monster article#profile table#skill_averages{
-    margin: 3em auto 2em auto;
-    color: #ffffff;
+section#monster article#profile td#skill_averages{
     font-size: 90%;
-    border-top: 0.1em solid #ffffff;
-    padding-top: 2em;
-    padding-bottom: 0.5em;
-}
-
-section#monster article#profile table#skill_averages td.title{
-    padding-left: 4em;
-    text-align: right;
-}
-section#monster article#profile table#skill_averages td.value{
-    padding-right: 4em;
-    text-align: left;
-    padding-left: 1em;
+    font-style: italic;
+    border-top: 0.1em solid #cccccc;
 }
 
 section#runes{

public/css/monster_info.css

@@ -113,14 +113,17 @@ article.stage div.extra div.essences div.essence span{
     text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
 }
 
-article.stage div.skills{
+article.stage table.skills{
+    width: 100%;
     text-align: center;
-    margin: 0;
+    margin: 1em 0 0 0;
     padding: 0;
+    table-layout: fixed;
 }
 
-article.stage div.skills div.skill{
-    display: inline-block;
+article.stage table.skills tr th{border: none;}
+
+article.stage table.skills tr td.skill{
     vertical-align: top;
     margin: 0.2em;
     color: #ffffff;
@@ -128,20 +131,21 @@ article.stage div.skills div.skill{
     max-width: 20%;
 }
 
-article.stage div.skills div.skill img.skill_img{
-    width: 4em;
-    height: 4em;
+article.stage table.skills tr td.skill img.skill_img{
+    width: 3em;
+    height: 3em;
     border: 0.15em solid var(--ui-color-border);
     border-radius: 0.5em;
 }
 
-article.stage div.skills div.skill span.skill_name{
+article.stage table.skills tr td.skill span.skill_name{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
     display: block;
     font-weight: bold;
+    font-size: 90%;
 }
 
-article.stage div.skills div.skill span.skill_description{
+article.stage table.skills tr td.skill span.skill_description{
     font-size: 80%;
     font-style: italic;
     margin: 0;
@@ -150,118 +154,45 @@ article.stage div.skills div.skill span.skill_description{
     line-height: 0.95em;
 }
 
-article.stage div.skills div.skill span.skill_effects{
+article.stage table.skills tr td.skill span.skill_formula{
     display: block;
     text-align: center;
     margin-top: 1em;
-}
-
-article.stage div.skills div.skill span.skill_effects img.effect_img{
-    width: 1.5em;
-    height: 1.5em;
-    border: 0.1em solid #000000;
-    border-radius: 0.5em;
-}
-
-article.stage div.skills div.skill table.skill_up{
-    font-size: 70%;
-    margin: 0.5em auto 0 auto;
-    border-collapse: collapse;
-}
-
-
-article.stage div.skills div.skill table.skill_up td{
-    font-size: 90%;
-    padding: 0.2em;
-    border: 0 solid #000000;
-    line-height: 1em;
-}
-@media screen and (max-width : 990px){
-    article.stage div.skills div.skill table.skill_up td{
-        padding: 0;
-        border: 0.1em solid black;
-        line-height: 0.95em;
-        font-size: 70%;
-    }
-}
-
-article.stage div.skills div.skill table.skill_up td.level{
-    font-style: italic;
-    padding-right: 0.8em;
-    min-width: 2em;
-    font-size: 80%
-}
-@media screen and (max-width : 990px){
-    article.stage div.skills div.skill table.skill_up td.level{
-        font-size: 70%
-    }
-}
-
-article.stage div.transformation_skills{
-    text-align: center;
-    margin: 0;
-    padding: 0;
-}
-
-article.stage div.transformation_skills div.skill{
-    display: inline-block;
-    vertical-align: top;
-    margin: 0.2em;
-    color: #ffffff;
-    text-align: center;
-    max-width: 20%;
-}
-
-article.stage div.transformation_skills div.skill img.skill_img{
-    width: 4em;
-    height: 4em;
-    border: 0.15em solid var(--ui-color-border);
-    border-radius: 0.5em;
-}
-
-article.stage div.transformation_skills div.skill span.skill_name{
-    text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
-    display: block;
+    font-size: 50%;
+    color: #cccccc;
     font-weight: bold;
-}
-
-article.stage div.transformation_skills div.skill span.skill_description{
-    font-size: 80%;
     font-style: italic;
-    margin: 0;
-    padding: 0;
-    display: block;
-    line-height: 0.95em;
+    font-family: monospace, monospace;
 }
 
-article.stage div.transformation_skills div.skill span.skill_effects{
+article.stage table.skills tr td.skill span.skill_effects{
     display: block;
     text-align: center;
-    margin-top: 1em;
+    margin-top: 0.5em;
 }
 
-article.stage div.transformation_skills div.skill span.skill_effects img.effect_img{
+article.stage table.skills tr td.skill span.skill_effects img.effect_img{
     width: 1.5em;
     height: 1.5em;
     border: 0.1em solid #000000;
     border-radius: 0.5em;
 }
 
-article.stage div.transformation_skills div.skill table.skill_up{
+article.stage table.skills tr td.skill table.skill_up{
     font-size: 70%;
     margin: 0.5em auto 0 auto;
     border-collapse: collapse;
 }
 
 
-article.stage div.transformation_skills div.skill table.skill_up td{
+article.stage table.skills tr td.skill table.skill_up td{
     font-size: 90%;
     padding: 0.2em;
     border: 0 solid #000000;
     line-height: 1em;
 }
 @media screen and (max-width : 990px){
-    article.stage div.transformation_skills div.skill table.skill_up td{
+    article.stage table.skills tr td.skill table.skill_up td{
         padding: 0;
         border: 0.1em solid black;
         line-height: 0.95em;
@@ -269,14 +200,14 @@ article.stage div.transformation_skills div.skill table.skill_up td{
     }
 }
 
-article.stage div.transformation_skills div.skill table.skill_up td.level{
+article.stage table.skills tr td.skill table.skill_up td.level{
     font-style: italic;
     padding-right: 0.8em;
     min-width: 2em;
     font-size: 80%
 }
 @media screen and (max-width : 990px){
-    article.stage div.transformation_skills div.skill table.skill_up td.level{
+    article.stage table.skills tr td.skill table.skill_up td.level{
         font-size: 70%
     }
 }

public/css/report_runecraft.css

@@ -30,6 +30,9 @@ section.content article div.monster_runes > table.rune{
     vertical-align: top;
     margin: 0 -0.5em 0.5em 0.5em;
 }
+@media screen and (max-width : 990px){
+    section.content article div.monster_runes > table.rune{max-width: 95%;}
+}
 section.content article div.monster_runes > table.rune:before { content: '\A'; }
 
 section.content article div.monster_runes div.craft{
@@ -44,3 +47,15 @@ section.content article div.monster_runes div.craft{
     border-top-left-radius: 3em;
     border-bottom-left-radius: 3em;
 }
+@media screen and (max-width : 990px){
+    section.content article div.monster_runes div.craft{
+        display: block;
+        max-width: 95%;
+        min-width: 95%;
+        padding: 0.5em;
+        margin: 0.5em;
+        font-size: 80%;
+        background: none;
+
+    }
+}

public/css/report_skillup.css

@@ -78,13 +78,13 @@ section.content div.monster table#skill_averages{
 }
 @media screen and (max-width : 990px){
     section.content div.monster table#skill_averages{
-        display: revert;
-        margin: -2em auto auto auto;
-        font-size: 100%;
-        width: 70%;
+        display: block;
+        margin: 0 auto auto auto;
+        font-size: 80%;
         max-width: 90%;
+        text-align: left;
+        border-collapse: collapse;
     }
-
 }
 
 section.content div.monster table#skill_averages td.title{

public/css/runs.css

@@ -4,7 +4,7 @@ table#runs{
     width: 100%;
 }
 
-table#runs td.area, td.date, td.team, td.time, td.reward{
+table#runs td.area, td.date, td.team, td.time, td.reward, td.action{
     border-top: 0.1em solid #99999977;
 }
 
@@ -50,6 +50,10 @@ table#runs td.area div.area span.difficulty img.difficulty{
     filter: sepia(100%) saturate(500%) hue-rotate(10deg) saturate(200%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
 }
 
+table#runs td.date{
+    font-size: 70%;
+}
+
 table#runs td.team{
     font-size: 30%;
 }
@@ -65,6 +69,7 @@ table#runs td.team div.monster_panel.disabled{
 
 table#runs td.time{
     font-weight: bold;
+    font-size: 75%;
 }
 
 table#runs td.time span.ms{

public/css/ui.css

@@ -182,11 +182,26 @@ header div#logo h1#logo_text span.small{
     font-size: 60%;
     margin-left: -0.5em;
 }
+@media screen and (max-width : 990px){
+    header div#logo{
+        width: 8em;
+        font-size: 60%;
+    }
+    header div#logo img#logo_img{
+        max-width: 5em;
+        max-height: 3em;
+    }
+    header div#logo h1#logo_text span.large{
+        font-size: 50%;
+        margin: -0.2em;
+    }
+    header div#logo h1#logo_text span.small{display: none;}
+}
 header nav#menu{
     display: inline-block;
     height: 2em;
 }
-header nav a{
+header nav#menu a{
     font-size: 110%;
     font-weight: bold;
     text-transform: capitalize;
@@ -205,19 +220,24 @@ header nav a{
 }
 header nav#menu a:last-of-type{border-right: var(--nav-separator)}
 
-header nav a:hover{
+header nav#menu a:hover{
     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{
-        font-size: 0.6em;
-        margin: 0.2em 0.2em;
+    header nav#menu{height: 2.5em;}
+    header nav#menu a{
+        font-size: 70%;
+        padding: 0.6em 0.2em;
+        margin: 0.3em -0.3em;
         display: inline-block;
         text-align: center;
+        border-top: var(--nav-separator);
+        border-bottom: var(--nav-separator);
+        border-right: var(--nav-separator);
     }
-    header nav a:hover{
+    header nav#menu a:hover{
         text-shadow: 0 0 0 #000000;
     }
 }
@@ -227,21 +247,24 @@ header nav#profile{
 }
 header nav#profile a{
     border-left: 0;
-    /*font-size: 110%;
+    font-size: 110%;
     font-weight: bold;
     text-transform: capitalize;
     font-variant: small-caps;
-    margin: 0 -0.2em 0 0;
+    margin: 0;
     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);*/
+    text-shadow: var(--nav-shadow);
+}
+header nav#profile a:hover{
+    color: var(--nav-color-hover);
+    text-shadow: var(--nav-shadow-hover);
 }
 footer{
     font-size: 80%;
@@ -359,6 +382,7 @@ section h2{
     text-align: left;
     text-transform: capitalize;
     font-variant: small-caps;
+    height: 1.2em;
 }
 @media screen and (max-width : 990px){
     section h2{