From 921854e4c09c3962d3b0c6b7f70dd99404164c29 Mon Sep 17 00:00:00 2001
From: 0ceanSlim <chriskerr@gmx.com>
Date: Thu, 1 Feb 2024 10:30:50 -0500
Subject: [PATCH] added footer module and link to app in readme

---
 app.py                  |   3 ++
 readme.md               |   2 +
 static/style/output.css | 108 ++++++++++++++++++++++++++++++++++++++--
 templates/footer.html   |  29 +++++++++++
 templates/index.html    |  11 ++++
 5 files changed, 148 insertions(+), 5 deletions(-)
 create mode 100644 templates/footer.html

diff --git a/app.py b/app.py
index a4f4094..d6cc9b5 100644
--- a/app.py
+++ b/app.py
@@ -256,6 +256,9 @@ def get_breeding_info(breed_id):
 
     return base_combinations, mate_combinations
 
+@app.route("/footer")
+def show_footer():
+    return render_template("footer.html")
 
 if __name__ == "__main__":
     app.run(debug=True)
diff --git a/readme.md b/readme.md
index a0ce634..a92d4c8 100644
--- a/readme.md
+++ b/readme.md
@@ -4,6 +4,8 @@
 
 This Flask app is designed to use data from Dragon Warrior Monsters 2 to create an intuitive web UI. The app allows users to lookup monster information, and eventually breeding pairs and skills. Inspired by the [dwm2-tools](https://github.com/MetroWind/dwm2-tools) project.
 
+### You can try the current release [here](https://dwm.happytavern.co) !
+
 <img src=https://git.happytavern.co/OceanSlim/dwm-app/raw/branch/main/static/img/appScreen.png style="border-radius: 10px; width: 400px;">
 
 ## Features
diff --git a/static/style/output.css b/static/style/output.css
index 0b111e0..eba31d0 100644
--- a/static/style/output.css
+++ b/static/style/output.css
@@ -540,6 +540,40 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .static {
   position: static;
 }
@@ -552,6 +586,19 @@ video {
   margin: 1rem;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .ml-4 {
   margin-left: 1rem;
 }
@@ -564,6 +611,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .flex {
   display: flex;
 }
@@ -616,11 +667,6 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
-.bg-purple-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
-}
-
 .p-2 {
   padding: 0.5rem;
 }
@@ -629,6 +675,11 @@ video {
   padding: 1rem;
 }
 
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -645,11 +696,20 @@ video {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.font-sans {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -668,12 +728,50 @@ video {
   font-weight: 700;
 }
 
+.leading-7 {
+  line-height: 1.75rem;
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-teal-500 {
+  --tw-text-opacity: 1;
+  color: rgb(20 184 166 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-purple-600 {
+  --tw-text-opacity: 1;
+  color: rgb(147 51 234 / var(--tw-text-opacity));
+}
+
+.text-purple-400 {
+  --tw-text-opacity: 1;
+  color: rgb(192 132 252 / var(--tw-text-opacity));
+}
+
 .hover\:text-red-700:hover {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
 }
+
+.hover\:text-purple-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(126 34 206 / var(--tw-text-opacity));
+}
+
+.hover\:text-purple-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(233 213 255 / var(--tw-text-opacity));
+}
+
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
diff --git a/templates/footer.html b/templates/footer.html
new file mode 100644
index 0000000..2cd6fd9
--- /dev/null
+++ b/templates/footer.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<body class="font-mono text-white bg-slate-700">
+
+
+        <div class="container mx-auto">
+            <h2 class="m-2 text-2xl font-bold">About The App</h2>
+            <p class="leading-7">
+                Dragon Warrior Monsters 2 App, an open-source project where you can explore information about monsters, breeding pairs, and more.
+            </p>
+            <p class="mt-4 leading-7">
+                You can contribute to the development and improvement of this app on our Git repository. Feel free to explore the code, report issues, and submit pull requests.
+            </p>
+            <div class="mt-4 text-purple-400 hover:text-purple-200">
+                <a href="https://git.happytavern.co/oceanslim/dwm-app" target="_blank" class="text-teal-500 hover:underline">
+                    View the git repository
+                </a>
+            </div>
+        </div>
+
+
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index 24bc49e..ae6485b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -38,7 +38,18 @@
           width="272"
         >
         </iframe>
+
+        
       </div>
+
+      <iframe
+          id="footerIframe"
+          src="http://localhost:5000/footer"
+          class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
+          height="240"
+          width="800"
+        >
+        </iframe>
     </div>
     <script src="{{ url_for('static', filename='js/index.js') }}"></script>
     <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>