UI - Dark Mode (#1187)
dgtlmoon
2 years ago
parent
87726e0bb2
commit
77409eeb3a
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 787 B |
@ -1,112 +1,110 @@
|
|||||||
var a = document.getElementById('a');
|
var a = document.getElementById("a");
|
||||||
var b = document.getElementById('b');
|
var b = document.getElementById("b");
|
||||||
var result = document.getElementById('result');
|
var result = document.getElementById("result");
|
||||||
|
|
||||||
function changed() {
|
function changed() {
|
||||||
// https://github.com/kpdecker/jsdiff/issues/389
|
// https://github.com/kpdecker/jsdiff/issues/389
|
||||||
// I would love to use `{ignoreWhitespace: true}` here but it breaks the formatting
|
// I would love to use `{ignoreWhitespace: true}` here but it breaks the formatting
|
||||||
options = {ignoreWhitespace: document.getElementById('ignoreWhitespace').checked};
|
options = {
|
||||||
|
ignoreWhitespace: document.getElementById("ignoreWhitespace").checked,
|
||||||
var diff = Diff[window.diffType](a.textContent, b.textContent, options);
|
};
|
||||||
var fragment = document.createDocumentFragment();
|
|
||||||
for (var i = 0; i < diff.length; i++) {
|
var diff = Diff[window.diffType](a.textContent, b.textContent, options);
|
||||||
|
var fragment = document.createDocumentFragment();
|
||||||
if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
|
for (var i = 0; i < diff.length; i++) {
|
||||||
var swap = diff[i];
|
if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
|
||||||
diff[i] = diff[i + 1];
|
var swap = diff[i];
|
||||||
diff[i + 1] = swap;
|
diff[i] = diff[i + 1];
|
||||||
}
|
diff[i + 1] = swap;
|
||||||
|
|
||||||
var node;
|
|
||||||
if (diff[i].removed) {
|
|
||||||
node = document.createElement('del');
|
|
||||||
node.classList.add("change");
|
|
||||||
node.appendChild(document.createTextNode(diff[i].value));
|
|
||||||
|
|
||||||
} else if (diff[i].added) {
|
|
||||||
node = document.createElement('ins');
|
|
||||||
node.classList.add("change");
|
|
||||||
node.appendChild(document.createTextNode(diff[i].value));
|
|
||||||
} else {
|
|
||||||
node = document.createTextNode(diff[i].value);
|
|
||||||
}
|
|
||||||
fragment.appendChild(node);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
result.textContent = '';
|
var node;
|
||||||
result.appendChild(fragment);
|
if (diff[i].removed) {
|
||||||
|
node = document.createElement("del");
|
||||||
|
node.classList.add("change");
|
||||||
|
const wrapper = node.appendChild(document.createElement("span"));
|
||||||
|
wrapper.appendChild(document.createTextNode(diff[i].value));
|
||||||
|
} else if (diff[i].added) {
|
||||||
|
node = document.createElement("ins");
|
||||||
|
node.classList.add("change");
|
||||||
|
const wrapper = node.appendChild(document.createElement("span"));
|
||||||
|
wrapper.appendChild(document.createTextNode(diff[i].value));
|
||||||
|
} else {
|
||||||
|
node = document.createTextNode(diff[i].value);
|
||||||
|
}
|
||||||
|
fragment.appendChild(node);
|
||||||
|
}
|
||||||
|
|
||||||
// Jump at start
|
result.textContent = "";
|
||||||
inputs.current = 0;
|
result.appendChild(fragment);
|
||||||
next_diff();
|
|
||||||
|
// Jump at start
|
||||||
|
inputs.current = 0;
|
||||||
|
next_diff();
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
|
/* Convert what is options from UTC time.time() to local browser time */
|
||||||
|
var diffList = document.getElementById("diff-version");
|
||||||
/* Convert what is options from UTC time.time() to local browser time */
|
if (typeof diffList != "undefined" && diffList != null) {
|
||||||
var diffList = document.getElementById("diff-version");
|
for (var option of diffList.options) {
|
||||||
if (typeof (diffList) != 'undefined' && diffList != null) {
|
var dateObject = new Date(option.value * 1000);
|
||||||
for (var option of diffList.options) {
|
option.label = dateObject.toLocaleString();
|
||||||
var dateObject = new Date(option.value * 1000);
|
|
||||||
option.label = dateObject.toLocaleString();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
/* Set current version date as local time in the browser also */
|
|
||||||
var current_v = document.getElementById("current-v-date");
|
/* Set current version date as local time in the browser also */
|
||||||
var dateObject = new Date(newest_version_timestamp*1000);
|
var current_v = document.getElementById("current-v-date");
|
||||||
current_v.innerHTML = dateObject.toLocaleString();
|
var dateObject = new Date(newest_version_timestamp * 1000);
|
||||||
onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked'));
|
current_v.innerHTML = dateObject.toLocaleString();
|
||||||
changed();
|
onDiffTypeChange(
|
||||||
|
document.querySelector('#settings [name="diff_type"]:checked'),
|
||||||
|
);
|
||||||
|
changed();
|
||||||
};
|
};
|
||||||
|
|
||||||
a.onpaste = a.onchange =
|
a.onpaste = a.onchange = b.onpaste = b.onchange = changed;
|
||||||
b.onpaste = b.onchange = changed;
|
|
||||||
|
|
||||||
if ('oninput' in a) {
|
if ("oninput" in a) {
|
||||||
a.oninput = b.oninput = changed;
|
a.oninput = b.oninput = changed;
|
||||||
} else {
|
} else {
|
||||||
a.onkeyup = b.onkeyup = changed;
|
a.onkeyup = b.onkeyup = changed;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDiffTypeChange(radio) {
|
function onDiffTypeChange(radio) {
|
||||||
window.diffType = radio.value;
|
window.diffType = radio.value;
|
||||||
// Not necessary
|
// Not necessary
|
||||||
// document.title = "Diff " + radio.value.slice(4);
|
// document.title = "Diff " + radio.value.slice(4);
|
||||||
}
|
}
|
||||||
|
|
||||||
var radio = document.getElementsByName('diff_type');
|
var radio = document.getElementsByName("diff_type");
|
||||||
for (var i = 0; i < radio.length; i++) {
|
for (var i = 0; i < radio.length; i++) {
|
||||||
radio[i].onchange = function (e) {
|
radio[i].onchange = function (e) {
|
||||||
onDiffTypeChange(e.target);
|
onDiffTypeChange(e.target);
|
||||||
changed();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('ignoreWhitespace').onchange = function (e) {
|
|
||||||
changed();
|
changed();
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.getElementById("ignoreWhitespace").onchange = function (e) {
|
||||||
|
changed();
|
||||||
|
};
|
||||||
|
|
||||||
var inputs = document.getElementsByClassName('change');
|
var inputs = document.getElementsByClassName("change");
|
||||||
inputs.current = 0;
|
inputs.current = 0;
|
||||||
|
|
||||||
|
|
||||||
function next_diff() {
|
function next_diff() {
|
||||||
|
var element = inputs[inputs.current];
|
||||||
var element = inputs[inputs.current];
|
var headerOffset = 80;
|
||||||
var headerOffset = 80;
|
var elementPosition = element.getBoundingClientRect().top;
|
||||||
var elementPosition = element.getBoundingClientRect().top;
|
var offsetPosition = elementPosition - headerOffset + window.scrollY;
|
||||||
var offsetPosition = elementPosition - headerOffset + window.scrollY;
|
|
||||||
|
window.scrollTo({
|
||||||
window.scrollTo({
|
top: offsetPosition,
|
||||||
top: offsetPosition,
|
behavior: "smooth",
|
||||||
behavior: "smooth"
|
});
|
||||||
});
|
|
||||||
|
inputs.current++;
|
||||||
inputs.current++;
|
if (inputs.current >= inputs.length) {
|
||||||
if (inputs.current >= inputs.length) {
|
inputs.current = 0;
|
||||||
inputs.current = 0;
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Toggles theme between light and dark mode.
|
||||||
|
*/
|
||||||
|
$(document).ready(function () {
|
||||||
|
const button = document.getElementsByClassName("toggle-theme")[0];
|
||||||
|
|
||||||
|
button.onclick = () => {
|
||||||
|
const htmlElement = document.getElementsByTagName("html");
|
||||||
|
const isDarkMode = htmlElement[0].dataset.darkmode === "true";
|
||||||
|
htmlElement[0].dataset.darkmode = !isDarkMode;
|
||||||
|
if (isDarkMode) {
|
||||||
|
button.classList.remove("dark");
|
||||||
|
setCookieValue(false);
|
||||||
|
} else {
|
||||||
|
button.classList.add("dark");
|
||||||
|
setCookieValue(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCookieValue = (value) => {
|
||||||
|
document.cookie = `css_dark_mode=${value};max-age=31536000`
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -1,96 +0,0 @@
|
|||||||
#diff-ui {
|
|
||||||
|
|
||||||
background: #fff;
|
|
||||||
padding: 2em;
|
|
||||||
margin-left: 1em;
|
|
||||||
margin-right: 1em;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 11px;
|
|
||||||
|
|
||||||
table {
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
td {
|
|
||||||
padding: 3px 4px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
vertical-align: top;
|
|
||||||
font: 1em monospace;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
display: inline;
|
|
||||||
font-size: 100%;
|
|
||||||
}
|
|
||||||
del {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #b30000;
|
|
||||||
background: #fadad7;
|
|
||||||
}
|
|
||||||
|
|
||||||
ins {
|
|
||||||
background: #eaf2c2;
|
|
||||||
color: #406619;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#result {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
#settings {
|
|
||||||
background: rgba(0,0,0,.05);
|
|
||||||
padding: 1em;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 80%;
|
|
||||||
label {
|
|
||||||
margin-left: 1em;
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.source {
|
|
||||||
position: absolute;
|
|
||||||
right: 1%;
|
|
||||||
top: .2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-moz-document url-prefix() {
|
|
||||||
body {
|
|
||||||
height: 99%; /* Hide scroll bar in Firefox */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td#diff-col div {
|
|
||||||
text-align: justify;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ignored {
|
|
||||||
background-color: #ccc;
|
|
||||||
/* border: #0d91fa 1px solid; */
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.triggered {
|
|
||||||
background-color: #1b98f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ignored and triggered? make it obvious error */
|
|
||||||
.ignored.triggered {
|
|
||||||
background-color: #ff0000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-pane-inner#screenshot {
|
|
||||||
text-align: center;
|
|
||||||
img {
|
|
||||||
max-width: 99%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,117 @@
|
|||||||
|
@import "parts/_variables.scss";
|
||||||
|
|
||||||
|
#diff-ui {
|
||||||
|
|
||||||
|
background: var(--color-background);
|
||||||
|
padding: 2em;
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-right: 1em;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
|
||||||
|
table {
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 3px 4px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
vertical-align: top;
|
||||||
|
font: 1em monospace;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
display: inline;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
del {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #b30000;
|
||||||
|
background: #fadad7;
|
||||||
|
}
|
||||||
|
|
||||||
|
ins {
|
||||||
|
background: #eaf2c2;
|
||||||
|
color: #406619;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#result {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
|
||||||
|
.change {
|
||||||
|
span {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings {
|
||||||
|
background: rgba(0, 0, 0, .05);
|
||||||
|
padding: 1em;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 80%;
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-left: 1em;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
del {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ins {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.source {
|
||||||
|
position: absolute;
|
||||||
|
right: 1%;
|
||||||
|
top: .2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-document url-prefix() {
|
||||||
|
body {
|
||||||
|
height: 99%;
|
||||||
|
/* Hide scroll bar in Firefox */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td#diff-col div {
|
||||||
|
text-align: justify;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ignored {
|
||||||
|
background-color: #ccc;
|
||||||
|
/* border: #0d91fa 1px solid; */
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.triggered {
|
||||||
|
background-color: #1b98f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ignored and triggered? make it obvious error */
|
||||||
|
.ignored.triggered {
|
||||||
|
background-color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-pane-inner#screenshot {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 99%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
/**
|
||||||
|
* CSS custom properties (aka variables).
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-white: #fff;
|
||||||
|
--color-grey-50: #111;
|
||||||
|
--color-grey-100: #262626;
|
||||||
|
--color-grey-200: #333;
|
||||||
|
--color-grey-300: #444;
|
||||||
|
--color-grey-325: #555;
|
||||||
|
--color-grey-350: #565d64;
|
||||||
|
--color-grey-400: #666;
|
||||||
|
--color-grey-500: #777;
|
||||||
|
--color-grey-600: #999;
|
||||||
|
--color-grey-700: #cbcbcb;
|
||||||
|
--color-grey-750: #ddd;
|
||||||
|
--color-grey-800: #e0e0e0;
|
||||||
|
--color-grey-850: #eee;
|
||||||
|
--color-grey-900: #f2f2f2;
|
||||||
|
--color-black: #000;
|
||||||
|
|
||||||
|
--color-background-page: var(--color-grey-100);
|
||||||
|
--color-background-gradient-first: #5ad8f7;
|
||||||
|
--color-background-gradient-second: #2f50af;
|
||||||
|
--color-background-gradient-third: #9150bf;
|
||||||
|
--color-background: var(--color-white);
|
||||||
|
--color-text: var(--color-grey-200);
|
||||||
|
--color-link: #1b98f8;
|
||||||
|
--color-menu-accent: #ed5900;
|
||||||
|
--color-background-code: var(--color-grey-850);
|
||||||
|
--color-error: #a00;
|
||||||
|
--color-error-input: #ffebeb;
|
||||||
|
--color-error-list: #dd0000;
|
||||||
|
--color-table-background: var(--color-background);
|
||||||
|
--color-table-stripe: var(--color-grey-900);
|
||||||
|
--color-text-tab: var(--color-white);
|
||||||
|
--color-background-tab: rgba(255, 255, 255, 0.2);
|
||||||
|
--color-background-tab-hover: rgba(255, 255, 255, 0.5);
|
||||||
|
--color-text-tab-active: #222;
|
||||||
|
--color-api-key: #0078e7;
|
||||||
|
|
||||||
|
--color-background-button-primary: #0078e7;
|
||||||
|
--color-background-button-green: #42dd53;
|
||||||
|
--color-background-button-red: #dd4242;
|
||||||
|
--color-background-button-success: rgb(28, 184, 65);
|
||||||
|
--color-background-button-error: rgb(202, 60, 60);
|
||||||
|
--color-text-button-error: var(--color-white);
|
||||||
|
--color-background-button-warning: rgb(202, 60, 60);
|
||||||
|
--color-text-button-warning: var(--color-white);
|
||||||
|
--color-background-button-secondary: rgb(66, 184, 221);
|
||||||
|
--color-background-button-cancel: rgb(200, 200, 200);
|
||||||
|
--color-text-button: var(--color-white);
|
||||||
|
--color-background-button-tag: rgb(99, 99, 99);
|
||||||
|
--color-background-snapshot-age: #dfdfdf;
|
||||||
|
--color-error-text-snapshot-age: var(--color-white);
|
||||||
|
--color-error-background-snapshot-age: #ff0000;
|
||||||
|
--color-background-button-tag-active: #9c9c9c;
|
||||||
|
|
||||||
|
--color-text-messages: var(--color-white);
|
||||||
|
--color-background-messages-message: rgba(255, 255, 255, .2);
|
||||||
|
--color-background-messages-error: rgba(255, 1, 1, .5);
|
||||||
|
--color-background-messages-notice: rgba(255, 255, 255, .5);
|
||||||
|
--color-border-notification: #ccc;
|
||||||
|
|
||||||
|
--color-background-checkbox-operations: rgba(0, 0, 0, 0.05);
|
||||||
|
--color-warning: #ff3300;
|
||||||
|
--color-border-warning: var(--color-warning);
|
||||||
|
--color-text-legend: var(--color-white);
|
||||||
|
|
||||||
|
--color-link-new-version: #e07171;
|
||||||
|
--color-last-checked: #bbb;
|
||||||
|
--color-text-footer: #444;
|
||||||
|
--color-border-watch-table-cell: #eee;
|
||||||
|
|
||||||
|
--color-text-watch-tag-list: #e70069;
|
||||||
|
--color-background-new-watch-form: rgba(0, 0, 0, 0.05);
|
||||||
|
--color-background-new-watch-input: var(--color-white);
|
||||||
|
--color-text-new-watch-input: var(--color-text);
|
||||||
|
|
||||||
|
--color-border-input: var(--color-grey-500);
|
||||||
|
--color-shadow-input: var(--color-grey-400);
|
||||||
|
--color-background-input: var(--color-white);
|
||||||
|
--color-text-input: var(--color-text);
|
||||||
|
--color-text-input-description: var(--color-grey-500);
|
||||||
|
--color-text-input-placeholder: var(--color-grey-600);
|
||||||
|
|
||||||
|
--color-background-table-thead: var(--color-grey-800);
|
||||||
|
--color-border-table-cell: var(--color-grey-700);
|
||||||
|
|
||||||
|
--color-text-menu-heading: var(--color-grey-350);
|
||||||
|
--color-text-menu-link: var(--color-grey-500);
|
||||||
|
--color-background-menu-link-hover: var(--color-grey-850);
|
||||||
|
--color-text-menu-link-hover: var(--color-grey-300);
|
||||||
|
|
||||||
|
--color-shadow-jump: var(--color-grey-500);
|
||||||
|
--color-icon-github: var(--color-black);
|
||||||
|
--color-icon-github-hover: var(--color-grey-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-darkmode="true"] {
|
||||||
|
--color-link: #59bdfb;
|
||||||
|
--color-text: var(--color-white);
|
||||||
|
|
||||||
|
--color-background-gradient-first: #3f90a5;
|
||||||
|
--color-background-gradient-second: #1e316c;
|
||||||
|
--color-background-gradient-third: #4d2c64;
|
||||||
|
|
||||||
|
--color-background-new-watch-input: var(--color-grey-100);
|
||||||
|
--color-text-new-watch-input: var(--color-text);
|
||||||
|
--color-background-table-thead: var(--color-grey-200);
|
||||||
|
--color-table-background: var(--color-grey-300);
|
||||||
|
--color-table-stripe: var(--color-grey-325);
|
||||||
|
--color-background: var(--color-grey-300);
|
||||||
|
--color-text-menu-heading: var(--color-grey-850);
|
||||||
|
--color-text-menu-link: var(--color-grey-800);
|
||||||
|
--color-border-table-cell: var(--color-grey-400);
|
||||||
|
--color-text-tab-active: var(--color-text);
|
||||||
|
|
||||||
|
--color-border-input: var(--color-grey-400);
|
||||||
|
--color-shadow-input: var(--color-grey-50);
|
||||||
|
--color-background-input: var(--color-grey-350);
|
||||||
|
--color-text-input-description: var(--color-grey-600);
|
||||||
|
--color-text-input-placeholder: var(--color-grey-600);
|
||||||
|
--color-text-watch-tag-list: #fa3e92;
|
||||||
|
|
||||||
|
--color-background-code: var(--color-grey-200);
|
||||||
|
|
||||||
|
--color-background-tab: rgba(0, 0, 0, 0.2);
|
||||||
|
--color-background-tab-hover: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--color-background-snapshot-age: var(--color-grey-200);
|
||||||
|
--color-shadow-jump: var(--color-grey-200);
|
||||||
|
--color-icon-github: var(--color-white);
|
||||||
|
--color-icon-github-hover: var(--color-grey-700);
|
||||||
|
|
||||||
|
// Anything that can't be manipulated through variables follows.
|
||||||
|
.watch-controls {
|
||||||
|
img {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-spread {
|
||||||
|
filter: hue-rotate(-10deg) brightness(1.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.watch-table {
|
||||||
|
|
||||||
|
.title-col a[target="_blank"]::after,
|
||||||
|
.current-diff-url::after {
|
||||||
|
filter: invert(.5) hue-rotate(10deg) brightness(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,121 +1,152 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" data-darkmode="{{ dark_mode|lower }}">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta charset="utf-8"/>
|
||||||
<meta name="description" content="Self hosted website change detection.">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
<meta name="description" content="Self hosted website change detection."/>
|
||||||
<title>Change Detection{{extra_title}}</title>
|
<title>Change Detection{{extra_title}}</title>
|
||||||
<link rel="alternate" type="application/rss+xml" title="Changedetection.io » Feed{% if active_tag %}- {{active_tag}}{% endif %}" href="{{ url_for('rss', tag=active_tag , token=app_rss_token)}}" />
|
<link rel="alternate" type="application/rss+xml" title="Changedetection.io » Feed{% if active_tag %}- {{active_tag}}{% endif %}" href="{{ url_for('rss', tag=active_tag , token=app_rss_token)}}"/>
|
||||||
<link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='pure-min.css')}}">
|
<link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='pure-min.css')}}"/>
|
||||||
<link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='styles.css')}}">
|
<link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='styles.css')}}"/>
|
||||||
{% if extra_stylesheets %}
|
{% if extra_stylesheets %}
|
||||||
{% for m in extra_stylesheets %}
|
{% for m in extra_stylesheets %}
|
||||||
<link rel="stylesheet" href="{{ m }}?ver=1000">
|
<link rel="stylesheet" href="{{ m }}?ver=1000"/>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="{{url_for('static_content', group='favicons', filename='apple-touch-icon.png')}}">
|
<link rel="apple-touch-icon" sizes="180x180" href="{{url_for('static_content', group='favicons', filename='apple-touch-icon.png')}}"/>
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="{{url_for('static_content', group='favicons', filename='favicon-32x32.png')}}">
|
<link rel="icon" type="image/png" sizes="32x32" href="{{url_for('static_content', group='favicons', filename='favicon-32x32.png')}}"/>
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="{{url_for('static_content', group='favicons', filename='favicon-16x16.png')}}">
|
<link rel="icon" type="image/png" sizes="16x16" href="{{url_for('static_content', group='favicons', filename='favicon-16x16.png')}}"/>
|
||||||
<link rel="manifest" href="{{url_for('static_content', group='favicons', filename='site.webmanifest')}}">
|
<link rel="manifest" href="{{url_for('static_content', group='favicons', filename='site.webmanifest')}}"/>
|
||||||
<link rel="mask-icon" href="{{url_for('static_content', group='favicons', filename='safari-pinned-tab.svg')}}" color="#5bbad5">
|
<link rel="mask-icon" href="{{url_for('static_content', group='favicons', filename='safari-pinned-tab.svg')}}" color="#5bbad5"/>
|
||||||
<link rel="shortcut icon" href="{{url_for('static_content', group='favicons', filename='favicon.ico')}}">
|
<link rel="shortcut icon" href="{{url_for('static_content', group='favicons', filename='favicon.ico')}}"/>
|
||||||
<meta name="msapplication-TileColor" content="#da532c">
|
<meta name="msapplication-TileColor" content="#da532c"/>
|
||||||
<meta name="msapplication-config" content="favicons/browserconfig.xml">
|
<meta name="msapplication-config" content="favicons/browserconfig.xml"/>
|
||||||
<meta name="theme-color" content="#ffffff">
|
<meta name="theme-color" content="#ffffff"/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body::before {
|
body::before {
|
||||||
background-image: url({{url_for('static_content', group='images', filename='gradient-border.png')}});
|
background-image: url({{url_for('static_content', group='images', filename='gradient-border.png') }});
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
|
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
</head>
|
<body>
|
||||||
|
<div class="header">
|
||||||
<body>
|
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed" id="nav-menu">
|
||||||
|
|
||||||
<div class="header">
|
|
||||||
|
|
||||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed" id="nav-menu">
|
|
||||||
{% if has_password and not current_user.is_authenticated %}
|
{% if has_password and not current_user.is_authenticated %}
|
||||||
<a class="pure-menu-heading" href="https://github.com/dgtlmoon/changedetection.io" rel="noopener"><strong>Change</strong>Detection.io</a>
|
<a class="pure-menu-heading" href="https://github.com/dgtlmoon/changedetection.io" rel="noopener">
|
||||||
|
<strong>Change</strong>Detection.io</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
<a class="pure-menu-heading" href="{{url_for('index')}}"><strong>Change</strong>Detection.io</a>
|
<a class="pure-menu-heading" href="{{url_for('index')}}">
|
||||||
|
<strong>Change</strong>Detection.io</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if current_diff_url %}
|
{% if current_diff_url %}
|
||||||
<a class=current-diff-url href="{{ current_diff_url }}"><span style="max-width: 30%; overflow: hidden;">{{ current_diff_url }}</span></a>
|
<a class="current-diff-url" href="{{ current_diff_url }}">
|
||||||
|
<span style="max-width: 30%; overflow: hidden">{{ current_diff_url }}</span></a>
|
||||||
{% else %}
|
{% else %}
|
||||||
{% if new_version_available and not (has_password and not current_user.is_authenticated) %}
|
{% if new_version_available and not(has_password and not current_user.is_authenticated) %}
|
||||||
<span id="new-version-text" class="pure-menu-heading"><a href="https://github.com/dgtlmoon/changedetection.io">A new version is available</a></span>
|
<span id="new-version-text" class="pure-menu-heading">
|
||||||
{% endif %}
|
<a href="https://github.com/dgtlmoon/changedetection.io">A new version is available</a>
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<ul class="pure-menu-list" id="top-right-menu">
|
<ul class="pure-menu-list" id="top-right-menu">
|
||||||
{% if current_user.is_authenticated or not has_password %}
|
{% if current_user.is_authenticated or not has_password %}
|
||||||
{% if not current_diff_url %}
|
{% if not
|
||||||
<li class="pure-menu-item">
|
current_diff_url %}
|
||||||
|
<li class="pure-menu-item">
|
||||||
<a href="{{ url_for('settings_page')}}" class="pure-menu-link">SETTINGS</a>
|
<a href="{{ url_for('settings_page')}}" class="pure-menu-link">SETTINGS</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="pure-menu-item">
|
<li class="pure-menu-item">
|
||||||
<a href="{{ url_for('import_page')}}" class="pure-menu-link">IMPORT</a>
|
<a href="{{ url_for('import_page')}}" class="pure-menu-link">IMPORT</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="pure-menu-item">
|
<li class="pure-menu-item">
|
||||||
<a href="{{ url_for('get_backup')}}" class="pure-menu-link">BACKUP</a>
|
<a href="{{ url_for('get_backup')}}" class="pure-menu-link">BACKUP</a>
|
||||||
</li>
|
</li>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li class="pure-menu-item">
|
<li class="pure-menu-item">
|
||||||
<a href="{{ url_for('edit_page', uuid=uuid, next='diff') }}" class="pure-menu-link">EDIT</a>
|
<a href="{{ url_for('edit_page', uuid=uuid, next='diff') }}" class="pure-menu-link">EDIT</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<li class="pure-menu-item">
|
<li class="pure-menu-item">
|
||||||
<a class="pure-menu-link" href="https://github.com/dgtlmoon/changedetection.io">Website Change Detection and Notification.</a>
|
<a class="pure-menu-link" href="https://github.com/dgtlmoon/changedetection.io">Website Change Detection and Notification.</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% if current_user.is_authenticated %}
|
||||||
{% if current_user.is_authenticated %}
|
<li class="pure-menu-item">
|
||||||
<li class="pure-menu-item"><a href="{{url_for('logout')}}" class="pure-menu-link">LOG OUT</a></li>
|
<a href="{{url_for('logout')}}" class="pure-menu-link">LOG OUT</a>
|
||||||
{% endif %}
|
</li>
|
||||||
<li class="pure-menu-item"><a class="github-link" href="https://github.com/dgtlmoon/changedetection.io">
|
{% endif %}
|
||||||
<svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16"
|
<li class="pure-menu-item">
|
||||||
version="1.1"
|
{% if dark_mode %}
|
||||||
width="32" aria-hidden="true">
|
{% set darkClass = 'dark' %}
|
||||||
<path fill-rule="evenodd"
|
{% endif %}
|
||||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
|
<button class="toggle-theme {{darkClass}}" type="button">
|
||||||
</svg>
|
<span class="visually-hidden">Toggle light/dark mode</span>
|
||||||
</a></li>
|
<span class="icon-light">
|
||||||
|
{% include "svgs/light-mode-toggle-icon.svg" %}
|
||||||
|
</span>
|
||||||
|
<span class="icon-dark">
|
||||||
|
{% include "svgs/dark-mode-toggle-icon.svg" %}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="pure-menu-item">
|
||||||
|
<a class="github-link" href="https://github.com/dgtlmoon/changedetection.io">
|
||||||
|
{% include "svgs/github.svg" %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% if hosted_sticky %}
|
||||||
{% if hosted_sticky %}<div class="sticky-tab" id="hosted-sticky"><a href="https://lemonade.changedetection.io/start?ref={{guid}}">Let us host your instance!</a></div>{% endif %}
|
<div class="sticky-tab" id="hosted-sticky">
|
||||||
{% if left_sticky %}<div class="sticky-tab" id="left-sticky"><a href="{{url_for('preview_page', uuid=uuid)}}">Show current snapshot</a></div> {% endif %}
|
<a href="https://lemonade.changedetection.io/start?ref={{guid}}">Let us host your instance!</a>
|
||||||
{% if right_sticky %}<div class="sticky-tab" id="right-sticky">{{ right_sticky }}</div> {% endif %}
|
</div>
|
||||||
<section class="content">
|
{% endif %}
|
||||||
<header>
|
{% if left_sticky %}
|
||||||
|
<div class="sticky-tab" id="left-sticky">
|
||||||
|
<a href="{{url_for('preview_page', uuid=uuid)}}">Show current snapshot</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if right_sticky %}
|
||||||
|
<div class="sticky-tab" id="right-sticky">{{ right_sticky }}</div>
|
||||||
|
{% endif %}
|
||||||
|
<section class="content">
|
||||||
|
<header>
|
||||||
{% block header %}{% endblock %}
|
{% block header %}{% endblock %}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
{% with messages = get_flashed_messages(with_categories = true) %}
|
||||||
{% if messages %}
|
{% if
|
||||||
<ul class=messages>
|
messages %}
|
||||||
{% for category, message in messages %}
|
<ul class="messages">
|
||||||
<li class="{{ category }}">{{ message }}</li>
|
{% for category, message in messages %}
|
||||||
{% endfor %}
|
<li class="{{ category }}">{{ message }}</li>
|
||||||
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
|
{% if session['share-link'] %}
|
||||||
{% if session['share-link'] %}
|
|
||||||
<ul class="messages with-share-link">
|
<ul class="messages with-share-link">
|
||||||
<li class="message">Share this link: <span id="share-link">{{ session['share-link'] }}</span> <img style="height: 1em;display:inline-block;" src="{{url_for('static_content', group='images', filename='copy.svg')}}" /></li>
|
<li class="message">
|
||||||
|
Share this link:
|
||||||
|
<span id="share-link">{{ session['share-link'] }}</span>
|
||||||
|
<img style="height: 1em; display: inline-block" src="{{url_for('static_content', group='images', filename='copy.svg')}}"/>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% block content %}{% endblock %}
|
||||||
{% block content %}
|
</section>
|
||||||
|
<script
|
||||||
{% endblock %}
|
type="text/javascript"
|
||||||
</section>
|
src="{{url_for('static_content', group='js', filename='toggle-theme.js')}}"
|
||||||
|
defer></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,32 +1,49 @@
|
|||||||
{% extends 'base.html' %}
|
{% extends 'base.html' %} {% block content %}
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<div class="edit-form">
|
<div class="edit-form">
|
||||||
<div class="box-wrap inner">
|
<div class="box-wrap inner">
|
||||||
<form class="pure-form pure-form-stacked" action="{{url_for('clear_all_history')}}" method="POST">
|
<form
|
||||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
class="pure-form pure-form-stacked"
|
||||||
<fieldset>
|
action="{{url_for('clear_all_history')}}"
|
||||||
<div class="pure-control-group">
|
method="POST"
|
||||||
This will remove version history (snapshots) for ALL watches, but keep your list of URLs! <br/>
|
>
|
||||||
You may like to use the <strong>BACKUP</strong> link first.<br/>
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
|
||||||
</div>
|
<fieldset>
|
||||||
<br/>
|
<div class="pure-control-group">
|
||||||
<div class="pure-control-group">
|
This will remove version history (snapshots) for ALL watches, but keep
|
||||||
<label for="confirmtext">Confirmation text</label>
|
your list of URLs! <br />
|
||||||
<input type="text" id="confirmtext" required="" name="confirmtext" value="" size="10"/>
|
You may like to use the <strong>BACKUP</strong> link first.<br />
|
||||||
<span class="pure-form-message-inline">Type in the word <strong>clear</strong> to confirm that you understand.</span>
|
</div>
|
||||||
</div>
|
<br />
|
||||||
<br/>
|
<div class="pure-control-group">
|
||||||
<div class="pure-control-group">
|
<label for="confirmtext">Confirmation text</label>
|
||||||
<button type="submit" class="pure-button pure-button-primary">Clear History!</button>
|
<input
|
||||||
</div>
|
type="text"
|
||||||
<br/>
|
id="confirmtext"
|
||||||
<div class="pure-control-group">
|
required=""
|
||||||
<a href="{{url_for('index')}}" class="pure-button button-small button-cancel">Cancel</a>
|
name="confirmtext"
|
||||||
</div>
|
value=""
|
||||||
</fieldset>
|
size="10"
|
||||||
|
/>
|
||||||
|
<span class="pure-form-message-inline"
|
||||||
|
>Type in the word <strong>clear</strong> to confirm that you
|
||||||
|
understand.</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div class="pure-control-group">
|
||||||
|
<button type="submit" class="pure-button pure-button-primary">
|
||||||
|
Clear History!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div class="pure-control-group">
|
||||||
|
<a href="{{url_for('index')}}" class="pure-button button-cancel"
|
||||||
|
>Cancel</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 749 B |
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in new issue