Added an about section that is accessible through a menu button in the top right and filled it, moved source, settings, and how-to into the about section. Fixed minor issue where summary divs were not displaying the right color coding if they had no checks and were undiscovered.

tunictracker/tracker/static/tracker/assets/main.js

@@ -410,11 +410,19 @@ async function apply_summary_colors(summary) {
 			}
 		} else {
 			if (summary.entrances_remaining > 0) {
+				if (summary.entrances_found <= 0) {
+					summary.element.classList.add(
+						"from-highlight-undiscovered-light",
+						"to-highlight-undiscovered-dark",
+						"text-highlight-undiscovered-text"
+					);
+				} else {
 					summary.element.classList.add(
 						"from-highlight-entrances-light",
 						"to-highlight-entrances-dark",
 						"text-highlight-entrances-text"
 					);
+				}
 			} else {
 				summary.element.classList.add(
 					"from-highlight-empty-light",

tunictracker/tracker/templates/tracker/about/index.html

@@ -1,16 +1,19 @@
 {% load static %}
 <div class="absolute inset-x-0 right-0 sm:top-2 top-4">
-    <details class="group absolute right-2 open:w-auto open:static w-fit open:mx-4 flex p-2 space-y-2 open:rounded-md h-fit open:bg-bluelight-background open:shadow-sm open:shadow-[#242424]">
+    <details class="group py-2 absolute right-2 open:w-auto open:static w-fit open:mx-4 open:rounded-md h-auto open:bg-bluelight-background open:shadow-sm open:shadow-[#242424]">
-        <summary class="flex mt-2 mr-6 sm:m-0 group-open:m-0 content-none group-open:justify-end shake-trigger">
+        <summary class="block float-right p-2 mt-2 mr-6 list-none transition sm:m-0 group-open:m-0 content-none group-open:justify-end">
-            <img class="p-2 w-12 h-12 group-open:hidden shake rounded-md bg-bluelight-background shadow-sm shadow-[#242424]" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
+            <img class="p-2 w-12 h-12 group-open:hidden rounded-md bg-bluelight-background shadow-sm shadow-[#242424]" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
-            <div class="hidden group-open:flex group-open:w-full group-open:flex-col group-open:space-y-2">
+            <img class="hidden w-8 h-8 ml-2 rounded-md shadow-sm shadow-[#242424] bg-gradient-to-br from-highlight-empty-light to-highlight-empty-dark group-open:flex" src="{% static "tracker/images/x_mark.png" %}" alt="About this tracker" width="" height="" />
-                <p class="flex justify-start w-full text-lg">About this tracker</p>
-                <hr class="flex w-full border-2 border-bluelight-translucent-dark rounded-xl" />
-            </div>
-            <img class="hidden w-10 h-10 ml-2 rounded-md shadow-sm shadow-[#242424] bg-gradient-to-br from-highlight-empty-light to-highlight-empty-dark group-open:flex" src="{% static "tracker/images/x_mark.png" %}" alt="About this tracker" width="" height="" />
         </summary>
-        <details class="flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
+        <div class="block p-2 space-y-2">
+            <p class="w-full px-2 pt-2 text-lg">About</p>
+            <hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
+        </div>
+        <div class="flex flex-col flex-grow-0 p-2 space-y-2 max-h-[80svh] overflow-y-scroll">
+            {% include "tracker/howto/index.html" %}
+            <details class="flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
                 <summary class="justify-start">Settings</summary>
+                <hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
                 {% include "tracker/address/index.html" %}
                 <div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
                     <input onclick="hide_empty_summaries()"
@@ -22,15 +25,13 @@
                         Hide completed areas
                     </label>
                 </div>
-            <div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
+                {% comment %} <div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
-                <input onclick="notices_ur_debug()"
+                    <input onclick="notices_ur_debug()" class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" type="checkbox" id="show-debug" />
-                       class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]"
+                    <label for="show-debug" class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Sh-OwO Debug</label>
-                       type="checkbox"
+                </div> {% endcomment %}
-                       id="show-debug" />
+            </details>
-                <label for="show-debug"
+            {% include "tracker/credits/index.html" %}
-                       class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Sh-OwO Debug</label>
+            {% include "tracker/src/index.html" with tracker_fe_link="https://gitea.werefox.cafe/ada/tunic-tracker-redux" tracker_be_link="https://github.com/spaceglace/tunic-randomizer/" %}
         </div>
     </details>
-        {% include "tracker/howto/index.html" %}
-    </details>
 </div>

tunictracker/tracker/templates/tracker/credits/index.html

@@ -0,0 +1,36 @@
+{% load static %}
+<details class="open:pb-4 flex-shrink-0 flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text overflow-hidden">
+    <summary class="justify-start">Credits</summary>
+    <hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
+    <div class="rounded-md p-4 bg-gradient-to-br from-[#3333ff40] to-[#7777ff40]">
+        <div class="overflow-y-scroll overflow-x-auto rounded-md overscroll-y-contain max-h-[28rem] lg:max-h-[36rem] space-y-2">
+            <div class="w-full bg-gradient-to-br from-[#24242480] to-[#48484840] rounded-md p-2 overflow-x-scroll">
+                <div class="flex flex-row mx-auto space-x-2 w-fit min-h-[21rem]">
+                    <a class="rounded-md" href="https://werefox.cafe" target="_blank">
+                        <img class="flex-shrink-0 mx-auto rounded-md min-h-[21rem] min-w-[15rem] max-h-96 w-fit" src="{% static "tracker/images/trading_cards/alice.png" %}" alt="A TUNIC themed trading card for &quot;Alice Werefox,&quot; which pictures her character lying on the ground near a chest in a small alcove with text reading: &quot;Everything is accessible with ladder storage if you try hard enough.&quot;" height="" width="" />
+                    </a>
+                    <a class="rounded-md"
+                       href="https://discordapp.com/users/105891707777748992"
+                       target="_blank">
+                        <img class="flex-shrink-0 mx-auto rounded-md min-h-[21rem] min-w-[15rem]  max-h-96"  src="{% static "tracker/images/trading_cards/glace.png" %}" alt="A TUNIC themed trading card for &quot;Glace Painbringer,&quot; which pictures her character shooting an icebolt with text reading: &quot;The only kind of person capable of inflicting such pain... is one who has sustained a great deal worse.&quot;" height="" width="" />
+                    </a>
+                    <a class="rounded-md"
+                       href="https://twitch.tv/fletchisafurry"
+                       target="_blank">
+                        <img class="flex-shrink-0 mx-auto rounded-md min-h-[21rem] min-w-[15rem]  max-h-96" src="{% static "tracker/images/trading_cards/fletcher.png" %}" alt="A TUNIC themed trading card for &quot;Fletcher, Fleet Fox,&quot; which pictures their character dashing with text reading: &quot;Deftly jumping from project to project, there is no effort too foolhardy for them, no extreme too distant for consideration.&quot;." height="" width="" />
+                    </a>
+                </div>
+            </div>
+            <hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
+            <div class="p-2 space-y-2">
+                This tracker was created by <a class="underline text-bluelight-link"
+    href="https://werefox.cafe"
+    target="_blank">Alice Werefox</a> and <a class="underline text-bluelight-link"
+    href="https://discordapp.com/users/105891707777748992"
+    target="_blank">glace</a> with special help from <a class="underline text-bluelight-link"
+    href="https://twitch.tv/fletchisafurry"
+    target="_blank">Fletcher</a> whom provided the custom art assets.
+            </div>
+        </div>
+    </div>
+</details>

tunictracker/tracker/templates/tracker/howto/index.html

@@ -1,4 +1,4 @@
-<details class="py-2 px-4 flex flex-col space-y-2 max-w-full text-md rounded-lg bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
+<details class="py-2 px-4 flex flex-col space-y-2 max-w-full text-md rounded-lg bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
     <summary class="justify-start">How To Use This Tracker</summary>
     <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
     <details class="py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">

tunictracker/tracker/templates/tracker/index.html

@@ -15,7 +15,7 @@
                                          width="32"
                                          height="32" />
                                 </span>
-                            <div class="min-w-0 my-auto text-xl align-middle overflow-clip sm:text-3xl">Tunic Transition Tracker</div>
+                                <div class="min-w-0 pr-8 my-auto text-xl align-middle overflow-clip sm:text-3xl">Tunic Transition Tracker</div>
                             </div>
                             <div class="flex pb-2 text-lg sm:text-2xl max-w-fit font-trunic">
                                 (
@@ -90,8 +90,9 @@
                         </details>
                     </div>
                 {% else %}
-                <div id="no_data" />{% endif %}</div>
+                    <div id="no_data"></div>
-        {% include "tracker/src/index.html" with tracker_fe_link="https://gitea.werefox.cafe/ada/tunic-tracker-redux" tracker_be_link="https://github.com/spaceglace/TunicTransitionTracker" %}
+                {% endif %}
+            </div>
         </div>
     </div>
 {% endblock content %}

tunictracker/werefoxtheme/static_src/src/styles.css

@@ -10,3 +10,6 @@
 	font-family: "Trunic-Regular";
 	src: url("/static/fonts/Trunic-Regular.otf");
 }
+details summary::-webkit-details-marker {
+	display: none;
+}