-
-
Save marcio199226/f90123e6f3023e7124b9d19040eb53c4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html><html lang="en"><head> | |
<meta charset="utf-8"> | |
<title>Frontend</title> | |
<base href="/"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="icon" type="image/x-icon" href="favicon.ico"> | |
<link rel="preconnect" href="https://fonts.gstatic.com"> | |
<style type="text/css"> | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 300; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 300; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 300; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+1F00-1FFF; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 300; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0370-03FF; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 300; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 300; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 300; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2'); | |
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2'); | |
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2'); | |
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2'); | |
unicode-range: U+1F00-1FFF; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2'); | |
unicode-range: U+0370-03FF; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2'); | |
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2'); | |
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2'); | |
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 500; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 500; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 500; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+1F00-1FFF; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 500; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0370-03FF; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 500; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 500; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2'); | |
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; | |
} | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 500; | |
font-display: swap; | |
src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2'); | |
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; | |
} | |
</style> | |
<style type="text/css"> | |
@font-face { | |
font-family: 'Material Icons'; | |
font-style: normal; | |
font-weight: 400; | |
src: url(https://fonts.gstatic.com/s/materialicons/v92/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2'); | |
} | |
.material-icons { | |
font-family: 'Material Icons'; | |
font-weight: normal; | |
font-style: normal; | |
font-size: 24px; | |
line-height: 1; | |
letter-spacing: normal; | |
text-transform: none; | |
display: inline-block; | |
white-space: nowrap; | |
word-wrap: normal; | |
direction: ltr; | |
-webkit-font-feature-settings: 'liga'; | |
-webkit-font-smoothing: antialiased; | |
} | |
</style> | |
<style> | |
.mat-typography { | |
font: 400 14px/20px Roboto, Helvetica Neue, sans-serif; | |
letter-spacing: normal; | |
} | |
</style> | |
<style type="text/css"> | |
splash-screen { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 99999; | |
pointer-events: none; | |
} | |
splash-screen .spinner-wrapper { | |
display: block; | |
position: relative; | |
width: 150px; | |
min-height: 100px; | |
height: 100px; | |
background: white; | |
opacity: 0.5; | |
border-radius: 12px; | |
} | |
splash-screen .spinner-wrapper .spinner { | |
position: absolute; | |
overflow: hidden; | |
left: 50%; | |
margin-left: -50px; | |
animation: outer-rotate 2.91667s linear infinite; | |
} | |
splash-screen .spinner-wrapper .spinner .inner { | |
width: 100px; | |
height: 100px; | |
position: relative; | |
animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite; | |
} | |
splash-screen .spinner-wrapper .spinner .inner .gap { | |
position: absolute; | |
left: 49px; | |
right: 49px; | |
top: 0; | |
bottom: 0; | |
border-top: 10px solid; | |
box-sizing: border-box; | |
} | |
splash-screen .spinner-wrapper .spinner .inner .left, | |
splash-screen .spinner-wrapper .spinner .inner .right { | |
position: absolute; | |
top: 0; | |
height: 100px; | |
width: 50px; | |
overflow: hidden; | |
} | |
splash-screen .spinner-wrapper .spinner .inner .left .half-circle, | |
splash-screen .spinner-wrapper .spinner .inner .right .half-circle { | |
position: absolute; | |
top: 0; | |
width: 100px; | |
height: 100px; | |
box-sizing: border-box; | |
border: 10px solid #4285F4; | |
border-bottom-color: transparent; | |
border-radius: 50%; | |
} | |
splash-screen .spinner-wrapper .spinner .inner .left { | |
left: 0; | |
} | |
splash-screen .spinner-wrapper .spinner .inner .left .half-circle { | |
left: 0; | |
border-right-color: transparent; | |
animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite; | |
-webkit-animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite; | |
} | |
splash-screen .spinner-wrapper .spinner .inner .right { | |
right: 0; | |
} | |
splash-screen .spinner-wrapper .spinner .inner .right .half-circle { | |
right: 0; | |
border-left-color: transparent; | |
animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite; | |
-webkit-animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite; | |
} | |
@keyframes outer-rotate { | |
0% { | |
transform: rotate(0deg) scale(0.5); | |
} | |
100% { | |
transform: rotate(360deg) scale(0.5); | |
} | |
} | |
@keyframes left-wobble { | |
0%, | |
100% { | |
transform: rotate(130deg); | |
} | |
50% { | |
transform: rotate(-5deg); | |
} | |
} | |
@keyframes right-wobble { | |
0%, | |
100% { | |
transform: rotate(-130deg); | |
} | |
50% { | |
transform: rotate(5deg); | |
} | |
} | |
@keyframes sporadic-rotate { | |
12.5% { | |
transform: rotate(135deg); | |
} | |
25% { | |
transform: rotate(270deg); | |
} | |
37.5% { | |
transform: rotate(405deg); | |
} | |
50% { | |
transform: rotate(540deg); | |
} | |
62.5% { | |
transform: rotate(675deg); | |
} | |
75% { | |
transform: rotate(810deg); | |
} | |
87.5% { | |
transform: rotate(945deg); | |
} | |
100% { | |
transform: rotate(1080deg); | |
} | |
} | |
</style> | |
<style>.mat-typography{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;}body,html{height:100%;}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif;background:url(bg.png);background-repeat:no-repeat;background-size:cover;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='print'"><noscript><link rel="stylesheet" href="styles.css" media="print"></noscript> | |
<noscript> | |
<link rel="stylesheet" href="styles.css"> | |
</noscript> | |
<style>.mat-typography{font:400 14px/20px Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;}body,html{height:100%;}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif;background:url(bg.png);background-repeat:no-repeat;background-size:cover;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head> | |
<body class="mat-typography"> | |
<app-root> | |
<splash-screen> | |
<div class="spinner-wrapper"> | |
<div class="spinner"> | |
<div class="inner"> | |
<div class="gap"></div> | |
<div class="left"> | |
<div class="half-circle"></div> | |
</div> | |
<div class="right"> | |
<div class="half-circle"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</splash-screen> | |
</app-root> | |
<script src="polyfills.js" defer></script><script src="main.js" defer></script> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment