From 1dba42e4308d3e351cb45385d45d136a55b4ae3d Mon Sep 17 00:00:00 2001 From: Nicholas Jitkoff Date: Sat, 11 Jun 2022 08:48:32 -0700 Subject: [PATCH] Add loader and manifest --- docs/index.css | 71 +++++++++++++++++++++++++++++++++++++++++++++- docs/index.html | 5 ++-- docs/index.js | 7 +++++ docs/manifest.json | 26 +++++++++++++++++ 4 files changed, 106 insertions(+), 3 deletions(-) create mode 100644 docs/manifest.json diff --git a/docs/index.css b/docs/index.css index aea3f0e..5ad2800 100644 --- a/docs/index.css +++ b/docs/index.css @@ -110,5 +110,74 @@ body:not(.download) #download { background:black; } #dl-name { -margin-bottom:2em; + margin-bottom:2em; } + +.loader{ + border-radius:50%; + width: 1em; + height: 1em; + font-size: 10px; + margin: 0 auto; + position: relative; + text-indent: -9999em; + color:white; + display:none; + + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation: turntable 2.8s infinite ease-in-out; + animation: turntable 2.8s infinite ease-in-out; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; + animation-timing-function: ease-in-out; + + --ld0: 0.00em 2.25em 0 0.20em rgba(127,127,127,1.50); + --ld1: 0.93em 2.24em 0 0.20em rgba(127,127,127,1.45); + --ld2: 1.76em 2.20em 0 0.18em rgba(127,127,127,1.31); + --ld3: 2.43em 2.15em 0 0.16em rgba(127,127,127,1.09); + --ld4: 2.85em 2.08em 0 0.13em rgba(127,127,127,0.81); + --ld5: 3.00em 2.00em 0 0.10em rgba(127,127,127,0.50); + --ld6: 2.85em 1.92em 0 0.07em rgba(127,127,127,0.19); + --ld7: 2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09); + --ld8: 1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31); + --ld9: 0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45); + --ld10: 0.00em 1.75em 0 0.00em rgba(127,127,127,-0.50); + --ld11: -0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45); + --ld12: -1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31); + --ld13: -2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09); + --ld14: -2.85em 1.92em 0 0.07em rgba(127,127,127,0.19); + --ld15: -3.00em 2.00em 0 0.10em rgba(127,127,127,0.50); + --ld16: -2.85em 2.08em 0 0.13em rgba(127,127,127,0.81); + --ld17: -2.43em 2.15em 0 0.16em rgba(127,127,127,1.09); + --ld18: -1.76em 2.20em 0 0.18em rgba(127,127,127,1.31); + --ld19: -0.93em 2.24em 0 0.20em rgba(127,127,127,1.45); +} + + +@keyframes turntable { + 100%, + 0% {box-shadow:var(--ld0),var(--ld4), var(--ld8),var(--ld12),var(--ld16)} + 5% {box-shadow:var(--ld1),var(--ld5), var(--ld9),var(--ld13),var(--ld17)} + 10% {box-shadow:var(--ld2),var(--ld6), var(--ld10),var(--ld14),var(--ld18)} + 15% {box-shadow:var(--ld3),var(--ld7), var(--ld11),var(--ld15),var(--ld19)} + 20% {box-shadow:var(--ld4),var(--ld8), var(--ld12),var(--ld16),var(--ld0)} + 25% {box-shadow:var(--ld5),var(--ld9), var(--ld13),var(--ld17),var(--ld1)} + 30% {box-shadow:var(--ld6),var(--ld10), var(--ld14),var(--ld18),var(--ld2)} + 35% {box-shadow:var(--ld7),var(--ld11), var(--ld15),var(--ld19),var(--ld3)} + 40% {box-shadow:var(--ld8),var(--ld12), var(--ld16),var(--ld0),var(--ld4)} + 45% {box-shadow:var(--ld9),var(--ld13), var(--ld17),var(--ld1),var(--ld5)} + 50% {box-shadow:var(--ld10),var(--ld14), var(--ld18),var(--ld2),var(--ld6)} + 55% {box-shadow:var(--ld11),var(--ld15), var(--ld19),var(--ld3),var(--ld7)} + 60% {box-shadow:var(--ld12),var(--ld16), var(--ld0),var(--ld4),var(--ld8)} + 65% {box-shadow:var(--ld13),var(--ld17), var(--ld1),var(--ld5),var(--ld9)} + 70% {box-shadow:var(--ld14),var(--ld18), var(--ld2),var(--ld6),var(--ld10)} + 75% {box-shadow:var(--ld15),var(--ld19), var(--ld3),var(--ld7),var(--ld11)} + 80% {box-shadow:var(--ld16),var(--ld0), var(--ld4),var(--ld8),var(--ld12)} + 85% {box-shadow:var(--ld17),var(--ld1), var(--ld5),var(--ld9),var(--ld13)} + 90% {box-shadow:var(--ld18),var(--ld2), var(--ld6),var(--ld10),var(--ld14)} + 95% {box-shadow:var(--ld19),var(--ld3), var(--ld7),var(--ld11),var(--ld15)} +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 6d771f8..98199a2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,10 +4,11 @@ - + - + + diff --git a/docs/index.js b/docs/index.js index 77ccb9d..c7276bc 100644 --- a/docs/index.js +++ b/docs/index.js @@ -24,6 +24,12 @@ //

// ` } + + function addLoader() { + let el = document.createElement("div"); + el.className = "loader"; + document.body.appendChild(el); + } function setThemeColor(color) { document.getElementById("themeColor").content = color; @@ -44,6 +50,7 @@ "application/ld+json": {script:"recipe"}, "text/rawhtml": {script:"parse"}, "javascript": {script:"bookmarklet"}, + "ipfs": {script:"ipfs"}, "web3": {script:"web3", mode:"frame"}, "text/directory": {script:"download", args: {extension:"vcf", filename:"contact"}} } diff --git a/docs/manifest.json b/docs/manifest.json new file mode 100644 index 0000000..18a3c13 --- /dev/null +++ b/docs/manifest.json @@ -0,0 +1,26 @@ +{ + "short_name": "itty.bitty", + "name": "itty.bitty.app", + "description": "itty.bitty.app", + "icons": [ + { + "src": "/favicon.svg", + "type": "image/svg+xml", + "sizes": "32x32" + } + ], + "start_url": "/edit", + "background_color": "#3367D6", + "display": "browser", + "scope": "/", + "theme_color": "#3367D6", + "shortcuts": [ + { + "name": "New", + "short_name": "New Site", + "description": "New Site", + "url": "/edit", + "icons": [{ "src": "/favicon.svg", "sizes": "32x32" }] + } + ] +} \ No newline at end of file