Initial commit 2

This commit is contained in:
Merrick Rumel 2020-08-19 14:28:41 -04:00
parent 8c6a83f3be
commit 7c1ac022cb
28 changed files with 8640 additions and 0 deletions

127
css/index.css Normal file
View file

@ -0,0 +1,127 @@
html body #mainContent {
height: 100vh;
}
#uploadSquare {
background: gray;
width: 600px;
height: 300px;
padding: 1em;
border-radius: .5em;
color: white;
}
.successGlow {
-webkit-animation: successGlow 2s;
animation: successGlow 2s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@-webkit-keyframes successGlow {
30% {
-webkit-box-shadow: 0px 0px 100px 50px lime;
box-shadow: 0px 0px 100px 50px lime;
}
70% {
-webkit-box-shadow: 0px 0px 100px 50px lime;
box-shadow: 0px 0px 100px 50px lime;
}
}
@keyframes successGlow {
30% {
-webkit-box-shadow: 0px 0px 100px 50px lime;
box-shadow: 0px 0px 100px 50px lime;
}
70% {
-webkit-box-shadow: 0px 0px 100px 50px lime;
box-shadow: 0px 0px 100px 50px lime;
}
}
.failureGlow {
-webkit-animation: failureGlow 1s;
animation: failureGlow 1s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@-webkit-keyframes failureGlow {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
25% {
-webkit-transform: translate(5px, 0px);
transform: translate(5px, 0px);
}
30% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-box-shadow: 0px 0px 100px 50px red;
box-shadow: 0px 0px 100px 50px red;
}
40% {
-webkit-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
60% {
-webkit-transform: translate(5px, 0px);
transform: translate(5px, 0px);
}
70% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-box-shadow: 0px 0px 100px 50px red;
box-shadow: 0px 0px 100px 50px red;
}
75% {
-webkit-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes failureGlow {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
25% {
-webkit-transform: translate(5px, 0px);
transform: translate(5px, 0px);
}
30% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-box-shadow: 0px 0px 100px 50px red;
box-shadow: 0px 0px 100px 50px red;
}
40% {
-webkit-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
60% {
-webkit-transform: translate(5px, 0px);
transform: translate(5px, 0px);
}
70% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
-webkit-box-shadow: 0px 0px 100px 50px red;
box-shadow: 0px 0px 100px 50px red;
}
75% {
-webkit-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
/*# sourceMappingURL=index.css.map */

9
css/index.css.map Normal file
View file

@ -0,0 +1,9 @@
{
"version": 3,
"mappings": "AAAA,AAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;EACnB,MAAM,EAAE,KAAK;CAAG;;AAGpB,AAAA,aAAa,CAAC;EACV,UAAU,EAAE,IAAI;EAEhB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EAEb,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,IAAI;EAEnB,KAAK,EAAE,KAAK;CAAG;;AAGnB,AAAA,YAAY,CAAC;EACT,SAAS,EAAE,cAAc;EACzB,yBAAyB,EAAE,CAAC;CAAG;;AAEnC,UAAU,CAAV,WAAU;EACN,GAAG;IACC,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAc;;EAEjD,GAAG;IACC,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAc;;;;AAGrD,AAAA,YAAY,CAAC;EACT,SAAS,EAAE,cAAc;EACzB,yBAAyB,EAAE,CAAC;CAAG;;AAEnC,UAAU,CAAV,WAAU;EACN,EAAE;IACE,SAAS,EAAE,mBAAmB;;EAElC,GAAG;IACC,SAAS,EAAE,mBAAmB;;EAElC,GAAG;IACC,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE,sBAAsB;;EAEtC,GAAG;IACC,SAAS,EAAE,oBAAoB;;EAEnC,GAAG;IACC,SAAS,EAAE,mBAAmB;;EAElC,GAAG;IACC,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE,sBAAsB;;EAEtC,GAAG;IACC,SAAS,EAAE,oBAAoB;;EAEnC,IAAI;IACA,SAAS,EAAE,mBAAmB",
"sources": [
"index.sass"
],
"names": [],
"file": "index.css"
}

58
css/index.sass Normal file
View file

@ -0,0 +1,58 @@
html body #mainContent
height: 100vh
#uploadSquare
background: gray
width: 600px
height: 300px
padding: 1em
border-radius: .5em
color: white
.successGlow
animation: successGlow 2s
animation-iteration-count: 1
@keyframes successGlow
30%
box-shadow: 0px 0px 100px 50px rgb(0, 255, 0)
70%
box-shadow: 0px 0px 100px 50px rgb(0, 255, 0)
.failureGlow
animation: failureGlow 1s
animation-iteration-count: 1
@keyframes failureGlow
0%
transform: translate(0px, 0px)
25%
transform: translate(5px, 0px)
30%
transform: translate(0px, 0px)
box-shadow: 0px 0px 100px 50px red
40%
transform: translate(-5px, 0px)
60%
transform: translate(5px, 0px)
70%
transform: translate(0px, 0px)
box-shadow: 0px 0px 100px 50px red
75%
transform: translate(-5px, 0px)
100%
transform: translate(0px, 0px)