gabdlr/groceries-price-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3467a574c16648879ec03b03fa1b921d834ab8d9
groceries-price-tracker/public/scan-loading-screen/scan-loading-screen.js

1034 lines
19 KiB
JavaScript
Raw Blame History

const stylesheet = new CSSStyleSheet()
stylesheet.replaceSync(`
:host {
align-items: center;
background-color: #000;
display: flex;
height: 100%;
position: absolute;
width: 100%;
}
.container {
font-size: 0.5vh;
margin: auto;
}
.barcode {
margin: 0 auto;
position: relative;
}
.barcode > div {
float: left;
margin-right: 2em;
transform-origin: 0 0;
}
.barcode > div:nth-child(1) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 0%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 3.4482758621%);
}
.barcode > div:nth-child(2) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 3.4482758621%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 6.8965517241%);
}
.barcode > div:nth-child(3) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 6.8965517241%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 10.3448275862%);
}
.barcode > div:nth-child(4) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 10.3448275862%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 13.7931034483%);
}
.barcode > div:nth-child(5) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 13.7931034483%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 17.2413793103%);
}
.barcode > div:nth-child(6) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 17.2413793103%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 20.6896551724%);
}
.barcode > div:nth-child(7) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 20.6896551724%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 24.1379310345%);
}
.barcode > div:nth-child(8) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 24.1379310345%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 27.5862068966%);
}
.barcode > div:nth-child(9) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 27.5862068966%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 31.0344827586%);
}
.barcode > div:nth-child(10) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 31.0344827586%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 34.4827586207%);
}
.barcode > div:nth-child(11) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 34.4827586207%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 37.9310344828%);
}
.barcode > div:nth-child(12) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 37.9310344828%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 41.3793103448%);
}
.barcode > div:nth-child(13) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 41.3793103448%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 44.8275862069%);
}
.barcode > div:nth-child(14) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 44.8275862069%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 48.275862069%);
}
.barcode > div:nth-child(15) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 48.275862069%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 51.724137931%);
}
.barcode > div:nth-child(16) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 51.724137931%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 55.1724137931%);
}
.barcode > div:nth-child(17) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 55.1724137931%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 58.6206896552%);
}
.barcode > div:nth-child(18) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 58.6206896552%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 62.0689655172%);
}
.barcode > div:nth-child(19) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 62.0689655172%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 65.5172413793%);
}
.barcode > div:nth-child(20) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 65.5172413793%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 68.9655172414%);
}
.barcode > div:nth-child(21) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 68.9655172414%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 72.4137931034%);
}
.barcode > div:nth-child(22) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 72.4137931034%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 75.8620689655%);
}
.barcode > div:nth-child(23) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 75.8620689655%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 79.3103448276%);
}
.barcode > div:nth-child(24) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 79.3103448276%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 82.7586206897%);
}
.barcode > div:nth-child(25) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 82.7586206897%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 86.2068965517%);
}
.barcode > div:nth-child(26) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 86.2068965517%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 89.6551724138%);
}
.barcode > div:nth-child(27) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 89.6551724138%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 93.1034482759%);
}
.barcode > div:nth-child(28) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 93.1034482759%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 96.5517241379%);
}
.barcode > div:nth-child(29) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 96.5517241379%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 100%);
}
.barcode > div:nth-child(30) {
background: linear-gradient(90deg, oklch(80% 0.3 240deg) 100%, oklch(90% 0.25 280deg) 50%, oklch(70% 0.35 160deg) 103.4482758621%);
}
.barcode div:nth-child(1),
.barcode div:nth-child(2),
.barcode div:nth-child(15),
.barcode div:nth-child(16),
.barcode div:nth-child(29),
.barcode div:nth-child(30) {
height: 27em;
}
.barcode div:nth-child(1),
.barcode div:nth-child(2),
.barcode div:nth-child(3),
.barcode div:nth-child(5),
.barcode div:nth-child(8),
.barcode div:nth-child(10),
.barcode div:nth-child(12),
.barcode div:nth-child(13),
.barcode div:nth-child(15),
.barcode div:nth-child(16),
.barcode div:nth-child(18),
.barcode div:nth-child(19),
.barcode div:nth-child(22),
.barcode div:nth-child(25),
.barcode div:nth-child(27),
.barcode div:nth-child(28),
.barcode div:nth-child(29),
.barcode div:nth-child(30) {
width: 0.6em;
}
.barcode div:nth-child(3),
.barcode div:nth-child(4),
.barcode div:nth-child(5),
.barcode div:nth-child(6),
.barcode div:nth-child(7),
.barcode div:nth-child(8),
.barcode div:nth-child(9),
.barcode div:nth-child(10),
.barcode div:nth-child(11),
.barcode div:nth-child(12),
.barcode div:nth-child(13),
.barcode div:nth-child(14),
.barcode div:nth-child(17),
.barcode div:nth-child(18),
.barcode div:nth-child(19),
.barcode div:nth-child(20),
.barcode div:nth-child(21),
.barcode div:nth-child(22),
.barcode div:nth-child(23),
.barcode div:nth-child(24),
.barcode div:nth-child(25),
.barcode div:nth-child(26),
.barcode div:nth-child(27),
.barcode div:nth-child(28) {
height: 24em;
}
.barcode div:nth-child(6),
.barcode div:nth-child(7),
.barcode div:nth-child(9),
.barcode div:nth-child(11),
.barcode div:nth-child(14),
.barcode div:nth-child(23),
.barcode div:nth-child(24) {
width: 1.2em;
}
.barcode div:nth-child(17),
.barcode div:nth-child(20),
.barcode div:nth-child(21),
.barcode div:nth-child(26) {
width: 1.8em;
}
.barcode div:nth-child(4) {
width: 2.4em;
}
.barcode div:nth-child(1),
.barcode div:nth-child(2),
.barcode div:nth-child(3),
.barcode div:nth-child(4),
.barcode div:nth-child(6),
.barcode div:nth-child(7),
.barcode div:nth-child(8),
.barcode div:nth-child(11),
.barcode div:nth-child(13),
.barcode div:nth-child(14),
.barcode div:nth-child(15),
.barcode div:nth-child(16),
.barcode div:nth-child(18),
.barcode div:nth-child(19),
.barcode div:nth-child(22),
.barcode div:nth-child(24),
.barcode div:nth-child(25),
.barcode div:nth-child(29),
.barcode div:nth-child(30) {
margin-right: 0.6em;
}
.barcode div:nth-child(12),
.barcode div:nth-child(17),
.barcode div:nth-child(20),
.barcode div:nth-child(21),
.barcode div:nth-child(23),
.barcode div:nth-child(26),
.barcode div:nth-child(28) {
margin-right: 1.2em;
}
.barcode div:nth-child(5),
.barcode div:nth-child(9),
.barcode div:nth-child(10),
.barcode div:nth-child(27) {
margin-right: 1.8em;
}
@keyframes bar-1 {
0%, 16% {
transform: scaleY(0);
}
66% {
transform: scaleY(1);
}
81% {
opacity: 1;
}
91% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(1) {
animation: bar-1 5s ease-out infinite forwards;
}
@keyframes bar-2 {
0%, 24% {
transform: scaleY(0);
}
61% {
transform: scaleY(1);
}
81% {
opacity: 1;
}
93% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(2) {
animation: bar-2 5s ease-out infinite forwards;
}
@keyframes bar-3 {
0%, 18% {
transform: scaleY(0);
}
61% {
transform: scaleY(1);
}
72% {
opacity: 1;
}
93% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(3) {
animation: bar-3 5s ease-out infinite forwards;
}
@keyframes bar-4 {
0%, 3% {
transform: scaleY(0);
}
47% {
transform: scaleY(1);
}
81% {
opacity: 1;
}
88% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(4) {
animation: bar-4 5s ease-out infinite forwards;
}
@keyframes bar-5 {
0%, 2% {
transform: scaleY(0);
}
67% {
transform: scaleY(1);
}
73% {
opacity: 1;
}
93% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(5) {
animation: bar-5 5s ease-out infinite forwards;
}
@keyframes bar-6 {
0%, 14% {
transform: scaleY(0);
}
54% {
transform: scaleY(1);
}
74% {
opacity: 1;
}
93% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(6) {
animation: bar-6 5s ease-out infinite forwards;
}
@keyframes bar-7 {
0%, 9% {
transform: scaleY(0);
}
60% {
transform: scaleY(1);
}
76% {
opacity: 1;
}
89% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(7) {
animation: bar-7 5s ease-out infinite forwards;
}
@keyframes bar-8 {
0%, 27% {
transform: scaleY(0);
}
48% {
transform: scaleY(1);
}
73% {
opacity: 1;
}
93% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(8) {
animation: bar-8 5s ease-out infinite forwards;
}
@keyframes bar-9 {
0%, 16% {
transform: scaleY(0);
}
50% {
transform: scaleY(1);
}
73% {
opacity: 1;
}
90% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(9) {
animation: bar-9 5s ease-out infinite forwards;
}
@keyframes bar-10 {
0%, 9% {
transform: scaleY(0);
}
57% {
transform: scaleY(1);
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(10) {
animation: bar-10 5s ease-out infinite forwards;
}
@keyframes bar-11 {
0%, 14% {
transform: scaleY(0);
}
58% {
transform: scaleY(1);
}
75% {
opacity: 1;
}
90% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(11) {
animation: bar-11 5s ease-out infinite forwards;
}
@keyframes bar-12 {
0%, 15% {
transform: scaleY(0);
}
60% {
transform: scaleY(1);
}
75% {
opacity: 1;
}
93% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(12) {
animation: bar-12 5s ease-out infinite forwards;
}
@keyframes bar-13 {
0%, 8% {
transform: scaleY(0);
}
53% {
transform: scaleY(1);
}
75% {
opacity: 1;
}
91% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(13) {
animation: bar-13 5s ease-out infinite forwards;
}
@keyframes bar-14 {
0%, 17% {
transform: scaleY(0);
}
47% {
transform: scaleY(1);
}
76% {
opacity: 1;
}
91% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(14) {
animation: bar-14 5s ease-out infinite forwards;
}
@keyframes bar-15 {
0%, 26% {
transform: scaleY(0);
}
49% {
transform: scaleY(1);
}
81% {
opacity: 1;
}
89% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(15) {
animation: bar-15 5s ease-out infinite forwards;
}
@keyframes bar-16 {
0%, 21% {
transform: scaleY(0);
}
55% {
transform: scaleY(1);
}
72% {
opacity: 1;
}
92% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(16) {
animation: bar-16 5s ease-out infinite forwards;
}
@keyframes bar-17 {
0%, 23% {
transform: scaleY(0);
}
50% {
transform: scaleY(1);
}
77% {
opacity: 1;
}
88% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(17) {
animation: bar-17 5s ease-out infinite forwards;
}
@keyframes bar-18 {
0%, 21% {
transform: scaleY(0);
}
68% {
transform: scaleY(1);
}
81% {
opacity: 1;
}
91% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(18) {
animation: bar-18 5s ease-out infinite forwards;
}
@keyframes bar-19 {
0%, 8% {
transform: scaleY(0);
}
68% {
transform: scaleY(1);
}
81% {
opacity: 1;
}
93% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(19) {
animation: bar-19 5s ease-out infinite forwards;
}
@keyframes bar-20 {
0%, 2% {
transform: scaleY(0);
}
67% {
transform: scaleY(1);
}
79% {
opacity: 1;
}
89% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(20) {
animation: bar-20 5s ease-out infinite forwards;
}
@keyframes bar-21 {
0%, 16% {
transform: scaleY(0);
}
53% {
transform: scaleY(1);
}
73% {
opacity: 1;
}
89% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(21) {
animation: bar-21 5s ease-out infinite forwards;
}
@keyframes bar-22 {
0%, 25% {
transform: scaleY(0);
}
56% {
transform: scaleY(1);
}
78% {
opacity: 1;
}
88% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(22) {
animation: bar-22 5s ease-out infinite forwards;
}
@keyframes bar-23 {
0%, 7% {
transform: scaleY(0);
}
61% {
transform: scaleY(1);
}
73% {
opacity: 1;
}
92% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(23) {
animation: bar-23 5s ease-out infinite forwards;
}
@keyframes bar-24 {
0%, 1% {
transform: scaleY(0);
}
59% {
transform: scaleY(1);
}
81% {
opacity: 1;
}
90% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(24) {
animation: bar-24 5s ease-out infinite forwards;
}
@keyframes bar-25 {
0%, 19% {
transform: scaleY(0);
}
52% {
transform: scaleY(1);
}
80% {
opacity: 1;
}
93% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(25) {
animation: bar-25 5s ease-out infinite forwards;
}
@keyframes bar-26 {
0%, 5% {
transform: scaleY(0);
}
62% {
transform: scaleY(1);
}
78% {
opacity: 1;
}
90% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(26) {
animation: bar-26 5s ease-out infinite forwards;
}
@keyframes bar-27 {
0%, 13% {
transform: scaleY(0);
}
68% {
transform: scaleY(1);
}
79% {
opacity: 1;
}
88% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(27) {
animation: bar-27 5s ease-out infinite forwards;
}
@keyframes bar-28 {
0%, 11% {
transform: scaleY(0);
}
62% {
transform: scaleY(1);
}
77% {
opacity: 1;
}
91% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(28) {
animation: bar-28 5s ease-out infinite forwards;
}
@keyframes bar-29 {
0%, 3% {
transform: scaleY(0);
}
55% {
transform: scaleY(1);
}
73% {
opacity: 1;
}
88% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(29) {
animation: bar-29 5s ease-out infinite forwards;
}
@keyframes bar-30 {
0%, 13% {
transform: scaleY(0);
}
49% {
transform: scaleY(1);
}
79% {
opacity: 1;
}
90% {
opacity: 0;
}
99.5% {
transform: scaleY(1);
opacity: 0;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
.barcode > div:nth-child(30) {
animation: bar-30 5s ease-out infinite forwards;
}
`)
class ScanLoadingScreen extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.adoptedStyleSheets = [stylesheet]
const container = document.createElement('div');
container.classList.add('container');
const barcode = document.createElement('div');
barcode.classList.add('barcode');
for(let i = 0; i < 30; i++) {
const div = document.createElement('div');
barcode.appendChild(div);
}
container.appendChild(barcode);
shadowRoot.appendChild(container);
}
}
customElements.define('scan-loading-screen', ScanLoadingScreen);
Reference in New Issue View Git Blame Copy Permalink