banananetwork
/
ac-nh-turnip-prices
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #325 from davidcorry/master

Browse Source 
CSS-based dark mode
master
Mike Bryant 5 years ago committed by GitHub
parent bbfadcf252 b306692d6f
commit a07c34c5c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 289 additions and 160 deletions
Show Stats Download Patch File Download Diff File

327
css/styles.css
Unescape Escape View File

@ -1,17 +1,131 @@
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&family=Varela+Round&display=swap');
/* - Variables - */
:root {
--color-blue: #0AB5CD;
--color-light-blue: #5ECEDB;
--bg-color: #DEF2D9;
--bg-dot-color: #FFF;
--shadow-3: rgba(0, 0, 0, 0.03);
--shadow-5: rgba(0, 0, 0, 0.05);
--shadow-6: rgba(0, 0, 0, 0.06);
--shadow-8: rgba(0, 0, 0, 0.08);
--shadow-9: rgba(0, 0, 0, 0.09);
--shadow-10: rgba(0, 0, 0, 0.10);
--shadow-15: rgba(0, 0, 0, 0.16);
--shadow-16: rgba(0, 0, 0, 0.16);
--shadow-20: rgba(0, 0, 0, 0.20);
--center-bg-color: #FFF;
--wave-1: rgba(255, 255, 255, 0);
--wave-2: rgba(255, 255, 255, 0.2);
--wave-3: rgba(255, 255, 255, 0.4);
--wave-4: rgba(255, 255, 255, 0.6);
--nook-phone-bg-color: #F5F8FF;
--nook-phone-text-color: #686868;
--dialog-bg-color: #FFFAE5;
--dialog-text-color: #837865;
--dialog-name-bg-color: #FF9A40;
--dialog-name-text-color: #BA3B1F;
--chart-fill-color: var(--bg-color);
--chart-line-color: rgba(0, 0, 0, 0.1);
--chart-point-color: rgba(0, 0, 0, 0.1);
--select-text-color: var(--dialog-text-color);
--select-border-color: var(--bg-color);
--select-bg-color-hover: #EBFEFD;
--italic-color: #AAA;
--form-h6-text-color: #845E44;
--radio-hover-bg-color: var(--nook-phone-bg-color);
--radio-checked-text-color: #FFF;
--input-bg-color: #F3F3F3;
--input-focus-bg-color: white;
--input-focus-text-color: var(--color-blue);
--button-text-color: var(--nook-phone-text-color);
--button-reset-text-color: #E45B5B;
--table-range0: hsl(140, 80%, 85%);
--table-range1: hsl(90, 80%, 85%);
--table-range2: hsl(60, 80%, 85%);
--table-range3: hsl(30, 80%, 85%);
--table-range4: hsl(0, 80%, 85%);
}
[data-theme="dark"] {
--bg-color: #1A1A1A;
--bg-dot-color: #222;
--shadow-3: rgba(255, 255, 255, 0.03);
--shadow-15: rgba(255, 255, 255, 0.03);
--center-bg-color: #101010;
--wave-1: rgba(16, 16, 16, 0);
--wave-2: rgba(16, 16, 16, 0.2);
--wave-3: rgba(16, 16, 16, 0.4);
--wave-4: rgba(16, 16, 16, 0.6);
--nook-phone-bg-color: #000F33;
--nook-phone-text-color: #CCC;
--dialog-bg-color: #252422;
--dialog-text-color: #BCB5A9;
--dialog-name-bg-color: #BA3B1F;
--dialog-name-text-color: #FF9A40;
--chart-fill-color: #2D5F21;
--chart-line-color: rgba(200, 200, 200, 0.4);
--chart-point-color: rgba(200, 200, 200, 0.6);
--select-text-color: #837865;
--select-border-color: var(--bg-color);
--select-bg-color-hover: #EBFEFD;
--italic-color: #666;
--form-h6-text-color: #E18B51;
--radio-hover-bg-color: #00174D;
--radio-checked-text-color: #FFF;
--input-bg-color: #333;
--input-focus-bg-color: #999;
--input-focus-text-color: var(--radio-hover-bg-color);
--button-text-color: var(--nook-phone-text-color);
--button-reset-text-color: #E45B5B;
--table-range0: hsl(140, 80%, 27%);
--table-range1: hsl(90, 80%, 20%);
--table-range2: hsl(60, 80%, 20%);
--table-range3: hsl(30, 80%, 20%);
--table-range4: hsl(0, 80%, 22%);
}
/* - Global Styles - */
html {
font-size: 14px;
background: #DEF2D9;
background: var(--bg-color);
background-image:
radial-gradient(#fff 20%, transparent 0),
radial-gradient(#fff 20%, transparent 0);
radial-gradient(var(--bg-dot-color) 20%, transparent 0),
radial-gradient(var(--bg-dot-color) 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
/* background: #FFFAE5; */
}
body {
@ -40,57 +154,57 @@ h2 {
border-radius: 40px;
padding: 16px 0px;
padding-bottom: 16px;
background: #F5F8FF;
color: #686868;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
background: var(--nook-phone-bg-color);
color: var(--nook-phone-text-color);
overflow: hidden;
box-shadow: 0 1px 3px var(--shadow-6), 0 1px 2px var(--shadow-8);
}
.nook-phone-center {
background: white;
background: var(--center-bg-color);
display: flex;
flex-direction: column;
align-items: center;
}
.dialog-box {
background: #FFFAE5;
background: var(--dialog-bg-color);
box-sizing: border-box;
padding: 16px 24px;
margin: 32px auto;
position: relative;
border-radius: 40px;
max-width: 800px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px var(--shadow-6), 0 1px 2px var(--shadow-8);
}
.dialog-box-lng {
.dialog-box-option {
text-align: center;
}
.dialog-box-lng p,
.dialog-box-lng select {
.dialog-box-option p,
.dialog-box-option select {
display: inline;
}
.dialog-box-lng select {
.dialog-box-option select {
font-size: 1rem;
padding: 4px;
font-weight: bold;
border-radius: 4px;
border-color: #DEF2D9;
color: #837865;
border-color: var(--select-border-color);
color: var(--select-text-color);
cursor: pointer;
transition: 0.2s all;
}
.dialog-box-lng select:hover {
background-color: #EBFEFD;
border-color: #5ECEDB;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
.dialog-box-option select:hover {
background-color: var(--select-bg-color-hover);
border-color: var(--color-light-blue);
box-shadow: 0 2px 4px var(--shadow-16);
}
.dialog-box-lng select:focus {
.dialog-box-option select:focus {
outline: none;
}
@ -99,24 +213,24 @@ h2 {
font-family: 'Raleway', sans-serif;
font-weight: 800;
font-size: 1rem;
color: #837865;
color: var(--dialog-text-color);
letter-spacing: 0.2px;
line-height: 1.8rem;
}
.dialog-box b,
.dialog-box a {
color: #0AB5CD;
color: var(--color-blue);
transition: 0.2s all;
}
.dialog-box i {
font-style: normal;
color: #aaa;
color: var(--italic-color);
}
.dialog-box a:hover {
color: #5ECEDB
color: var(--color-light-blue);
}
.dialog-box .dialog-box__name {
@ -124,14 +238,14 @@ h2 {
left: 16px;
top: -28px;
font-size: 1rem;
color: #BA3B1F;
color: var(--dialog-name-text-color);
padding: 4px 16px;
background: #FF9A40;
background: var(--dialog-name-bg-color);
border-radius: 40px;
}
.input__form {
background: white;
background: var(--center-bg-color);
display: flex;
flex-direction: column;
padding: 16px;
@ -152,7 +266,7 @@ h2 {
font-weight: 800;
font-size: 1.25rem;
margin: 8px auto;
color: #845E44;
color: var(--form-h6-text-color);
text-align: center;
}
@ -189,7 +303,7 @@ h2 {
text-align: center;
display: block;
font-style: normal;
color: #aaa;
color: var(--italic-color);
font-size: 0.9rem;
margin: 8px auto;
}
@ -211,25 +325,26 @@ input {
}
input[type=number]:placeholder-shown {
background: #f3f3f3;
background: var(--input-bg-color);
}
input[type=number]:not(:placeholder-shown) {
background: transparent;
color: #0AB5CD;
color: var(--color-blue);
}
input[type=number]:placeholder-shown:hover {
cursor: pointer;
transform: scale(1.1);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
}
input[type=number]:focus {
outline: none;
transform: scale(1.1);
background: white;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
color: var(--input-focus-text-color);
background: var(--input-focus-bg-color);
box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
}
input[type=number]:focus::placeholder {
@ -276,7 +391,7 @@ input[type=number] {
opacity: 1;
border: none;
border-radius: 40px;
background: #F3F3F3;
background: var(--input-bg-color);
padding: 8px 16px;
font-size: 1.25rem;
font-family: inherit;
@ -287,24 +402,24 @@ input[type=number] {
.input__radio-buttons input[type="radio"]:not(:checked)+label:hover {
cursor: pointer;
background: #F5F8FF;
background: var(--radio-hover-bg-color);
transform: scale(1.1);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
}
.input__radio-buttons input[type="radio"]:checked+label {
background: #0AB5CD;
color: #FFF;
background: var(--color-blue);
color: var(--radio-checked-text-color);
}
.button {
color: #686868;
color: var(--button-text-color);
font-family: inherit;
font-weight: bold;
padding: 8px 16px;
border-width: 0px;
border-radius: 40px;
background: #F3F3F3;
background: var(--input-bg-color);
font-size: 1.2rem;
transition: 0.2s all;
position: relative;
@ -315,11 +430,11 @@ input[type=number] {
transform: scale(1.1);
cursor: pointer;
opacity: 1;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
box-shadow: 0 1px 6px var(--shadow-5), 0 3px 6px var(--shadow-9);
}
.button.button--reset {
color: #E45B5B;
color: var(--button-reset-text-color);
}
.table-wrapper {
@ -346,22 +461,22 @@ input[type=number] {
.table-wrapper::-webkit-scrollbar-track {
height: 8px;
width: 5px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 6px var(--shadow-20);
-webkit-box-shadow: inset 0 0 6px var(--shadow-20);
}
.table-wrapper::-webkit-scrollbar-thumb {
height: 8px;
width: 5px;
background: rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background: var(--shadow-20);
box-shadow: inset 0 0 6px var(--shadow-20);
-webkit-box-shadow: inset 0 0 6px var(--shadow-10);
}
.table-wrapper::-webkit-scrollbar-thumb:window-inactive {
height: 8px;
width: 5px;
background: rgba(0, 0, 0, 0.2);
background: var(--shadow-20);
}
#turnipTable {
@ -383,8 +498,8 @@ input[type=number] {
max-width: 150px;
padding: 6px 4px;
text-align: center;
border-right: 1px solid rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
border-right: 1px solid var(--shadow-3);
border-bottom: 1px solid var(--shadow-15);
}
#turnipTable tbody tr {
@ -401,43 +516,23 @@ input[type=number] {
}
#turnipTable td.range4 {
background-color: hsl(0, 80%, 85%);
background-color: var(--table-range4);
}
#turnipTable td.range3{
background-color: hsl(30, 80%, 85%);
background-color: var(--table-range3);
}
#turnipTable td.range2 {
background-color: hsl(60, 80%, 85%);
background-color: var(--table-range2);
}
#turnipTable td.range1 {
background-color: hsl(90, 80%, 85%);
background-color: var(--table-range1);
}
#turnipTable td.range0 {
background-color: hsl(140, 80%, 85%);
}
.darkmode--activated #turnipTable td.range0 {
background-color: hsl(0, 80%, 85%);
}
.darkmode--activated #turnipTable td.range1{
background-color: hsl(30, 80%, 85%);
}
.darkmode--activated #turnipTable td.range2 {
background-color: hsl(60, 80%, 85%);
}
.darkmode--activated #turnipTable td.range3 {
background-color: hsl(90, 80%, 85%);
}
.darkmode--activated #turnipTable td.range4 {
background-color: hsl(140, 80%, 85%);
background-color: var(--table-range0);
}
.chart-wrapper {
@ -475,18 +570,18 @@ input[type=number] {
.permalink .fa-copy {
margin: 0 8px;
height: 20px;
color: #0AB5CD;
color: var(--color-blue);
}
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
background-color: #FFFAE5; /* Black background color */
background-color: var(--dialog-bg-color); /* Black background color */
font-family: 'Raleway', sans-serif;
font-weight: 800;
font-size: 1rem;
color: #837865;
color: var(--dialog-text-color);
letter-spacing: 0.2px;
line-height: 1.8rem;
text-align: center; /* Centered text */
@ -495,7 +590,7 @@ input[type=number] {
position: fixed; /* Sit on top of the screen */
z-index: 1; /* Add a z-index if needed */
bottom: 30px; /* 30px from the bottom */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px var(--shadow-6), 0 1px 2px var(--shadow-8);
}
/* Show the snackbar when clicking on a button (class added with JavaScript) */
@ -531,18 +626,22 @@ input[type=number] {
/* Cloud SVG placement */
.parallax>use:nth-child(1) {
transform: translate3d(-30px, 0, 0);
fill: var(--wave-4);
}
.parallax>use:nth-child(2) {
transform: translate3d(-90px, 0, 0);
fill: var(--wave-3);
}
.parallax>use:nth-child(3) {
transform: translate3d(45px, 0, 0);
fill: var(--wave-2);
}
.parallax>use:nth-child(4) {
transform: translate3d(20px, 0, 0);
fill: var(--wave-1);
}
/*Shrinking for mobile*/
@ -552,65 +651,3 @@ input[type=number] {
min-height: 40px;
}
}
/*Darkmodjs*/
.darkmode-layer, .darkmode-toggle {
z-index: 1;
}
.darkmode-toggle:hover {
filter: brightness(0.9);
}
.darkmode-toggle:focus {
outline: none;
}
div.darkmode-background{
background: #fef0e3;
background-image:
radial-gradient(#fff 20%, transparent 0),
radial-gradient(#fff 20%, transparent 0);
position: inherit;
}
body.darkmode--activated{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Varela Round', sans-serif;
width: 100%;
margin: 0 0 0 0;
position: absolute;
}
body.darkmode--activated div[class^="dialog-box"],
body.darkmode--activated div[class^="nook-phone"],
body.darkmode--activated form[class^="input__form"] {
background: #fee0c4;
color: #010F1D;
}
body.darkmode--activated svg[class^="waves"] {
background: #fef0e3;
}
body.darkmode--activated a,
body.darkmode--activated b,
body.darkmode--activated input[type=number]:not(:placeholder-shown) {
color: #586472;
}
body.darkmode--activated input[type="radio"]+label,
body.darkmode--activated input[type=number]:placeholder-shown {
background: #bda284;
}
body.darkmode--activated input[type="radio"]:checked+label {
background: #7b6955;
}
body.darkmode--activated i {
color: #7b6955;
}

38
index.html
Unescape Escape View File

@ -39,6 +39,18 @@
gtag('config', 'UA-162470902-1');
</script>
<script>
function detectTheme() {
let systemTheme = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
let preferredTheme = localStorage.getItem("theme");
if (preferredTheme == "dark" || (systemTheme == "dark" && preferredTheme != "light")) {
document.documentElement.setAttribute("data-theme", "dark");
}
}
detectTheme();
</script>
</head>
@ -61,10 +73,10 @@
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.6" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.4)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
<use xlink:href="#gentle-wave" x="48" y="0" />
<use xlink:href="#gentle-wave" x="48" y="3" />
<use xlink:href="#gentle-wave" x="48" y="5" />
<use xlink:href="#gentle-wave" x="48" y="7" />
</g>
</svg>
</div>
@ -271,10 +283,10 @@
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.6" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.4)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
<use xlink:href="#gentle-wave" x="48" y="0" />
<use xlink:href="#gentle-wave" x="48" y="3" />
<use xlink:href="#gentle-wave" x="48" y="5" />
<use xlink:href="#gentle-wave" x="48" y="7" />
</g>
</svg>
</div>
@ -295,8 +307,11 @@
<p data-i18n="textbox.contributors-text"></p>
<p id="contributors"><span data-i18n="textbox.contributors"></span>: </p>
<p data-i18n="[html]textbox.sponsor"></p>
<div class="dialog-box-lng">
<label for='language' data-i18n="textbox.language"></label>: <select id="language"></select>
<div class="dialog-box-option">
<p><label for='language' data-i18n="textbox.language"></label>:</p> <select id="language"></select>
</div>
<div class="dialog-box-option">
<p><label for='theme' data-i18n="textbox.theme.title"></label>:</p> <select id="theme"></select>
</div>
</div>
@ -311,10 +326,9 @@
<script src="js/chart.js"></script>
<script src="js/predictions.js"></script>
<script src="js/scripts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>new Darkmode({label: '🌓', buttonColorDark: '#dddddd'}).showWidget();</script>
<script src="js/translations.js"></script>
<script src="js/contributors.js"></script>
<script src="js/themes.js"></script>
<script>
// Check compatibility for the browser we're running this in
if ("serviceWorker" in navigator) {

18
js/chart.js
Unescape Escape View File

@ -5,8 +5,12 @@ Chart.defaults.global.defaultFontFamily = "'Varela Round', sans-serif";
const chart_options = {
elements: {
line: {
backgroundColor: "#DEF2D9",
backgroundColor: "#DEF2D9",
get backgroundColor() {
return getComputedStyle(document.documentElement).getPropertyValue('--chart-fill-color');
},
get borderColor() {
return getComputedStyle(document.documentElement).getPropertyValue('--chart-line-color');
},
cubicInterpolationMode: "monotone",
},
},
@ -21,14 +25,23 @@ function update_chart(input_data, possibilities) {
let ctx = $("#chart"),
datasets = [{
label: i18next.t("output.chart.input"),
get pointBorderColor() {
return getComputedStyle(document.documentElement).getPropertyValue('--chart-point-color');
},
data: input_data.slice(1),
fill: false,
}, {
label: i18next.t("output.chart.minimum"),
get pointBorderColor() {
return getComputedStyle(document.documentElement).getPropertyValue('--chart-point-color');
},
data: possibilities[0].prices.slice(1).map(day => day.min),
fill: false,
}, {
label: i18next.t("output.chart.maximum"),
get pointBorderColor() {
return getComputedStyle(document.documentElement).getPropertyValue('--chart-point-color');
},
data: possibilities[0].prices.slice(1).map(day => day.max),
fill: "-1",
},
@ -41,6 +54,7 @@ function update_chart(input_data, possibilities) {
if (chart_instance) {
chart_instance.data.datasets = datasets;
chart_instance.data.labels = labels;
chart_instance.options = chart_options;
chart_instance.update();
} else {
chart_instance = new Chart(ctx, {

58
js/themes.js
Unescape Escape View File

@ -0,0 +1,58 @@
function updateTheme(theme) {
if (theme == "auto") {
theme = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
}
if (theme != "light") {
document.documentElement.setAttribute("data-theme", theme);
} else {
document.documentElement.removeAttribute("data-theme");
}
if (chart_instance && chart_options) {
chart_instance.options = chart_options;
chart_instance.update();
}
}
function setupTheming() {
const themeSelector = $("#theme");
const supportsAutoTheming = (window.matchMedia && window.matchMedia("(prefers-color-scheme)").matches);
let preferredTheme = localStorage.getItem("theme");
let selectorVal = preferredTheme ? preferredTheme :
supportsAutoTheming ? "auto" : "light";
// Build theme option menu.
if (supportsAutoTheming) {
themeSelector.append(`<option value="auto">${i18next.t('textbox.theme.auto')}</option>`);
}
themeSelector.append(`<option value="light">${i18next.t('textbox.theme.light')}</option>`);
themeSelector.append(`<option value="dark">${i18next.t('textbox.theme.dark')}</option>`);
themeSelector.val(selectorVal);
// Listen to system changes in theme
window.matchMedia("(prefers-color-scheme: dark)").addListener(() => {
if (preferredTheme && preferredTheme != "auto") { return; }
updateTheme("auto");
});
// Preference listener
themeSelector.on('change', function () {
preferredTheme = this.value;
updateTheme(preferredTheme);
if ((preferredTheme != "light" && !supportsAutoTheming) ||
(preferredTheme != "auto" && supportsAutoTheming)) {
localStorage.setItem("theme", preferredTheme);
} else {
localStorage.removeItem("theme");
}
});
}
$(document).ready(function() {
i18next.init((err, t) => {
setupTheming();
});
});

8
locales/en.json
Unescape Escape View File

@ -76,6 +76,12 @@
"sponsor": "Want to sponsor the developers behind this project? Go to the <a href=\"https://github.com/mikebryant/ac-nh-turnip-prices#sponsor-button-repo\">GitHub</a> page and click '❤ Sponsor'",
"contributors-text": "Oh! And let's not forget to thank those who have contributed so far!",
"contributors": "Contributors",
"language": "Language"
"language": "Language",
"theme": {
"title": "Theme",
"auto": "Automatic",
"light": "Light",
"dark": "Dark"
}
}
}

Write Preview
Loading…
Cancel
Save