diff --git a/public/scan-loading-screen/scan-loading-screen.css b/public/scan-loading-screen/scan-loading-screen.css deleted file mode 100644 index a501d5b..0000000 --- a/public/scan-loading-screen/scan-loading-screen.css +++ /dev/null @@ -1,1011 +0,0 @@ -: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; -} \ No newline at end of file diff --git a/public/scan-loading-screen/scan-loading-screen.js b/public/scan-loading-screen/scan-loading-screen.js index 5bf9dbc..4b38219 100644 --- a/public/scan-loading-screen/scan-loading-screen.js +++ b/public/scan-loading-screen/scan-loading-screen.js @@ -1,10 +1,1024 @@ +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'}); - const link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = '/scan-loading-screen/scan-loading-screen.css'; + shadowRoot.adoptedStyleSheets = [stylesheet] const container = document.createElement('div'); container.classList.add('container'); const barcode = document.createElement('div'); @@ -14,7 +1028,6 @@ class ScanLoadingScreen extends HTMLElement { barcode.appendChild(div); } container.appendChild(barcode); - shadowRoot.appendChild(link); shadowRoot.appendChild(container); } } diff --git a/src/index.html b/src/index.html index 3f078c4..0ce60b1 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,6 @@ -