From 71b38778f1bd5865bc0eca8994f776e4b08880a4 Mon Sep 17 00:00:00 2001
From: Emily Doherty <git@emily.sh>
Date: Sun, 12 Feb 2023 03:01:03 -0800
Subject: [PATCH] Added 'details' sections to provide more information about
 the site

---
 src/index.html | 58 +++++++++++++++++++++++++++++++++-----------------
 src/style.css  | 31 ++++++++++++++++++++++++---
 2 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/src/index.html b/src/index.html
index 754c9bc..3dbe75d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,32 +20,50 @@
                 <canvas id="token-chart"></canvas>
                 <div id="option_select">
                     <p>
-                    <label for="region">Region:</label>
-                    <select name="region" id="region">
-                        <option value="us">US</option>
-                        <option value="eu">EU</option>
-                        <option value="kr">KR</option>
-                        <option value="tw">TW</option>
-                    </select>
+                        <label for="region">Region:</label>
+                        <select name="region" id="region">
+                            <option value="us">US</option>
+                            <option value="eu">EU</option>
+                            <option value="kr">KR</option>
+                            <option value="tw">TW</option>
+                        </select>
+                    </p>
+                    <p>
+                        <label for="time">Time Selection:</label>
+                        <select name="time" id="time">
+                            <option value="72h">3 Days</option>
+                            <option value="168h">7 Days</option>
+                            <option value="336h">14 Days</option>
+                            <option value="720h">1 Month</option>
+                            <option value="90d">3 Months</option>
+                            <option value="6m">6 Months</option>
+                            <option value="1y">1 Year</option>
+                            <option value="2y">2 Years</option>
+                            <option value="all">All Available</option>
+                        </select>
                     </p>
                     <p>
-                    <label for="time">Time Selection:</label>
-                    <select name="time" id="time">
-                        <option value="72h">3 Days</option>
-                        <option value="168h">7 Days</option>
-                        <option value="336h">14 Days</option>
-                        <option value="720h">1 Month</option>
-                        <option value="90d">3 Months</option>
-                        <option value="6m">6 Months</option>
-                        <option value="1y">1 Year</option>
-                        <option value="2y">2 Years</option>
-                        <option value="all">All Available</option>
-                    </select>
                     </p>
                 </div>
+                <details id="about">
+                    <summary>About this Site</summary>
+                    This is a site developed to track the value of the World of Warcraft Token from various
+                    regions over time. I developed it because I wanted a quick and simple way to track the
+                    cost without being advertised to or tracked, and to play around with various "serverless"
+                    technologies. As such, my promise to you is never to use any tracking Javascript, and the
+                    only logging is for debugging purposes of the backend - which does not get IPs.
+                </details>
+                <details id="what-is">
+                    <summary>What is the WoW Token</summary>
+                    The World of Warcraft Token is a first-party system developed by Blizzard to allow you
+                    to either spend currency (local denomination or Blizzard Balance) and convert it to gold
+                    in retail World of Warcraft, or use gold to buy game time or Blizzard Balance. To find out
+                    more, visit the support article on Blizzard's website
+                    <a href="https://us.battle.net/support/en/article/31218">here</a>.
+                </details>
                 <div id="source">
                     <p>
-                        <a href="https://blog.emily.sh/wowtoken-app/">About and Source</a>
+                        <a href="https://blog.emily.sh/wowtoken-app/">Source</a>
                     </p>
                 </div>
             </div>
diff --git a/src/style.css b/src/style.css
index 5761326..ee989f6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -181,7 +181,7 @@ html {
     margin: 1em;
 }
 /*body {
-  
+
 }*/
 code {
     background-color: #073642;
@@ -309,7 +309,7 @@ h6 {
     max-width: 85%;
     border: 1pt solid #586e75;
     padding: 1em;
-}   
+}
 
 .flex-container > div {
     flex: 100%;
@@ -324,6 +324,32 @@ p {
     line-height: 3em;
 }
 
+details {
+    background-color: #073642;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: 0.5em 0.5em 0;
+    font-size: 17px;
+    line-height: 1.5em;
+    margin: .5em 5vw;
+}
+
+details > summary {
+    color: #aaaaaa;
+    cursor: pointer;
+    font-weight: bold;
+    margin: -0.5em -0.5em 0;
+    padding: 0.5em;
+}
+
+details[open] {
+    padding: 0.5em;
+}
+
+details[open] summary {
+    border-bottom: 1px solid #aaa;
+    margin-bottom: 0.5em;
+}
 
 #option_select {
     font-size: 20px;
@@ -352,7 +378,6 @@ p {
     flex-direction: column;
 }
 
-
 .lds-ripple {
     position: relative;
     align-self: center;