hardlink to stats page added in app

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template, g, abort, request, jsonify, send_from_directory
+from flask import Flask, render_template, g, abort, request, jsonify, send_from_directory, url_for
 import sqlite3, os, csv
 
 from src.python.breed import get_breed_id, get_breeding_pairs, get_used_in_breeds

static/style/output.css

@@ -548,6 +548,10 @@ video {
   grid-column: span 1 / span 1;
 }
 
+.float-left {
+  float: left;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -561,6 +565,10 @@ video {
   margin-right: auto;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-4 {
   margin-left: 1rem;
 }
@@ -577,10 +585,6 @@ video {
   margin-top: 1rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .block {
   display: block;
 }
@@ -651,14 +655,19 @@ video {
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.bg-neutral-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
 .bg-slate-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(15 23 42 / var(--tw-bg-opacity));
 }
 
-.bg-neutral-800 {
+.bg-gray-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
 .p-2 {
@@ -700,6 +709,11 @@ video {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -710,11 +724,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .font-black {
   font-weight: 900;
 }
@@ -727,6 +736,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .text-purple-400 {
   --tw-text-opacity: 1;
   color: rgb(192 132 252 / var(--tw-text-opacity));

templates/app.html

@@ -2,50 +2,59 @@
 <h1 class="text-2xl font-black text-white">
   Welcome to the Dragon Warrior Monsters 2 App
 </h1>
+<br />
+<label for="familyDropdown">Select Family:</label>
+<select id="familyDropdown" class="p-2 rounded-md bg-gray-900">
+  <option value="">All Families</option>
+</select>
+<br />
+<label for="monsterDropdown">Select Monster:</label>
+<select
+  id="monsterDropdown"
+  class="p-2 rounded-md bg-slate-900 mt-2"
+  onchange="updateMonsterSprite()"
+>
+  <option value="">All Monsters</option>
+</select>
 
-  <label for="familyDropdown">Select Family:</label>
+<br />
-  <select id="familyDropdown" class="p-2 rounded-md bg-slate-900">
-    <option value="">All Families</option>
-  </select>
 
-  <label for="monsterDropdown">Select Monster:</label>
+<div id="modules" class="flex mt-4">
-  <select
+  <iframe
-    id="monsterDropdown"
+    id="monsterIframe"
-    class="p-2 rounded-md bg-slate-900"
+    src=""
-    onchange="updateMonsterSprite()"
+    class="pl-2 pr-2 ml-4 border-2 rounded-md border-slate-400"
+    height="456"
+    width="280"
   >
-    <option value="">All Monsters</option>
+  </iframe>
-  </select>
+  <div class="grid items-center justify-center grid-cols-1 ml-4">
-
-  <div id="modules" class="flex mt-4">
     <iframe
-      id="monsterIframe"
+      id="monsterSpriteIframe"
       src=""
-      class="pl-2 pr-2 ml-4 border-2 rounded-md border-slate-400"
+      class="p-2 ml-8 border-2 rounded-md border-slate-400"
-      height="456"
+      height="200"
-      width="280"
+      width="200"
+    >
+    </iframe>
+    <iframe
+      id="breedingIframe"
+      src=""
+      class="p-2 mt-4 border-2 rounded-md border-slate-400"
+      height="200"
+      width="272"
     >
     </iframe>
-    <div class="grid items-center justify-center grid-cols-1 ml-4">
-      <iframe
-        id="monsterSpriteIframe"
-        src=""
-        class="p-2 ml-8 border-2 rounded-md border-slate-400"
-        height="200"
-        width="200"
-      >
-      </iframe>
-      <iframe
-        id="breedingIframe"
-        src=""
-        class="p-2 mt-4 border-2 rounded-md border-slate-400"
-        height="200"
-        width="272"
-      >
-      </iframe>
-    </div>
   </div>
 </div>
+<div class="mt-4 text-center">
+  <a
+    href="https://dwm.happytavern.co/skills"
+    class="text-purple-400 hover:underline float-left font-bold text-2xl"
+    >Go to Skills Data Page</a
+  >
+</div>
+<br /><br />
 <div class="mx-auto footer">
   <h2 class="m-2 text-2xl font-bold">About The App</h2>
   <p class="leading-7">
@@ -57,7 +66,7 @@
     repository. Feel free to explore the code, report issues, and submit pull
     requests.
   </p>
-  <div class="mt-4 ">
+  <div class="mt-4">
     <a
       href="https://git.happytavern.co/oceanslim/dwm-app"
       target="_blank"