commit 71b38778f1bd5865bc0eca8994f776e4b08880a4
parent 6379803a456421a19e393483ccbcff64123751d8
Author: Emily Doherty <git@emily.sh>
Date: Sun, 12 Feb 2023 03:01:03 -0800
Added 'details' sections to provide more information about the site
Diffstat:
2 files changed, 66 insertions(+), 23 deletions(-)
diff --git 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
@@ -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;
