wowtoken-app/wowtoken.app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added 'details' sections to provide more information about the site

Browse Source
This commit is contained in:
Emily Doherty 2023-02-12 03:01:03 -08:00
parent 6379803a45
commit 71b38778f1
2 changed files with 66 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/index.html
View File

@ -20,32 +20,50 @@
<canvas id="token-chart"></canvas> <canvas id="token-chart"></canvas>
<div id="option_select"> <div id="option_select">
<p> <p>
<label for="region">Region:</label> <label for="region">Region:</label>
<select name="region" id="region"> <select name="region" id="region">
<option value="us">US</option> <option value="us">US</option>
<option value="eu">EU</option> <option value="eu">EU</option>
<option value="kr">KR</option> <option value="kr">KR</option>
<option value="tw">TW</option> <option value="tw">TW</option>
</select> </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>
<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>
</div> </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"> <div id="source">
<p> <p>
<a href="https://blog.emily.sh/wowtoken-app/">About and Source</a> <a href="https://blog.emily.sh/wowtoken-app/">Source</a>
</p> </p>
</div> </div>
</div> </div>

31
src/style.css
View File

@ -181,7 +181,7 @@ html {
margin: 1em; margin: 1em;
} }
/*body { /*body {
}*/ }*/
code { code {
background-color: #073642; background-color: #073642;
@ -309,7 +309,7 @@ h6 {
max-width: 85%; max-width: 85%;
border: 1pt solid #586e75; border: 1pt solid #586e75;
padding: 1em; padding: 1em;
} }
.flex-container > div { .flex-container > div {
flex: 100%; flex: 100%;
@ -324,6 +324,32 @@ p {
line-height: 3em; 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 { #option_select {
font-size: 20px; font-size: 20px;
@ -352,7 +378,6 @@ p {
flex-direction: column; flex-direction: column;
} }
.lds-ripple { .lds-ripple {
position: relative; position: relative;
align-self: center; align-self: center;