Compare commits
12 Commits
feature/ca
...
09ec5f0d4d
| Author | SHA1 | Date | |
|---|---|---|---|
| 09ec5f0d4d | |||
| 36ba83d9be | |||
| 8f6cbbc75d | |||
| 354381936d | |||
| 214910aa25 | |||
| ac12a9c55d | |||
| fa21b50b28 | |||
| ae789181f4 | |||
| a1b1dc63ff | |||
| 249f9e281f | |||
| bda9edf3df | |||
| e090a93605 |
@@ -3,7 +3,7 @@ version: 0.2
|
|||||||
phases:
|
phases:
|
||||||
install:
|
install:
|
||||||
runtime-versions:
|
runtime-versions:
|
||||||
nodejs: 16
|
nodejs: 18
|
||||||
commands:
|
commands:
|
||||||
- echo Installing dependencies...
|
- echo Installing dependencies...
|
||||||
- npm install
|
- npm install
|
||||||
|
|||||||
740
package-lock.json
generated
740
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -15,8 +15,7 @@
|
|||||||
"webpack-cli": "^4.7.2"
|
"webpack-cli": "^4.7.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cash-dom": "^8.1.5",
|
"chart.js": "^4.4.0",
|
||||||
"chart.js": "^4.3.0",
|
|
||||||
"chartjs-adapter-dayjs-3": "^1.2.3",
|
"chartjs-adapter-dayjs-3": "^1.2.3",
|
||||||
"css-minimizer-webpack-plugin": "^5.0.0",
|
"css-minimizer-webpack-plugin": "^5.0.0",
|
||||||
"dayjs": "^1.11.7"
|
"dayjs": "^1.11.7"
|
||||||
|
|||||||
114
src/index.html
114
src/index.html
@@ -1,71 +1,89 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>WoW Historical Token Prices Tracker</title>
|
<title>WoW Classic Historical Token Prices Tracker</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) in game token, including the US, EU, TW, and KR regions. Prices updated every minute. Simple, quick, and easy info, no ads or tracking, ever.">
|
<meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) Classic in game token, including the US, EU, TW, and KR regions. Prices updated every minute. Simple, quick, and easy info, no ads or tracking, ever.">
|
||||||
<link rel="preconnect" href="https://data.wowtoken.app">
|
<link rel="preconnect" href="https://data.wowtoken.app">
|
||||||
<link rel="dns-prefetch" href="https://data.wowtoken.app">
|
<link rel="dns-prefetch" href="https://data.wowtoken.app">
|
||||||
<link rel="preload" href="https://data.wowtoken.app/token/current.json" as="fetch" type="application/json" crossorigin="anonymous">
|
<link rel="preload" href="https://data.wowtoken.app/classic/token/current.json" as="fetch" type="application/json" crossorigin="anonymous">
|
||||||
<link rel="preload" href="https://data.wowtoken.app/token/history/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
|
<link rel="preload" href="https://data.wowtoken.app/classic/token/history/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="flex-container">
|
<div class="flex-container">
|
||||||
<div><h1>1 Token = <u id="token">0</u> Gold</h1></div>
|
<div><h1>1 Classic Token = <u id="token">0</u> Gold</h1></div>
|
||||||
<div id="chart-frame">
|
<div id="chart-frame">
|
||||||
<div class="lds-ripple" id="loader"><div></div><div></div></div>
|
<div class="lds-ripple" id="loader"><div></div><div></div></div>
|
||||||
<canvas id="token-chart"></canvas>
|
<canvas id="token-chart"></canvas>
|
||||||
<div id="option_select">
|
<div id="option_select">
|
||||||
<p>
|
<fieldset id="basic-options">
|
||||||
<label for="region">Region:</label>
|
<legend>Basic chart options</legend>
|
||||||
<select name="region" id="region">
|
<div>
|
||||||
<option value="us">US</option>
|
<label for="region">Region:</label>
|
||||||
<option value="eu">EU</option>
|
<select name="region" id="region">
|
||||||
<option value="kr">KR</option>
|
<option value="us">US</option>
|
||||||
<option value="tw">TW</option>
|
<option value="eu">EU</option>
|
||||||
</select>
|
<option value="kr">KR</option>
|
||||||
</p>
|
<option value="tw">TW</option>
|
||||||
<p>
|
</select>
|
||||||
<label for="time">Time Selection:</label>
|
</div>
|
||||||
<select name="time" id="time">
|
<div>
|
||||||
<option value="72h">3 Days</option>
|
<label for="time">Time Selection:</label>
|
||||||
<option value="168h">7 Days</option>
|
<select name="time" id="time">
|
||||||
<option value="336h">14 Days</option>
|
<option value="72h">3 Days</option>
|
||||||
<option value="720h">1 Month</option>
|
<option value="168h">7 Days</option>
|
||||||
<option value="90d">3 Months</option>
|
<option value="336h">14 Days</option>
|
||||||
<option value="6m">6 Months</option>
|
<option value="720h">1 Month</option>
|
||||||
<option value="1y">1 Year</option>
|
<option value="90d">3 Months</option>
|
||||||
<option value="2y">2 Years</option>
|
<option value="all">All Available</option>
|
||||||
<option value="all">All Available</option>
|
</select>
|
||||||
</select>
|
</div>
|
||||||
</p>
|
<div>
|
||||||
|
<label for="enable-advanced">Enable advanced charting options:</label>
|
||||||
|
<input type="checkbox" id="enable-advanced" name="enable-advanced" />
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset id="advanced-options">
|
||||||
|
<legend>Advanced chart options</legend>
|
||||||
|
<fieldset id="advanced-region-options">
|
||||||
|
<legend>Multi-Region Selection</legend>
|
||||||
|
<label for="adv-r-us">US:</label>
|
||||||
|
<input type="checkbox" id="adv-r-us" name="adv-r-us" value="enable" disabled />
|
||||||
|
<label for="adv-r-eu">EU:</label>
|
||||||
|
<input type="checkbox" id="adv-r-eu" name="adv-r-eu" value="enable" disabled />
|
||||||
|
<label for="adv-r-kr">KR:</label>
|
||||||
|
<input type="checkbox" id="adv-r-kr" name="adv-r-kr" value="enable" disabled />
|
||||||
|
<label for="adv-r-tw">TW:</label>
|
||||||
|
<input type="checkbox" id="adv-r-tw" name="adv-r-tw" value="enable" disabled/>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset id="basic-smoothing">
|
||||||
|
<label for="aggregate">Smoothing Function:</label>
|
||||||
|
<select name="aggregate" id="aggregate">
|
||||||
|
<option id='agg_none' value="none">None</option>
|
||||||
|
<option id='agg_davg' value="daily_mean">Daily Average</option>
|
||||||
|
<option id='agg_wavg' value="weekly_mean" disabled>Weekly Average</option>
|
||||||
|
</select>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset id="y-start-options">
|
||||||
|
<label for="y-start">Start y-axis at 0:</label>
|
||||||
|
<input type="checkbox" id="y-start" name="y-start" value="enable" disabled/>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
<div class="tooltip">
|
<div class="tooltip">
|
||||||
<button id="copyURLButton">
|
<button id="copyURLButton">
|
||||||
<span class="tooltiptext" id="urlTooltip">Copy to clipboard</span>
|
<span class="tooltiptext" id="urlTooltip">Copy to clipboard</span>
|
||||||
Copy URL to this Chart
|
Copy URL to this Chart
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><em>Looking for the retail WoW Token price? Find it <a href="https://wowtoken.app">here!</a></em></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<details id="advanced">
|
|
||||||
<summary>Advanced Options</summary>
|
|
||||||
<p>
|
|
||||||
<label for="aggregate">Aggregate Function:</label>
|
|
||||||
<select name="aggregate" id="aggregate">
|
|
||||||
<option id='agg_none' value="none">None</option>
|
|
||||||
<option id='agg_dmax' value="daily_max">Daily Maximum</option>
|
|
||||||
<option id='agg_dmin' value="daily_min">Daily Minimum</option>
|
|
||||||
<option id='agg_davg' value="daily_mean">Daily Average</option>
|
|
||||||
<option id='agg_wmax' value="weekly_max" disabled>Weekly Maximum</option>
|
|
||||||
<option id='agg_wmin' value="weekly_min" disabled>Weekly Minimum</option>
|
|
||||||
<option id='agg_wavg' value="weekly_mean" disabled>Weekly Average</option>
|
|
||||||
</select>
|
|
||||||
</p>
|
|
||||||
<em>More coming soon™</em>
|
|
||||||
</details>
|
|
||||||
<details id="about">
|
<details id="about">
|
||||||
<summary>About this Site</summary>
|
<summary>About this Site</summary>
|
||||||
This is a site developed to track the value of the World of Warcraft Token from various
|
This is a site developed to track the value of the World of Warcraft Classic Token from various
|
||||||
regions over time. I developed it because I wanted a quick and simple way to track the
|
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"
|
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
|
technologies. As such, my promise to you is never to use any tracking Javascript, and the
|
||||||
@@ -73,10 +91,10 @@
|
|||||||
</details>
|
</details>
|
||||||
<details id="what-is">
|
<details id="what-is">
|
||||||
<summary>What is the WoW Token</summary>
|
<summary>What is the WoW Token</summary>
|
||||||
The World of Warcraft Token is a first-party system developed by Blizzard to allow you
|
The World of Warcraft Classic 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
|
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
|
in classic World of Warcraft, or use gold to buy game time.
|
||||||
more, visit the support article on Blizzard's website
|
To find out more, visit the support article on Blizzard's website
|
||||||
<a href="https://us.battle.net/support/en/article/31218">here</a>.
|
<a href="https://us.battle.net/support/en/article/31218">here</a>.
|
||||||
</details>
|
</details>
|
||||||
<div id="source">
|
<div id="source">
|
||||||
|
|||||||
106
src/index.js
106
src/index.js
@@ -9,10 +9,11 @@ import {
|
|||||||
Title,
|
Title,
|
||||||
Tooltip
|
Tooltip
|
||||||
} from 'chart.js';
|
} from 'chart.js';
|
||||||
import $ from 'cash-dom';
|
|
||||||
import 'chartjs-adapter-dayjs-3';
|
import 'chartjs-adapter-dayjs-3';
|
||||||
import "./style.css"
|
import "./style.css"
|
||||||
|
|
||||||
|
// TODO: This file should be seperated into multiple with better ownership
|
||||||
|
|
||||||
Chart.register(
|
Chart.register(
|
||||||
LineElement,
|
LineElement,
|
||||||
PointElement,
|
PointElement,
|
||||||
@@ -33,6 +34,26 @@ const currentPriceHash = {
|
|||||||
kr: 0,
|
kr: 0,
|
||||||
tw: 0
|
tw: 0
|
||||||
};
|
};
|
||||||
|
let chartData = {
|
||||||
|
us: [],
|
||||||
|
eu: [],
|
||||||
|
kr: [],
|
||||||
|
tw: []
|
||||||
|
}
|
||||||
|
let chartOptions = {
|
||||||
|
us: {
|
||||||
|
color: 'gold'
|
||||||
|
},
|
||||||
|
eu: {
|
||||||
|
color: 'red'
|
||||||
|
},
|
||||||
|
kr: {
|
||||||
|
color: 'white'
|
||||||
|
},
|
||||||
|
tw: {
|
||||||
|
color: 'pink'
|
||||||
|
}
|
||||||
|
}
|
||||||
let chartJsData;
|
let chartJsData;
|
||||||
let ctx;
|
let ctx;
|
||||||
let tokenChart;
|
let tokenChart;
|
||||||
@@ -45,7 +66,7 @@ function populateChart() {
|
|||||||
data: {
|
data: {
|
||||||
datasets: [{
|
datasets: [{
|
||||||
borderColor: 'gold',
|
borderColor: 'gold',
|
||||||
label: currentRegionSelection.toUpperCase() + " WoW Token Price",
|
label: currentRegionSelection.toUpperCase() + " WoW Classic Token Price",
|
||||||
data: chartJsData,
|
data: chartJsData,
|
||||||
cubicInterpolationMode: 'monotone',
|
cubicInterpolationMode: 'monotone',
|
||||||
pointRadius: 0
|
pointRadius: 0
|
||||||
@@ -58,7 +79,21 @@ function populateChart() {
|
|||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
type: 'time'
|
type: 'time',
|
||||||
|
ticks: {
|
||||||
|
color: '#a7a4ab',
|
||||||
|
font: {
|
||||||
|
size: 18,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
ticks: {
|
||||||
|
color: '#a7a4ab',
|
||||||
|
font: {
|
||||||
|
size: 18,
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -67,7 +102,7 @@ function populateChart() {
|
|||||||
|
|
||||||
|
|
||||||
async function callUpdateURL() {
|
async function callUpdateURL() {
|
||||||
let resp = await fetch("https://data.wowtoken.app/token/current.json");
|
let resp = await fetch("https://data.wowtoken.app/classic/token/current.json");
|
||||||
let data = await resp.json();
|
let data = await resp.json();
|
||||||
updateTokens(data);
|
updateTokens(data);
|
||||||
}
|
}
|
||||||
@@ -106,7 +141,7 @@ async function aggregateFunctionToggle() {
|
|||||||
// so if the need to be updated in the future we can do so easily
|
// so if the need to be updated in the future we can do so easily
|
||||||
const smallTimes = ['72h', '168h', '336h'];
|
const smallTimes = ['72h', '168h', '336h'];
|
||||||
const longTimes = ['720h', '30d', '2190h', '90d', '1y', '2y', '6m', 'all'];
|
const longTimes = ['720h', '30d', '2190h', '90d', '1y', '2y', '6m', 'all'];
|
||||||
const idsToModify = ['agg_wmax', 'agg_wmin', 'agg_wavg']
|
const idsToModify = ['agg_wavg']
|
||||||
if (smallTimes.includes(currentTimeSelection)) {
|
if (smallTimes.includes(currentTimeSelection)) {
|
||||||
for (const id of idsToModify) {
|
for (const id of idsToModify) {
|
||||||
let ele = document.getElementById(id);
|
let ele = document.getElementById(id);
|
||||||
@@ -170,8 +205,20 @@ function updateAggregatePreference(newAggregate) {
|
|||||||
pullChartData().then(populateChart);
|
pullChartData().then(populateChart);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleAdvancedSetting() {
|
||||||
|
let element = document.getElementById('advanced-options')
|
||||||
|
if (document.getElementById('enable-advanced').checked)
|
||||||
|
{
|
||||||
|
element.style.display = 'flex';
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
element.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function urlBuilder() {
|
function urlBuilder() {
|
||||||
let url = "https://data.wowtoken.app/token/history/";
|
let url = "https://data.wowtoken.app/classic/token/history/";
|
||||||
if (currentAggregateSelection !== 'none') {
|
if (currentAggregateSelection !== 'none') {
|
||||||
url += `${currentAggregateSelection}/`
|
url += `${currentAggregateSelection}/`
|
||||||
}
|
}
|
||||||
@@ -195,7 +242,7 @@ async function pullChartData() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function formatToken() {
|
function formatToken() {
|
||||||
$("#token").html(currentPriceHash[currentRegionSelection].toLocaleString());
|
document.getElementById("token").innerText = currentPriceHash[currentRegionSelection].toLocaleString();
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: These maybe able to be collapsed into a single function with params or a lambda
|
// TODO: These maybe able to be collapsed into a single function with params or a lambda
|
||||||
@@ -211,7 +258,7 @@ function detectRegionQuery(urlSearchParams) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log("An incorrect or malformed region selection was made in the query string");
|
console.warn("An incorrect or malformed region selection was made in the query string");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -229,12 +276,12 @@ function detectTimeQuery(urlSearchParams) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log("An incorrect or malformed time selection was made in the query string");
|
console.warn("An incorrect or malformed time selection was made in the query string");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function detectAggregateQuery(urlSearchParams) {
|
function detectAggregateQuery(urlSearchParams) {
|
||||||
const validOperations = ['none', 'daily_max', 'daily_min', 'daily_mean', 'weekly_max', 'weekly_min', 'weekly_mean'];
|
const validOperations = ['none', 'daily_mean', 'weekly_mean'];
|
||||||
if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) {
|
if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) {
|
||||||
currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase();
|
currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase();
|
||||||
let aggregateDDL = document.getElementById('aggregate');
|
let aggregateDDL = document.getElementById('aggregate');
|
||||||
@@ -245,7 +292,7 @@ function detectAggregateQuery(urlSearchParams) {
|
|||||||
}
|
}
|
||||||
aggregateFunctionToggle();
|
aggregateFunctionToggle();
|
||||||
} else {
|
} else {
|
||||||
console.log("An incorrect or malformed aggregate selection was made in the query string");
|
console.warn("An incorrect or malformed aggregate selection was made in the query string");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -263,7 +310,7 @@ function detectURLQuery() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function buildDeepLinksURL() {
|
function buildDeepLinksURL() {
|
||||||
let url = "https://wowtoken.app/?"
|
let url = "https://classic.wowtoken.app/?"
|
||||||
if (currentTimeSelection !== '72h'){
|
if (currentTimeSelection !== '72h'){
|
||||||
url += `time=${currentTimeSelection}&`
|
url += `time=${currentTimeSelection}&`
|
||||||
}
|
}
|
||||||
@@ -293,7 +340,28 @@ function toolTipMouseOut() {
|
|||||||
tooltip.innerHTML = "Copy to clipboard";
|
tooltip.innerHTML = "Copy to clipboard";
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
function registerEventHandles() {
|
||||||
|
registerCopyHandlers();
|
||||||
|
registerOptionHandlers();
|
||||||
|
registerAdvancedHandlers();
|
||||||
|
}
|
||||||
|
|
||||||
|
function registerAdvancedHandlers() {
|
||||||
|
document.getElementById('enable-advanced').addEventListener('change', () => {
|
||||||
|
toggleAdvancedSetting();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function registerCopyHandlers() {
|
||||||
|
document.getElementById('copyURLButton').addEventListener('click', function () {
|
||||||
|
copyURL();
|
||||||
|
})
|
||||||
|
document.getElementById('copyURLButton').addEventListener('mouseout', function () {
|
||||||
|
toolTipMouseOut();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function registerOptionHandlers() {
|
||||||
document.getElementById('region').addEventListener('change', function() {
|
document.getElementById('region').addEventListener('change', function() {
|
||||||
updateRegionPreference(this.value);
|
updateRegionPreference(this.value);
|
||||||
});
|
});
|
||||||
@@ -305,15 +373,13 @@ $(document).ready(function() {
|
|||||||
document.getElementById('aggregate').addEventListener('change', function () {
|
document.getElementById('aggregate').addEventListener('change', function () {
|
||||||
updateAggregatePreference(this.value);
|
updateAggregatePreference(this.value);
|
||||||
})
|
})
|
||||||
document.getElementById('copyURLButton').addEventListener('click', function (event) {
|
|
||||||
copyURL();
|
|
||||||
})
|
|
||||||
document.getElementById('copyURLButton').addEventListener('mouseout', function (event) {
|
|
||||||
toolTipMouseOut();
|
|
||||||
})
|
|
||||||
currentAggregateSelection = document.getElementById('aggregate').value;
|
currentAggregateSelection = document.getElementById('aggregate').value;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
registerEventHandles();
|
||||||
detectURLQuery();
|
detectURLQuery();
|
||||||
Promise.all([callUpdateURL(), pullChartData()]).then(populateChart)
|
Promise.all([callUpdateURL(), pullChartData()]).then(populateChart)
|
||||||
setInterval(callUpdateURL, 60*1000);
|
setInterval(callUpdateURL, 60*1000);
|
||||||
});
|
}, false);
|
||||||
|
|
||||||
|
|||||||
@@ -137,9 +137,6 @@ input[type="radio"] {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
input[type="search"] {
|
input[type="search"] {
|
||||||
-webkit-appearance: textfield;
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
input[type="search"]::-webkit-search-cancel-button,
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
@@ -176,8 +173,8 @@ h6 {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
background-color: #073642;
|
background-color: #6b4233;
|
||||||
color: #839496;
|
color: #b7b7b7;
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
}
|
}
|
||||||
/*body {
|
/*body {
|
||||||
@@ -197,7 +194,7 @@ a:hover {
|
|||||||
color: #cb4b16;
|
color: #cb4b16;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
color: #d33682;
|
color: #ffd5e9;
|
||||||
}
|
}
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
@@ -209,7 +206,7 @@ h6 {
|
|||||||
pre {
|
pre {
|
||||||
background-color: #002b36;
|
background-color: #002b36;
|
||||||
color: #839496;
|
color: #839496;
|
||||||
border: 1pt solid #586e75;
|
border: 1pt solid #000000;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
box-shadow: 5pt 5pt 8pt #073642;
|
box-shadow: 5pt 5pt 8pt #073642;
|
||||||
}
|
}
|
||||||
@@ -304,10 +301,10 @@ h6 {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #002b36;
|
background-color: #2f201e;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 85%;
|
max-width: 85%;
|
||||||
border: 1pt solid #586e75;
|
border: 1pt solid #000000;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -318,15 +315,34 @@ h6 {
|
|||||||
line-height: 75px;
|
line-height: 75px;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
.adv-options-container {
|
||||||
|
display: flex;
|
||||||
|
padding: 20px;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.box > div {
|
||||||
|
border: solid #bfbdbf;
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
p {
|
p {
|
||||||
margin: 0px;
|
margin: 0;
|
||||||
padding: 0px;
|
padding: 0;
|
||||||
line-height: 3em;
|
line-height: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
details {
|
details {
|
||||||
background-color: #073642;
|
background-color: #6b4233;
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #000000;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 0.5em 0.5em 0;
|
padding: 0.5em 0.5em 0;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
@@ -347,12 +363,26 @@ details[open] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
details[open] summary {
|
details[open] summary {
|
||||||
border-bottom: 1px solid #aaa;
|
border-bottom: 1px solid #000000;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#option_select {
|
#option_select {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
line-height: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#option_select > div {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#option_select > fieldset {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
max-width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
#token {
|
#token {
|
||||||
@@ -378,6 +408,17 @@ details[open] summary {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#advanced-options {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advanced-options > fieldset {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.lds-ripple {
|
.lds-ripple {
|
||||||
position: relative;
|
position: relative;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
@@ -456,8 +497,8 @@ details[open] summary {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
top: 0px;
|
top: 0;
|
||||||
left: 0px;
|
left: 0;
|
||||||
width: 72px;
|
width: 72px;
|
||||||
height: 72px;
|
height: 72px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user