diff --git a/api/usage.json b/api/usage.json
index e9ee720..ca59ef9 100644
--- a/api/usage.json
+++ b/api/usage.json
@@ -14,5 +14,13 @@
"www.ari-web.xyz": 8.6,
"blog.ari-web.xyz": 7.3
}
+ },
+ "2022-09-23": {
+ "total": 11.0,
+ "top": {
+ "www.ari-web.xyz": 3.4,
+ "blog.ari-web.xyz": 2.4,
+ "legacy.blog.ari-web.xyz": 2.2
+ }
}
}
diff --git a/content/js/config/index.js b/content/js/config/index.js
index 78e0b1c..114d014 100644
--- a/content/js/config/index.js
+++ b/content/js/config/index.js
@@ -96,6 +96,12 @@ const locations = {
desc: "90s page",
aliases: ["90s", "90", "vintage", "old"],
},
+
+ 14: {
+ url: "/page/export",
+ desc: "Export and/or import your ari-web data",
+ aliases: ["export", "import", "data"],
+ },
};
const escape_HTML = (str) =>
str.replace(
diff --git a/content/js/export/index.js b/content/js/export/index.js
new file mode 100644
index 0000000..42b36bc
--- /dev/null
+++ b/content/js/export/index.js
@@ -0,0 +1,54 @@
+"use strict";
+
+function main() {
+ document.getElementById("export-button").addEventListener("click", () => {
+ if (!window.localStorage.length) {
+ alert("No data to export");
+ return;
+ }
+
+ document.getElementById("export").value = btoa(
+ JSON.stringify(window.localStorage)
+ );
+ });
+
+ document.getElementById("import-button").addEventListener("click", () => {
+ let import_data = document.getElementById("import").value;
+
+ if (!import_data) {
+ alert("No import data provided");
+ return;
+ }
+
+ try {
+ let data = JSON.parse(atob(import_data));
+
+ if (!Object.keys(data).length) {
+ alert("Cannot import no data");
+ return;
+ }
+
+ if (!confirm("Are you sure you want to import this data?")) return;
+
+ if (
+ confirm(
+ "Do you want to overwrite your data fully (OK) or overwrite the parts that are in the data (CANCEL)"
+ )
+ )
+ window.localStorage.clear();
+
+ Object.keys(data).forEach((k) =>
+ localStorage.setItem(k, JSON.stringify(data[k]))
+ );
+
+ alert("Data imported");
+ } catch (e) {
+ alert(`Invalid data provided: ${e}`);
+ return;
+ }
+
+ window.location.href = "/";
+ });
+}
+
+document.addEventListener("DOMContentLoaded", main);
diff --git a/content/styles/clean/index.css b/content/styles/clean/index.css
index dcd6256..0e5a919 100644
--- a/content/styles/clean/index.css
+++ b/content/styles/clean/index.css
@@ -43,6 +43,10 @@ textarea {
font: inherit;
}
+label {
+ cursor: pointer;
+}
+
@media (prefers-reduced-motion: reduce) {
*,
::after,
diff --git a/content/styles/export/' b/content/styles/export/'
new file mode 100644
index 0000000..68710b7
--- /dev/null
+++ b/content/styles/export/'
@@ -0,0 +1,56 @@
+:root {
+ --switch-fg: #f9f6e8;
+ --switch-bg-inactive: #666c7f;
+ --switch-bg-active: #87afaf;
+}
+
+*,
+*::before,
+*::after {
+ background-color: #2b2e36;
+ color: #f9f6e8;
+ font-family: sans-serif;
+}
+
+label:not(label[for]) {
+ float: right;
+ padding: 1em;
+}
+
+body {
+ padding: 1em;
+ margin: auto;
+ max-width: 1000px;
+ min-height: 100vh;
+}
+
+.switch {
+ padding: 1em;
+}
+
+.content *, .content {
+ display: block
+}
+
+#pages {
+ display: grid;
+ height: 100%;
+
+ grid-template-rows: auto auto;
+ grid-gap: 1em;
+ align-items: center;
+}
+
+#pages div {
+ height: 100%;
+ padding: 4em;
+}
+
+#pages div h2 {
+ text-align: center;
+}
+
+div .disabled {
+ z-index: 9999;
+ background-color: rgba(0, 0, 0, 0.5);
+}
diff --git a/content/styles/export/index.css b/content/styles/export/index.css
new file mode 100644
index 0000000..f4efa55
--- /dev/null
+++ b/content/styles/export/index.css
@@ -0,0 +1,72 @@
+/* :root {
+ --switch-fg: #f9f6e8;
+ --switch-bg-inactive: #666c7f;
+ --switch-bg-active: #87afaf;
+} */
+
+*,
+*::before,
+*::after {
+ background-color: #2b2e36;
+ color: #f9f6e8;
+ font-family: sans-serif;
+}
+
+label:not(label[for]) {
+ float: right;
+ padding: 1em;
+}
+
+body {
+ padding: 1em;
+ margin: auto;
+ max-width: 1000px;
+ height: 100vh;
+}
+
+/* .switch {
+ padding: 1em;
+} */
+
+.content *,
+.content {
+ display: block;
+}
+
+#pages {
+ display: grid;
+ height: 100%;
+
+ grid-template-rows: auto auto;
+ grid-gap: 1em;
+ align-items: center;
+}
+
+#pages > div {
+ height: 100%;
+ padding: 4em;
+}
+
+#pages * h2 {
+ text-align: center;
+}
+
+textarea {
+ width: 100%;
+ height: 50%;
+ margin: 1em;
+ padding: 1em;
+ resize: none;
+}
+
+button {
+ padding: 0.5em;
+ background-color: #666c7f;
+ border-color: transparent;
+ cursor: pointer;
+ transition: background-color 0.2s ease-in-out;
+}
+
+button:hover, button:focus {
+ background-color: #87afaf;
+}
diff --git a/content/styles/noscript/index.css b/content/styles/noscript/index.css
new file mode 100644
index 0000000..4d9ceb6
--- /dev/null
+++ b/content/styles/noscript/index.css
@@ -0,0 +1,25 @@
+:root {
+ --ns-bg: #af5f5f;
+ --ns-fg: #262220;
+}
+
+*[ns],
+*[nsb],
+*[nsb] *,
+*[ns] * {
+ background-color: var(--ns-bg);
+ color: var(--ns-fg);
+ font-weight: bold;
+ line-height: 1.5;
+}
+
+*[ns] {
+ padding: 0.2em;
+ display: inline;
+}
+
+*[nsb] {
+ display: block;
+ text-align: center;
+ padding: 2em;
+}
diff --git a/content/styles/toggle/index.css b/content/styles/toggle/index.css
new file mode 100644
index 0000000..78c24ba
--- /dev/null
+++ b/content/styles/toggle/index.css
@@ -0,0 +1,84 @@
+:root {
+ --switch-fg: #ffffff;
+
+ --switch-bg-active: #2196f3;
+ --switch-bg-inactive: #cccccc;
+
+ --switch-transision-time: 0.2s;
+
+ --switch-width: 60px;
+ --switch-height: 34px;
+
+ --switch-slider-width: 26px;
+ --switch-slider-height: var(--switch-slider-width);
+ --switch-slider-left: 4px;
+ --switch-slider-bottom: var(--switch-slider-left);
+}
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: var(--switch-width);
+ height: var(--switch-height);
+}
+
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ background-color: var(--switch-bg-inactive);
+ -webkit-transition: var(--switch-transision-time);
+ -o-transition: var(--switch-transision-time);
+ transition: var(--switch-transision-time);
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+
+ width: var(--switch-slider-width);
+ height: var(--switch-slider-height);
+
+ left: var(--switch-slider-left);
+ bottom: var(--switch-slider-bottom);
+
+ background-color: var(--switch-fg);
+
+ -webkit-transition: var(--switch-transision-time);
+ -o-transition: var(--switch-transision-time);
+ transition: var(--switch-transision-time);
+}
+
+input:checked + .slider {
+ background-color: var(--switch-bg-active);
+}
+
+input:focus + .slider {
+ -webkit-box-shadow: 0 0 1px var(--switch-bg-active);
+ box-shadow: 0 0 1px var(--switch-bg-active);
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
diff --git a/page/404/index.html b/page/404/index.html
index 6a18f94..4da737a 100644
--- a/page/404/index.html
+++ b/page/404/index.html
@@ -9,7 +9,7 @@
JavaScript to be enabled
+ >, if you just don't trust me, see the paragraph above
+
+
- Do you want to reset your account?
+
+
+ Do you want to reset your account?
+
+