+ 
FRC Kickoff Bingo!
2017 Edition
@@ -26,7 +31,7 @@2017 Edition
diff --git a/2017/style.css b/2017/style.css deleted file mode 100644 index 94dd868..0000000 --- a/2017/style.css +++ /dev/null @@ -1,731 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Crimson+Text'); - - -@font-face { - font-family: Skorzhen; - src: url(../assets/fonts/FTY-SKORZHEN-NCV.ttf); - font-weight: bold; -} - -body, button { - font-family: 'Crimson Text', serif; - color: #38322F; -} - -/* Header Elements*/ - -#header { - text-align: center; - display: flex; - justify-content: center; - align-items: center; -} - -#steamworks { - width: 17vmax; - max-width: 300px; - min-width: 150px; - float: left; -} - -#title { - font-family: Skorzhen; - margin: 2vw; - font-size: 1.75em; -} - -#controls { - margin-left: 15px; - float: right; - display: flex; - flex-direction: column; - justify-content: space-around; -} - -/* Buttons */ -.button { - position: relative; - border: none; - display: inline; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - overflow: hidden; - cursor: pointer; - background-color: #A77C3C !important; - transition: .1s; -} -.button:hover { - background-color: #BA8A43 !important; -} -.button:active { - background-color: #C19656 !important; -} -.button:focus { - outline: 0; -} -.button div { - font-weight: bold; - font-size: 20px; - padding: 10px 15px 12px 15px; - color: #fff; -} -button.button { - padding: 10px 15px 12px 15px !important; -} - - -/* Footer */ -#footer { - width: 100%; - text-align: center; - margin-top: 10px; - display: flex; - justify-content: center; - align-items: center; -} -#footer .button { - font-weight: bold; - font-size: 20px; - padding: 10px 15px 12px 15px; - margin: 5px; -} -#footer a { - font-weight: normal; - color: #fff; - text-decoration: none; -} - -#bingo { - width: 8vw; - min-width: 130px; - padding: .5vw; -} -#bingo div { - padding: 5px 0px !important; - font-size: 35px !important; -} - -i.shine { -/* positioning */ - position: absolute; - opacity: 0; - top: 0; - left: 0; - -/* gradients */ - background: -moz-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%);/* FF3.6+ */ - background: -webkit-gradient(linear,left top, right top,color-stop(0%,rgba(255,255,255,0)),color-stop(1%,rgba(255,255,255,0.045)),color-stop(15%,rgba(255,255,255,0.25)),color-stop(30%,rgba(255,255,255,0.6)),color-stop(50%,rgba(255,255,255,0.85)),color-stop(70%,rgba(255,255,255,0.85)),color-stop(71%,rgba(255,255,255,0.8)),color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* IE10+ */ - background: linear-gradient(to right,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */ - -/* forming the shine element play around with the width, skew and gradient to get different effects */ - height: 100%; - transform: skew(-10deg,0deg); - -webkit-transform: skew(-15deg,0deg); - -moz-transform: skew(-10deg,0deg); - -ms-transform: skew(-10deg,0deg); - -o-transform: skew(-10deg,0deg); - -/* animating it */ - animation: move 2s; - animation-iteration-count: infinite; - animation-delay: 1s; - -webkit-animation: move 2s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-delay: 1s; - -moz-animation: move 2s; - -moz-animation-iteration-count: infinite; - -moz-animation-delay: 1s; - -ms-animation: move 2s; - -ms-animation-iteration-count: infinite; - -ms-animation-delay: 1s; - -o-animation: move 2s; - -o-animation-iteration-count: infinite; - -o-animation-delay: 1s; -} -#shine1 { - width: 15%; -} -#shine2 { - margin-left: -12px; - width: 20%; -} -@keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} -@-webkit-keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} -@-moz-keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} -@-ms-keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} -@-o-keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} - -/* Board */ -#board { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - font-size: 1.5em; - text-align: center; -} - -.row { - display: flex; - flex-direction: row; -} -#boardHeader > .tile { - font-family: Skorzhen; - font-size: 3em; - border: none !important; - margin-bottom: -10px; - color: #62392D; - padding: .5vw; - width: 8vw; - height: auto !important; - min-width: 130px; - min-height: 0px !important; -} -#boardHeader > .tile:hover { - background-color: #fff; -} - -/* Tiles */ -input[type=checkbox] { - display: none; -} - -.tile { - border: 2px solid #62392D; - margin: .2vw; - transition: .1s; -} - -label { - display: block; - width: 8vw; - height: 8vw; - min-width: 130px; - min-height: 130px; - padding: .5vw; - cursor: pointer; - display: -webkit-flexbox; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-flex-align: center; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - justify-content: center; -} - -#freeSpace > label { - cursor: default; -} - -input[type=checkbox]:checked + div { - background-color: #62392D; - color: #fff; -} - -div.tile:hover { - background-color: #BA8A43; - color: #fff; -} - -.unselect { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Chrome/Safari/Opera */ - -khtml-user-select: none; /* Konqueror */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - not supported by any browser */ -} - - -#social-share { - display: none; - margin-top: 7px; - margin-bottom: -12px; -} - -.swal2-content #social-share { - display: block; -} - - -/* Confetti. I can't believe this is for real. Based on COMPILED version of http://codepen.io/mikehobizal/pen/unvxa */ -@-webkit-keyframes bang { - from { - -webkit-transform: translate3d(0, 0, 0); - opacity: 1; - } -} -@-moz-keyframes bang { - from { - -moz-transform: translate3d(0, 0, 0); - opacity: 1; - } -} -@keyframes bang { - from { - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} -#confetti { - position: relative; -} - -#confetti i { - position: absolute; - display: block; - left: 50%; - top: 0; - width: 3px; - height: 5px; - background: red; - opacity: 0; - -webkit-animation: bang 700ms ease-out forwards; - -moz-animation: bang 700ms ease-out forwards; - animation: bang 700ms ease-out forwards; -} - -/* looks better in SCSS */ -#confetti i:nth-of-type(1) { - -webkit-transform: translate3d(-58px, -53px, 0) rotate(136deg); - -moz-transform: translate3d(-58px, -53px, 0) rotate(136deg); - -ms-transform: translate3d(-58px, -53px, 0) rotate(136deg); - -o-transform: translate3d(-58px, -53px, 0) rotate(136deg); - transform: translate3d(-58px, -53px, 0) rotate(136deg); - background: #ff0095; -} -#confetti i:nth-of-type(2) { - -webkit-transform: translate3d(20px, -96px, 0) rotate(311deg); - -moz-transform: translate3d(20px, -96px, 0) rotate(311deg); - -ms-transform: translate3d(20px, -96px, 0) rotate(311deg); - -o-transform: translate3d(20px, -96px, 0) rotate(311deg); - transform: translate3d(20px, -96px, 0) rotate(311deg); - background: #008cff; -} -#confetti i:nth-of-type(3) { - -webkit-transform: translate3d(-89px, -99px, 0) rotate(121deg); - -moz-transform: translate3d(-89px, -99px, 0) rotate(121deg); - -ms-transform: translate3d(-89px, -99px, 0) rotate(121deg); - -o-transform: translate3d(-89px, -99px, 0) rotate(121deg); - transform: translate3d(-89px, -99px, 0) rotate(121deg); - background: #ff0d00; -} -#confetti i:nth-of-type(4) { - -webkit-transform: translate3d(-15px, -67px, 0) rotate(120deg); - -moz-transform: translate3d(-15px, -67px, 0) rotate(120deg); - -ms-transform: translate3d(-15px, -67px, 0) rotate(120deg); - -o-transform: translate3d(-15px, -67px, 0) rotate(120deg); - transform: translate3d(-15px, -67px, 0) rotate(120deg); - background: #ff9900; -} -#confetti i:nth-of-type(5) { - -webkit-transform: translate3d(39px, -93px, 0) rotate(330deg); - -moz-transform: translate3d(39px, -93px, 0) rotate(330deg); - -ms-transform: translate3d(39px, -93px, 0) rotate(330deg); - -o-transform: translate3d(39px, -93px, 0) rotate(330deg); - transform: translate3d(39px, -93px, 0) rotate(330deg); - background: #04ff00; -} -#confetti i:nth-of-type(6) { - -webkit-transform: translate3d(-29px, -92px, 0) rotate(326deg); - -moz-transform: translate3d(-29px, -92px, 0) rotate(326deg); - -ms-transform: translate3d(-29px, -92px, 0) rotate(326deg); - -o-transform: translate3d(-29px, -92px, 0) rotate(326deg); - transform: translate3d(-29px, -92px, 0) rotate(326deg); - background: #ff3700; -} -#confetti i:nth-of-type(7) { - -webkit-transform: translate3d(-5px, -65px, 0) rotate(222deg); - -moz-transform: translate3d(-5px, -65px, 0) rotate(222deg); - -ms-transform: translate3d(-5px, -65px, 0) rotate(222deg); - -o-transform: translate3d(-5px, -65px, 0) rotate(222deg); - transform: translate3d(-5px, -65px, 0) rotate(222deg); - background: #a200ff; -} -#confetti i:nth-of-type(8) { - -webkit-transform: translate3d(-52px, -54px, 0) rotate(119deg); - -moz-transform: translate3d(-52px, -54px, 0) rotate(119deg); - -ms-transform: translate3d(-52px, -54px, 0) rotate(119deg); - -o-transform: translate3d(-52px, -54px, 0) rotate(119deg); - transform: translate3d(-52px, -54px, 0) rotate(119deg); - background: #ffc800; -} -#confetti i:nth-of-type(9) { - -webkit-transform: translate3d(-35px, -93px, 0) rotate(69deg); - -moz-transform: translate3d(-35px, -93px, 0) rotate(69deg); - -ms-transform: translate3d(-35px, -93px, 0) rotate(69deg); - -o-transform: translate3d(-35px, -93px, 0) rotate(69deg); - transform: translate3d(-35px, -93px, 0) rotate(69deg); - background: #e6ff00; -} -#confetti i:nth-of-type(10) { - -webkit-transform: translate3d(14px, -70px, 0) rotate(281deg); - -moz-transform: translate3d(14px, -70px, 0) rotate(281deg); - -ms-transform: translate3d(14px, -70px, 0) rotate(281deg); - -o-transform: translate3d(14px, -70px, 0) rotate(281deg); - transform: translate3d(14px, -70px, 0) rotate(281deg); - background: #ff8000; -} -#confetti i:nth-of-type(11) { - -webkit-transform: translate3d(86px, -79px, 0) rotate(328deg); - -moz-transform: translate3d(86px, -79px, 0) rotate(328deg); - -ms-transform: translate3d(86px, -79px, 0) rotate(328deg); - -o-transform: translate3d(86px, -79px, 0) rotate(328deg); - transform: translate3d(86px, -79px, 0) rotate(328deg); - background: #6a00ff; -} -#confetti i:nth-of-type(12) { - -webkit-transform: translate3d(-46px, -58px, 0) rotate(177deg); - -moz-transform: translate3d(-46px, -58px, 0) rotate(177deg); - -ms-transform: translate3d(-46px, -58px, 0) rotate(177deg); - -o-transform: translate3d(-46px, -58px, 0) rotate(177deg); - transform: translate3d(-46px, -58px, 0) rotate(177deg); - background: #00ff55; -} -#confetti i:nth-of-type(13) { - -webkit-transform: translate3d(-1px, -86px, 0) rotate(85deg); - -moz-transform: translate3d(-1px, -86px, 0) rotate(85deg); - -ms-transform: translate3d(-1px, -86px, 0) rotate(85deg); - -o-transform: translate3d(-1px, -86px, 0) rotate(85deg); - transform: translate3d(-1px, -86px, 0) rotate(85deg); - background: #ff00e1; -} -#confetti i:nth-of-type(14) { - -webkit-transform: translate3d(87px, -68px, 0) rotate(283deg); - -moz-transform: translate3d(87px, -68px, 0) rotate(283deg); - -ms-transform: translate3d(87px, -68px, 0) rotate(283deg); - -o-transform: translate3d(87px, -68px, 0) rotate(283deg); - transform: translate3d(87px, -68px, 0) rotate(283deg); - background: #ff00f7; -} -#confetti i:nth-of-type(15) { - -webkit-transform: translate3d(-91px, -74px, 0) rotate(132deg); - -moz-transform: translate3d(-91px, -74px, 0) rotate(132deg); - -ms-transform: translate3d(-91px, -74px, 0) rotate(132deg); - -o-transform: translate3d(-91px, -74px, 0) rotate(132deg); - transform: translate3d(-91px, -74px, 0) rotate(132deg); - background: #3700ff; -} -#confetti i:nth-of-type(16) { - -webkit-transform: translate3d(-85px, -57px, 0) rotate(63deg); - -moz-transform: translate3d(-85px, -57px, 0) rotate(63deg); - -ms-transform: translate3d(-85px, -57px, 0) rotate(63deg); - -o-transform: translate3d(-85px, -57px, 0) rotate(63deg); - transform: translate3d(-85px, -57px, 0) rotate(63deg); - background: #8800ff; -} -#confetti i:nth-of-type(17) { - -webkit-transform: translate3d(65px, -74px, 0) rotate(289deg); - -moz-transform: translate3d(65px, -74px, 0) rotate(289deg); - -ms-transform: translate3d(65px, -74px, 0) rotate(289deg); - -o-transform: translate3d(65px, -74px, 0) rotate(289deg); - transform: translate3d(65px, -74px, 0) rotate(289deg); - background: #3300ff; -} -#confetti i:nth-of-type(18) { - -webkit-transform: translate3d(-24px, -89px, 0) rotate(324deg); - -moz-transform: translate3d(-24px, -89px, 0) rotate(324deg); - -ms-transform: translate3d(-24px, -89px, 0) rotate(324deg); - -o-transform: translate3d(-24px, -89px, 0) rotate(324deg); - transform: translate3d(-24px, -89px, 0) rotate(324deg); - background: #00ffc8; -} -#confetti i:nth-of-type(19) { - -webkit-transform: translate3d(47px, -93px, 0) rotate(103deg); - -moz-transform: translate3d(47px, -93px, 0) rotate(103deg); - -ms-transform: translate3d(47px, -93px, 0) rotate(103deg); - -o-transform: translate3d(47px, -93px, 0) rotate(103deg); - transform: translate3d(47px, -93px, 0) rotate(103deg); - background: #0095ff; -} -#confetti i:nth-of-type(20) { - -webkit-transform: translate3d(-36px, -72px, 0) rotate(360deg); - -moz-transform: translate3d(-36px, -72px, 0) rotate(360deg); - -ms-transform: translate3d(-36px, -72px, 0) rotate(360deg); - -o-transform: translate3d(-36px, -72px, 0) rotate(360deg); - transform: translate3d(-36px, -72px, 0) rotate(360deg); - background: #51ff00; -} -#confetti i:nth-of-type(21) { - -webkit-transform: translate3d(-79px, -88px, 0) rotate(215deg); - -moz-transform: translate3d(-79px, -88px, 0) rotate(215deg); - -ms-transform: translate3d(-79px, -88px, 0) rotate(215deg); - -o-transform: translate3d(-79px, -88px, 0) rotate(215deg); - transform: translate3d(-79px, -88px, 0) rotate(215deg); - background: #ffc800; -} -#confetti i:nth-of-type(22) { - -webkit-transform: translate3d(76px, -65px, 0) rotate(38deg); - -moz-transform: translate3d(76px, -65px, 0) rotate(38deg); - -ms-transform: translate3d(76px, -65px, 0) rotate(38deg); - -o-transform: translate3d(76px, -65px, 0) rotate(38deg); - transform: translate3d(76px, -65px, 0) rotate(38deg); - background: #ff0022; -} -#confetti i:nth-of-type(23) { - -webkit-transform: translate3d(24px, -99px, 0) rotate(26deg); - -moz-transform: translate3d(24px, -99px, 0) rotate(26deg); - -ms-transform: translate3d(24px, -99px, 0) rotate(26deg); - -o-transform: translate3d(24px, -99px, 0) rotate(26deg); - transform: translate3d(24px, -99px, 0) rotate(26deg); - background: #33ff00; -} -#confetti i:nth-of-type(24) { - -webkit-transform: translate3d(50px, -54px, 0) rotate(119deg); - -moz-transform: translate3d(50px, -54px, 0) rotate(119deg); - -ms-transform: translate3d(50px, -54px, 0) rotate(119deg); - -o-transform: translate3d(50px, -54px, 0) rotate(119deg); - transform: translate3d(50px, -54px, 0) rotate(119deg); - background: #00ff91; -} -#confetti i:nth-of-type(25) { - -webkit-transform: translate3d(-15px, -77px, 0) rotate(25deg); - -moz-transform: translate3d(-15px, -77px, 0) rotate(25deg); - -ms-transform: translate3d(-15px, -77px, 0) rotate(25deg); - -o-transform: translate3d(-15px, -77px, 0) rotate(25deg); - transform: translate3d(-15px, -77px, 0) rotate(25deg); - background: #ff006f; -} -#confetti i:nth-of-type(26) { - -webkit-transform: translate3d(58px, -82px, 0) rotate(353deg); - -moz-transform: translate3d(58px, -82px, 0) rotate(353deg); - -ms-transform: translate3d(58px, -82px, 0) rotate(353deg); - -o-transform: translate3d(58px, -82px, 0) rotate(353deg); - transform: translate3d(58px, -82px, 0) rotate(353deg); - background: #00ffb3; -} -#confetti i:nth-of-type(27) { - -webkit-transform: translate3d(-69px, -76px, 0) rotate(274deg); - -moz-transform: translate3d(-69px, -76px, 0) rotate(274deg); - -ms-transform: translate3d(-69px, -76px, 0) rotate(274deg); - -o-transform: translate3d(-69px, -76px, 0) rotate(274deg); - transform: translate3d(-69px, -76px, 0) rotate(274deg); - background: #1e00ff; -} -#confetti i:nth-of-type(28) { - -webkit-transform: translate3d(-47px, -67px, 0) rotate(82deg); - -moz-transform: translate3d(-47px, -67px, 0) rotate(82deg); - -ms-transform: translate3d(-47px, -67px, 0) rotate(82deg); - -o-transform: translate3d(-47px, -67px, 0) rotate(82deg); - transform: translate3d(-47px, -67px, 0) rotate(82deg); - background: #00ffaa; -} -#confetti i:nth-of-type(29) { - -webkit-transform: translate3d(-24px, -89px, 0) rotate(48deg); - -moz-transform: translate3d(-24px, -89px, 0) rotate(48deg); - -ms-transform: translate3d(-24px, -89px, 0) rotate(48deg); - -o-transform: translate3d(-24px, -89px, 0) rotate(48deg); - transform: translate3d(-24px, -89px, 0) rotate(48deg); - background: #00ff4d; -} -#confetti i:nth-of-type(30) { - -webkit-transform: translate3d(5px, -51px, 0) rotate(143deg); - -moz-transform: translate3d(5px, -51px, 0) rotate(143deg); - -ms-transform: translate3d(5px, -51px, 0) rotate(143deg); - -o-transform: translate3d(5px, -51px, 0) rotate(143deg); - transform: translate3d(5px, -51px, 0) rotate(143deg); - background: #ff0044; -} -#confetti i:nth-of-type(31) { - -webkit-transform: translate3d(-26px, -61px, 0) rotate(109deg); - -moz-transform: translate3d(-26px, -61px, 0) rotate(109deg); - -ms-transform: translate3d(-26px, -61px, 0) rotate(109deg); - -o-transform: translate3d(-26px, -61px, 0) rotate(109deg); - transform: translate3d(-26px, -61px, 0) rotate(109deg); - background: #ffe100; -} -#confetti i:nth-of-type(32) { - -webkit-transform: translate3d(79px, -51px, 0) rotate(358deg); - -moz-transform: translate3d(79px, -51px, 0) rotate(358deg); - -ms-transform: translate3d(79px, -51px, 0) rotate(358deg); - -o-transform: translate3d(79px, -51px, 0) rotate(358deg); - transform: translate3d(79px, -51px, 0) rotate(358deg); - background: #ff00f2; -} -#confetti i:nth-of-type(33) { - -webkit-transform: translate3d(-35px, -73px, 0) rotate(117deg); - -moz-transform: translate3d(-35px, -73px, 0) rotate(117deg); - -ms-transform: translate3d(-35px, -73px, 0) rotate(117deg); - -o-transform: translate3d(-35px, -73px, 0) rotate(117deg); - transform: translate3d(-35px, -73px, 0) rotate(117deg); - background: #aaff00; -} -#confetti i:nth-of-type(34) { - -webkit-transform: translate3d(-28px, -87px, 0) rotate(354deg); - -moz-transform: translate3d(-28px, -87px, 0) rotate(354deg); - -ms-transform: translate3d(-28px, -87px, 0) rotate(354deg); - -o-transform: translate3d(-28px, -87px, 0) rotate(354deg); - transform: translate3d(-28px, -87px, 0) rotate(354deg); - background: yellow; -} -#confetti i:nth-of-type(35) { - -webkit-transform: translate3d(-86px, -92px, 0) rotate(329deg); - -moz-transform: translate3d(-86px, -92px, 0) rotate(329deg); - -ms-transform: translate3d(-86px, -92px, 0) rotate(329deg); - -o-transform: translate3d(-86px, -92px, 0) rotate(329deg); - transform: translate3d(-86px, -92px, 0) rotate(329deg); - background: #f2ff00; -} -#confetti i:nth-of-type(36) { - -webkit-transform: translate3d(26px, -66px, 0) rotate(240deg); - -moz-transform: translate3d(26px, -66px, 0) rotate(240deg); - -ms-transform: translate3d(26px, -66px, 0) rotate(240deg); - -o-transform: translate3d(26px, -66px, 0) rotate(240deg); - transform: translate3d(26px, -66px, 0) rotate(240deg); - background: #007bff; -} -#confetti i:nth-of-type(37) { - -webkit-transform: translate3d(54px, -90px, 0) rotate(326deg); - -moz-transform: translate3d(54px, -90px, 0) rotate(326deg); - -ms-transform: translate3d(54px, -90px, 0) rotate(326deg); - -o-transform: translate3d(54px, -90px, 0) rotate(326deg); - transform: translate3d(54px, -90px, 0) rotate(326deg); - background: #00ffd9; -} -#confetti i:nth-of-type(38) { - -webkit-transform: translate3d(19px, -84px, 0) rotate(222deg); - -moz-transform: translate3d(19px, -84px, 0) rotate(222deg); - -ms-transform: translate3d(19px, -84px, 0) rotate(222deg); - -o-transform: translate3d(19px, -84px, 0) rotate(222deg); - transform: translate3d(19px, -84px, 0) rotate(222deg); - background: red; -} -#confetti i:nth-of-type(39) { - -webkit-transform: translate3d(20px, -57px, 0) rotate(186deg); - -moz-transform: translate3d(20px, -57px, 0) rotate(186deg); - -ms-transform: translate3d(20px, -57px, 0) rotate(186deg); - -o-transform: translate3d(20px, -57px, 0) rotate(186deg); - transform: translate3d(20px, -57px, 0) rotate(186deg); - background: #ffdd00; -} -#confetti i:nth-of-type(40) { - -webkit-transform: translate3d(73px, -66px, 0) rotate(73deg); - -moz-transform: translate3d(73px, -66px, 0) rotate(73deg); - -ms-transform: translate3d(73px, -66px, 0) rotate(73deg); - -o-transform: translate3d(73px, -66px, 0) rotate(73deg); - transform: translate3d(73px, -66px, 0) rotate(73deg); - background: #2200ff; -} -#confetti i:nth-of-type(41) { - -webkit-transform: translate3d(-66px, -66px, 0) rotate(199deg); - -moz-transform: translate3d(-66px, -66px, 0) rotate(199deg); - -ms-transform: translate3d(-66px, -66px, 0) rotate(199deg); - -o-transform: translate3d(-66px, -66px, 0) rotate(199deg); - transform: translate3d(-66px, -66px, 0) rotate(199deg); - background: #ff00ae; -} -#confetti i:nth-of-type(42) { - -webkit-transform: translate3d(10px, -87px, 0) rotate(238deg); - -moz-transform: translate3d(10px, -87px, 0) rotate(238deg); - -ms-transform: translate3d(10px, -87px, 0) rotate(238deg); - -o-transform: translate3d(10px, -87px, 0) rotate(238deg); - transform: translate3d(10px, -87px, 0) rotate(238deg); - background: #ff1500; -} -#confetti i:nth-of-type(43) { - -webkit-transform: translate3d(-3px, -50px, 0) rotate(131deg); - -moz-transform: translate3d(-3px, -50px, 0) rotate(131deg); - -ms-transform: translate3d(-3px, -50px, 0) rotate(131deg); - -o-transform: translate3d(-3px, -50px, 0) rotate(131deg); - transform: translate3d(-3px, -50px, 0) rotate(131deg); - background: #ff4400; -} -#confetti i:nth-of-type(44) { - -webkit-transform: translate3d(-18px, -58px, 0) rotate(305deg); - -moz-transform: translate3d(-18px, -58px, 0) rotate(305deg); - -ms-transform: translate3d(-18px, -58px, 0) rotate(305deg); - -o-transform: translate3d(-18px, -58px, 0) rotate(305deg); - transform: translate3d(-18px, -58px, 0) rotate(305deg); - background: #0077ff; -} -#confetti i:nth-of-type(45) { - -webkit-transform: translate3d(14px, -67px, 0) rotate(280deg); - -moz-transform: translate3d(14px, -67px, 0) rotate(280deg); - -ms-transform: translate3d(14px, -67px, 0) rotate(280deg); - -o-transform: translate3d(14px, -67px, 0) rotate(280deg); - transform: translate3d(14px, -67px, 0) rotate(280deg); - background: #00d5ff; -} -#confetti i:nth-of-type(46) { - -webkit-transform: translate3d(64px, -86px, 0) rotate(252deg); - -moz-transform: translate3d(64px, -86px, 0) rotate(252deg); - -ms-transform: translate3d(64px, -86px, 0) rotate(252deg); - -o-transform: translate3d(64px, -86px, 0) rotate(252deg); - transform: translate3d(64px, -86px, 0) rotate(252deg); - background: #00ff99; -} -#confetti i:nth-of-type(47) { - -webkit-transform: translate3d(-56px, -67px, 0) rotate(95deg); - -moz-transform: translate3d(-56px, -67px, 0) rotate(95deg); - -ms-transform: translate3d(-56px, -67px, 0) rotate(95deg); - -o-transform: translate3d(-56px, -67px, 0) rotate(95deg); - transform: translate3d(-56px, -67px, 0) rotate(95deg); - background: #ee00ff; -} -#confetti i:nth-of-type(48) { - -webkit-transform: translate3d(-75px, -71px, 0) rotate(306deg); - -moz-transform: translate3d(-75px, -71px, 0) rotate(306deg); - -ms-transform: translate3d(-75px, -71px, 0) rotate(306deg); - -o-transform: translate3d(-75px, -71px, 0) rotate(306deg); - transform: translate3d(-75px, -71px, 0) rotate(306deg); - background: #e100ff; -} -#confetti i:nth-of-type(49) { - -webkit-transform: translate3d(16px, -94px, 0) rotate(154deg); - -moz-transform: translate3d(16px, -94px, 0) rotate(154deg); - -ms-transform: translate3d(16px, -94px, 0) rotate(154deg); - -o-transform: translate3d(16px, -94px, 0) rotate(154deg); - transform: translate3d(16px, -94px, 0) rotate(154deg); - background: #5500ff; -} -#confetti i:nth-of-type(50) { - -webkit-transform: translate3d(-84px, -89px, 0) rotate(211deg); - -moz-transform: translate3d(-84px, -89px, 0) rotate(211deg); - -ms-transform: translate3d(-84px, -89px, 0) rotate(211deg); - -o-transform: translate3d(-84px, -89px, 0) rotate(211deg); - transform: translate3d(-84px, -89px, 0) rotate(211deg); - background: #f200ff; -} diff --git a/assets/img/first-power-up-logo.jpg b/2018/assets/first-power-up-logo.jpg similarity index 100% rename from assets/img/first-power-up-logo.jpg rename to 2018/assets/first-power-up-logo.jpg diff --git a/2018/assets/style.css b/2018/assets/style.css new file mode 100644 index 0000000..90bcb53 --- /dev/null +++ b/2018/assets/style.css @@ -0,0 +1,81 @@ +@import url('https://fonts.googleapis.com/css?family=Dosis:600|Press+Start+2P'); + +body, button { + font-family: 'Dosis', sans-serif; +} + +/* Colors: + #cd222a + #009cd4 + #fcf0b3 + #f3ca31 + #dc6726 +*/ + +/* Header */ +h3 { + color: #dc6726; +} + +#title { + font-family: 'Press Start 2P', decorative; + font-size: 1em; +} + +/* Footer */ +#footer a { + color: #000; +} + +/* Buttons */ +.button { + background-color: #E7C02F !important; + border: solid #000 3px !important; + border-radius: 0 !important; +} +.button:hover { + background-color: #d0ad2b !important; +} +.button:active { + background-color: #b89a3b !important; +} +.button div { + color: #000; +} + +#bingo { + font-family: 'Press Start 2P', decorative; +} +#bingo div { + padding: 11px 7px 10px 12px; + font-size: 15px !important; +} + +/* Board */ +#board { + font-size: 1.45em; +} + +#boardHeader { + margin-bottom: 10px; +} +#boardHeader > .tile { + font-family: 'Press Start 2P', decorative; + font-size: 3em; + border-width: 3px; + color: #cd222a; +} + +/* Tiles */ +.tile { + border: 3px solid #cd222a; +} + +input[type=checkbox]:checked + div { + background-color: #009cd4; + color: #fff; +} + +div.tile:hover { + background-color: #f3ca31; +} \ No newline at end of file diff --git a/2018/sweetalert2.css b/2018/assets/sweetalert2.css similarity index 100% rename from 2018/sweetalert2.css rename to 2018/assets/sweetalert2.css diff --git a/2018/index.html b/2018/index.html index d465503..74e5b5d 100644 --- a/2018/index.html +++ b/2018/index.html @@ -1,18 +1,23 @@ -
- 
+ 
FRC Kickoff Bingo - 2020
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ FRC Kickoff Bingo
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
+
+
+
+
FRC Kickoff Bingo!
2018 Edition
@@ -26,7 +31,7 @@2018 Edition
diff --git a/2018/style.css b/2018/style.css deleted file mode 100644 index 23885f6..0000000 --- a/2018/style.css +++ /dev/null @@ -1,760 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Dosis:600|Press+Start+2P'); - -body, button { - font-family: 'Dosis', sans-serif; - color: #000; -} - -/* Colors: - #cd222a - #009cd4 - #fcf0b3 - #f3ca31 - #dc6726 -*/ - -/* Header Elements */ - -#header { - text-align: center; - display: flex; - justify-content: center; - align-items: center; -} - -h1 { - margin-bottom: 5px; -} - -h3 { - margin-top: 5px; - color: #dc6726; -} - -#game-logo { - width: 17vmax; - max-width: 300px; - min-width: 150px; - float: left; -} - -#title { - font-family: 'Press Start 2P', cursive; - margin: 2vw; - padding-left: 10px; - font-size: 1em; - transform: scale(1,1.25); - -webkit-transform:scale(1,1.25); /* Safari and Chrome */ - -moz-transform:scale(1,1.25); /* Firefox */ - -ms-transform:scale(1,1.25); /* IE 9+ */ - -o-transform:scale(1,1.25); /* Opera */ -} - -#controls { - margin-left: 15px; - float: right; - display: flex; - flex-direction: column; - justify-content: space-around; -} - -/* Buttons */ -.button { - position: relative; - font-weight: 400; - display: inline; - overflow: hidden; - cursor: pointer; - background-color: #E7C02F !important; - border: solid #000 3px !important; - border-radius: 0 !important; - transition: .1s; -} -.button:hover { - background-color: #d0ad2b !important; -} -.button:active { - background-color: #b89a3b !important; -} -.button:focus { - outline: 0; -} -.button div { - font-size: 20px; - padding: 5px 12px 7px 12px; - color: #000; -} -button.button { - padding: 5px 12px 7px 12px !important; -} - -/* Footer */ -#footer { - width: 100%; - text-align: center; - margin-top: 10px; - display: flex; - justify-content: center; - align-items: center; -} -#footer .button { - font-size: 20px; - padding: 10px 15px 12px 15px; - margin: 5px; -} -#footer a { - font-weight: normal; - color: #000; - text-decoration: none; -} - -#bingo { - font-family: 'Press Start 2P', cursive; -} -#bingo div { - padding: 11px 7px 10px 12px; - font-size: 15px !important; - transform: scale(1,1.5); - -webkit-transform:scale(1,1.5); /* Safari and Chrome */ - -moz-transform:scale(1,1.5); /* Firefox */ - -ms-transform:scale(1,1.5); /* IE 9+ */ - -o-transform:scale(1,1.5); /* Opera */ -} - -i.shine { -/* positioning */ - position: absolute; - opacity: 0; - top: 0; - left: 0; - -/* gradients */ - background: -moz-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%);/* FF3.6+ */ - background: -webkit-gradient(linear,left top, right top,color-stop(0%,rgba(255,255,255,0)),color-stop(1%,rgba(255,255,255,0.045)),color-stop(15%,rgba(255,255,255,0.25)),color-stop(30%,rgba(255,255,255,0.6)),color-stop(50%,rgba(255,255,255,0.85)),color-stop(70%,rgba(255,255,255,0.85)),color-stop(71%,rgba(255,255,255,0.8)),color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* IE10+ */ - background: linear-gradient(to right,rgba(255,255,255,0)0%,rgba(255,255,255,0.045)1%,rgba(255,255,255,0.25)15%,rgba(255,255,255,0.6)30%,rgba(255,255,255,0.85)50%,rgba(255,255,255,0.85)70%,rgba(255,255,255,0.8)71%,rgba(255,255,255,0)100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */ - -/* forming the shine element play around with the width, skew and gradient to get different effects */ - height: 100%; - transform: skew(-10deg,0deg); - -webkit-transform: skew(-15deg,0deg); - -moz-transform: skew(-10deg,0deg); - -ms-transform: skew(-10deg,0deg); - -o-transform: skew(-10deg,0deg); - -/* animating it */ - animation: move 2s; - animation-iteration-count: infinite; - animation-delay: 1s; - -webkit-animation: move 2s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-delay: 1s; - -moz-animation: move 2s; - -moz-animation-iteration-count: infinite; - -moz-animation-delay: 1s; - -ms-animation: move 2s; - -ms-animation-iteration-count: infinite; - -ms-animation-delay: 1s; - -o-animation: move 2s; - -o-animation-iteration-count: infinite; - -o-animation-delay: 1s; -} -#shine1 { - width: 15%; -} -#shine2 { - margin-left: -12px; - width: 20%; -} -@keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} -@-webkit-keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} -@-moz-keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} -@-ms-keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} -@-o-keyframes move { - 0% {left: 0; opacity: 0;} - 5% {opacity: 0.0} - 48% {opacity: 0.2} - 85% {opacity: 0.0} - 100% {left: 82%} -} - -/* Board */ -#board { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - font-size: 1.45em; - text-align: center; -} - -.row { - display: flex; - flex-direction: row; -} - -#boardHeader { - margin-bottom: 10px; -} - -#boardHeader > .tile { - font-family: 'Press Start 2P', cursive; - font-weight: 600; - font-size: 3em; - border: 3px solid rgba(000,000,000,0.0); - border-bottom: none; - margin-bottom: -10px; - color: #cd222a; - padding: .5vw; - width: 8vw; - height: auto !important; - min-width: 130px; - min-height: 0px !important; - cursor: default; - transform: scale(1,1.25); - -webkit-transform:scale(1,1.25); /* Safari and Chrome */ - -moz-transform:scale(1,1.25); /* Firefox */ - -ms-transform:scale(1,1.25); /* IE 9+ */ - -o-transform:scale(1,1.25); /* Opera */ -} -#boardHeader > .tile:hover { - background-color: rgba(000,000,000,0.0); -} - -/* Tiles */ -input[type=checkbox] { - display: none; -} - -.tile { - border: 3px solid #cd222a; - margin: .2vw; - transition: .1s; -} - -label { - display: block; - font-weight: 500; - line-height: 1.25em; - width: 8vw; - height: 8vw; - min-width: 130px; - min-height: 130px; - padding: .4vw .5vw .6vw .5vw; - cursor: pointer; - display: -webkit-flexbox; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-flex-align: center; - -ms-flex-align: center; - -webkit-align-items: center; - align-items: center; - justify-content: center; -} - -#freeSpace > label { - cursor: default; -} - -input[type=checkbox]:checked + div { - background-color: #009cd4; - color: #fff; -} - -div.tile:hover { - background-color: #f3ca31; -} - -.unselect { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Chrome/Safari/Opera */ - -khtml-user-select: none; /* Konqueror */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - not supported by any browser */ -} - - -#social-share { - display: none; - margin-top: 7px; - margin-bottom: -12px; -} - -.swal2-content #social-share { - display: block; -} - - -/* Confetti. I can't believe this is for real. Based on COMPILED version of http://codepen.io/mikehobizal/pen/unvxa */ -@-webkit-keyframes bang { - from { - -webkit-transform: translate3d(0, 0, 0); - opacity: 1; - } -} -@-moz-keyframes bang { - from { - -moz-transform: translate3d(0, 0, 0); - opacity: 1; - } -} -@keyframes bang { - from { - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; - } -} -#confetti { - position: relative; -} - -#confetti i { - position: absolute; - display: block; - left: 50%; - top: 0; - width: 3px; - height: 5px; - background: red; - opacity: 0; - -webkit-animation: bang 700ms ease-out forwards; - -moz-animation: bang 700ms ease-out forwards; - animation: bang 700ms ease-out forwards; -} - -/* looks better in SCSS */ -#confetti i:nth-of-type(1) { - -webkit-transform: translate3d(-58px, -53px, 0) rotate(136deg); - -moz-transform: translate3d(-58px, -53px, 0) rotate(136deg); - -ms-transform: translate3d(-58px, -53px, 0) rotate(136deg); - -o-transform: translate3d(-58px, -53px, 0) rotate(136deg); - transform: translate3d(-58px, -53px, 0) rotate(136deg); - background: #ff0095; -} -#confetti i:nth-of-type(2) { - -webkit-transform: translate3d(20px, -96px, 0) rotate(311deg); - -moz-transform: translate3d(20px, -96px, 0) rotate(311deg); - -ms-transform: translate3d(20px, -96px, 0) rotate(311deg); - -o-transform: translate3d(20px, -96px, 0) rotate(311deg); - transform: translate3d(20px, -96px, 0) rotate(311deg); - background: #008cff; -} -#confetti i:nth-of-type(3) { - -webkit-transform: translate3d(-89px, -99px, 0) rotate(121deg); - -moz-transform: translate3d(-89px, -99px, 0) rotate(121deg); - -ms-transform: translate3d(-89px, -99px, 0) rotate(121deg); - -o-transform: translate3d(-89px, -99px, 0) rotate(121deg); - transform: translate3d(-89px, -99px, 0) rotate(121deg); - background: #ff0d00; -} -#confetti i:nth-of-type(4) { - -webkit-transform: translate3d(-15px, -67px, 0) rotate(120deg); - -moz-transform: translate3d(-15px, -67px, 0) rotate(120deg); - -ms-transform: translate3d(-15px, -67px, 0) rotate(120deg); - -o-transform: translate3d(-15px, -67px, 0) rotate(120deg); - transform: translate3d(-15px, -67px, 0) rotate(120deg); - background: #ff9900; -} -#confetti i:nth-of-type(5) { - -webkit-transform: translate3d(39px, -93px, 0) rotate(330deg); - -moz-transform: translate3d(39px, -93px, 0) rotate(330deg); - -ms-transform: translate3d(39px, -93px, 0) rotate(330deg); - -o-transform: translate3d(39px, -93px, 0) rotate(330deg); - transform: translate3d(39px, -93px, 0) rotate(330deg); - background: #04ff00; -} -#confetti i:nth-of-type(6) { - -webkit-transform: translate3d(-29px, -92px, 0) rotate(326deg); - -moz-transform: translate3d(-29px, -92px, 0) rotate(326deg); - -ms-transform: translate3d(-29px, -92px, 0) rotate(326deg); - -o-transform: translate3d(-29px, -92px, 0) rotate(326deg); - transform: translate3d(-29px, -92px, 0) rotate(326deg); - background: #ff3700; -} -#confetti i:nth-of-type(7) { - -webkit-transform: translate3d(-5px, -65px, 0) rotate(222deg); - -moz-transform: translate3d(-5px, -65px, 0) rotate(222deg); - -ms-transform: translate3d(-5px, -65px, 0) rotate(222deg); - -o-transform: translate3d(-5px, -65px, 0) rotate(222deg); - transform: translate3d(-5px, -65px, 0) rotate(222deg); - background: #a200ff; -} -#confetti i:nth-of-type(8) { - -webkit-transform: translate3d(-52px, -54px, 0) rotate(119deg); - -moz-transform: translate3d(-52px, -54px, 0) rotate(119deg); - -ms-transform: translate3d(-52px, -54px, 0) rotate(119deg); - -o-transform: translate3d(-52px, -54px, 0) rotate(119deg); - transform: translate3d(-52px, -54px, 0) rotate(119deg); - background: #ffc800; -} -#confetti i:nth-of-type(9) { - -webkit-transform: translate3d(-35px, -93px, 0) rotate(69deg); - -moz-transform: translate3d(-35px, -93px, 0) rotate(69deg); - -ms-transform: translate3d(-35px, -93px, 0) rotate(69deg); - -o-transform: translate3d(-35px, -93px, 0) rotate(69deg); - transform: translate3d(-35px, -93px, 0) rotate(69deg); - background: #e6ff00; -} -#confetti i:nth-of-type(10) { - -webkit-transform: translate3d(14px, -70px, 0) rotate(281deg); - -moz-transform: translate3d(14px, -70px, 0) rotate(281deg); - -ms-transform: translate3d(14px, -70px, 0) rotate(281deg); - -o-transform: translate3d(14px, -70px, 0) rotate(281deg); - transform: translate3d(14px, -70px, 0) rotate(281deg); - background: #ff8000; -} -#confetti i:nth-of-type(11) { - -webkit-transform: translate3d(86px, -79px, 0) rotate(328deg); - -moz-transform: translate3d(86px, -79px, 0) rotate(328deg); - -ms-transform: translate3d(86px, -79px, 0) rotate(328deg); - -o-transform: translate3d(86px, -79px, 0) rotate(328deg); - transform: translate3d(86px, -79px, 0) rotate(328deg); - background: #6a00ff; -} -#confetti i:nth-of-type(12) { - -webkit-transform: translate3d(-46px, -58px, 0) rotate(177deg); - -moz-transform: translate3d(-46px, -58px, 0) rotate(177deg); - -ms-transform: translate3d(-46px, -58px, 0) rotate(177deg); - -o-transform: translate3d(-46px, -58px, 0) rotate(177deg); - transform: translate3d(-46px, -58px, 0) rotate(177deg); - background: #00ff55; -} -#confetti i:nth-of-type(13) { - -webkit-transform: translate3d(-1px, -86px, 0) rotate(85deg); - -moz-transform: translate3d(-1px, -86px, 0) rotate(85deg); - -ms-transform: translate3d(-1px, -86px, 0) rotate(85deg); - -o-transform: translate3d(-1px, -86px, 0) rotate(85deg); - transform: translate3d(-1px, -86px, 0) rotate(85deg); - background: #ff00e1; -} -#confetti i:nth-of-type(14) { - -webkit-transform: translate3d(87px, -68px, 0) rotate(283deg); - -moz-transform: translate3d(87px, -68px, 0) rotate(283deg); - -ms-transform: translate3d(87px, -68px, 0) rotate(283deg); - -o-transform: translate3d(87px, -68px, 0) rotate(283deg); - transform: translate3d(87px, -68px, 0) rotate(283deg); - background: #ff00f7; -} -#confetti i:nth-of-type(15) { - -webkit-transform: translate3d(-91px, -74px, 0) rotate(132deg); - -moz-transform: translate3d(-91px, -74px, 0) rotate(132deg); - -ms-transform: translate3d(-91px, -74px, 0) rotate(132deg); - -o-transform: translate3d(-91px, -74px, 0) rotate(132deg); - transform: translate3d(-91px, -74px, 0) rotate(132deg); - background: #3700ff; -} -#confetti i:nth-of-type(16) { - -webkit-transform: translate3d(-85px, -57px, 0) rotate(63deg); - -moz-transform: translate3d(-85px, -57px, 0) rotate(63deg); - -ms-transform: translate3d(-85px, -57px, 0) rotate(63deg); - -o-transform: translate3d(-85px, -57px, 0) rotate(63deg); - transform: translate3d(-85px, -57px, 0) rotate(63deg); - background: #8800ff; -} -#confetti i:nth-of-type(17) { - -webkit-transform: translate3d(65px, -74px, 0) rotate(289deg); - -moz-transform: translate3d(65px, -74px, 0) rotate(289deg); - -ms-transform: translate3d(65px, -74px, 0) rotate(289deg); - -o-transform: translate3d(65px, -74px, 0) rotate(289deg); - transform: translate3d(65px, -74px, 0) rotate(289deg); - background: #3300ff; -} -#confetti i:nth-of-type(18) { - -webkit-transform: translate3d(-24px, -89px, 0) rotate(324deg); - -moz-transform: translate3d(-24px, -89px, 0) rotate(324deg); - -ms-transform: translate3d(-24px, -89px, 0) rotate(324deg); - -o-transform: translate3d(-24px, -89px, 0) rotate(324deg); - transform: translate3d(-24px, -89px, 0) rotate(324deg); - background: #00ffc8; -} -#confetti i:nth-of-type(19) { - -webkit-transform: translate3d(47px, -93px, 0) rotate(103deg); - -moz-transform: translate3d(47px, -93px, 0) rotate(103deg); - -ms-transform: translate3d(47px, -93px, 0) rotate(103deg); - -o-transform: translate3d(47px, -93px, 0) rotate(103deg); - transform: translate3d(47px, -93px, 0) rotate(103deg); - background: #0095ff; -} -#confetti i:nth-of-type(20) { - -webkit-transform: translate3d(-36px, -72px, 0) rotate(360deg); - -moz-transform: translate3d(-36px, -72px, 0) rotate(360deg); - -ms-transform: translate3d(-36px, -72px, 0) rotate(360deg); - -o-transform: translate3d(-36px, -72px, 0) rotate(360deg); - transform: translate3d(-36px, -72px, 0) rotate(360deg); - background: #51ff00; -} -#confetti i:nth-of-type(21) { - -webkit-transform: translate3d(-79px, -88px, 0) rotate(215deg); - -moz-transform: translate3d(-79px, -88px, 0) rotate(215deg); - -ms-transform: translate3d(-79px, -88px, 0) rotate(215deg); - -o-transform: translate3d(-79px, -88px, 0) rotate(215deg); - transform: translate3d(-79px, -88px, 0) rotate(215deg); - background: #ffc800; -} -#confetti i:nth-of-type(22) { - -webkit-transform: translate3d(76px, -65px, 0) rotate(38deg); - -moz-transform: translate3d(76px, -65px, 0) rotate(38deg); - -ms-transform: translate3d(76px, -65px, 0) rotate(38deg); - -o-transform: translate3d(76px, -65px, 0) rotate(38deg); - transform: translate3d(76px, -65px, 0) rotate(38deg); - background: #ff0022; -} -#confetti i:nth-of-type(23) { - -webkit-transform: translate3d(24px, -99px, 0) rotate(26deg); - -moz-transform: translate3d(24px, -99px, 0) rotate(26deg); - -ms-transform: translate3d(24px, -99px, 0) rotate(26deg); - -o-transform: translate3d(24px, -99px, 0) rotate(26deg); - transform: translate3d(24px, -99px, 0) rotate(26deg); - background: #33ff00; -} -#confetti i:nth-of-type(24) { - -webkit-transform: translate3d(50px, -54px, 0) rotate(119deg); - -moz-transform: translate3d(50px, -54px, 0) rotate(119deg); - -ms-transform: translate3d(50px, -54px, 0) rotate(119deg); - -o-transform: translate3d(50px, -54px, 0) rotate(119deg); - transform: translate3d(50px, -54px, 0) rotate(119deg); - background: #00ff91; -} -#confetti i:nth-of-type(25) { - -webkit-transform: translate3d(-15px, -77px, 0) rotate(25deg); - -moz-transform: translate3d(-15px, -77px, 0) rotate(25deg); - -ms-transform: translate3d(-15px, -77px, 0) rotate(25deg); - -o-transform: translate3d(-15px, -77px, 0) rotate(25deg); - transform: translate3d(-15px, -77px, 0) rotate(25deg); - background: #ff006f; -} -#confetti i:nth-of-type(26) { - -webkit-transform: translate3d(58px, -82px, 0) rotate(353deg); - -moz-transform: translate3d(58px, -82px, 0) rotate(353deg); - -ms-transform: translate3d(58px, -82px, 0) rotate(353deg); - -o-transform: translate3d(58px, -82px, 0) rotate(353deg); - transform: translate3d(58px, -82px, 0) rotate(353deg); - background: #00ffb3; -} -#confetti i:nth-of-type(27) { - -webkit-transform: translate3d(-69px, -76px, 0) rotate(274deg); - -moz-transform: translate3d(-69px, -76px, 0) rotate(274deg); - -ms-transform: translate3d(-69px, -76px, 0) rotate(274deg); - -o-transform: translate3d(-69px, -76px, 0) rotate(274deg); - transform: translate3d(-69px, -76px, 0) rotate(274deg); - background: #1e00ff; -} -#confetti i:nth-of-type(28) { - -webkit-transform: translate3d(-47px, -67px, 0) rotate(82deg); - -moz-transform: translate3d(-47px, -67px, 0) rotate(82deg); - -ms-transform: translate3d(-47px, -67px, 0) rotate(82deg); - -o-transform: translate3d(-47px, -67px, 0) rotate(82deg); - transform: translate3d(-47px, -67px, 0) rotate(82deg); - background: #00ffaa; -} -#confetti i:nth-of-type(29) { - -webkit-transform: translate3d(-24px, -89px, 0) rotate(48deg); - -moz-transform: translate3d(-24px, -89px, 0) rotate(48deg); - -ms-transform: translate3d(-24px, -89px, 0) rotate(48deg); - -o-transform: translate3d(-24px, -89px, 0) rotate(48deg); - transform: translate3d(-24px, -89px, 0) rotate(48deg); - background: #00ff4d; -} -#confetti i:nth-of-type(30) { - -webkit-transform: translate3d(5px, -51px, 0) rotate(143deg); - -moz-transform: translate3d(5px, -51px, 0) rotate(143deg); - -ms-transform: translate3d(5px, -51px, 0) rotate(143deg); - -o-transform: translate3d(5px, -51px, 0) rotate(143deg); - transform: translate3d(5px, -51px, 0) rotate(143deg); - background: #ff0044; -} -#confetti i:nth-of-type(31) { - -webkit-transform: translate3d(-26px, -61px, 0) rotate(109deg); - -moz-transform: translate3d(-26px, -61px, 0) rotate(109deg); - -ms-transform: translate3d(-26px, -61px, 0) rotate(109deg); - -o-transform: translate3d(-26px, -61px, 0) rotate(109deg); - transform: translate3d(-26px, -61px, 0) rotate(109deg); - background: #ffe100; -} -#confetti i:nth-of-type(32) { - -webkit-transform: translate3d(79px, -51px, 0) rotate(358deg); - -moz-transform: translate3d(79px, -51px, 0) rotate(358deg); - -ms-transform: translate3d(79px, -51px, 0) rotate(358deg); - -o-transform: translate3d(79px, -51px, 0) rotate(358deg); - transform: translate3d(79px, -51px, 0) rotate(358deg); - background: #ff00f2; -} -#confetti i:nth-of-type(33) { - -webkit-transform: translate3d(-35px, -73px, 0) rotate(117deg); - -moz-transform: translate3d(-35px, -73px, 0) rotate(117deg); - -ms-transform: translate3d(-35px, -73px, 0) rotate(117deg); - -o-transform: translate3d(-35px, -73px, 0) rotate(117deg); - transform: translate3d(-35px, -73px, 0) rotate(117deg); - background: #aaff00; -} -#confetti i:nth-of-type(34) { - -webkit-transform: translate3d(-28px, -87px, 0) rotate(354deg); - -moz-transform: translate3d(-28px, -87px, 0) rotate(354deg); - -ms-transform: translate3d(-28px, -87px, 0) rotate(354deg); - -o-transform: translate3d(-28px, -87px, 0) rotate(354deg); - transform: translate3d(-28px, -87px, 0) rotate(354deg); - background: yellow; -} -#confetti i:nth-of-type(35) { - -webkit-transform: translate3d(-86px, -92px, 0) rotate(329deg); - -moz-transform: translate3d(-86px, -92px, 0) rotate(329deg); - -ms-transform: translate3d(-86px, -92px, 0) rotate(329deg); - -o-transform: translate3d(-86px, -92px, 0) rotate(329deg); - transform: translate3d(-86px, -92px, 0) rotate(329deg); - background: #f2ff00; -} -#confetti i:nth-of-type(36) { - -webkit-transform: translate3d(26px, -66px, 0) rotate(240deg); - -moz-transform: translate3d(26px, -66px, 0) rotate(240deg); - -ms-transform: translate3d(26px, -66px, 0) rotate(240deg); - -o-transform: translate3d(26px, -66px, 0) rotate(240deg); - transform: translate3d(26px, -66px, 0) rotate(240deg); - background: #007bff; -} -#confetti i:nth-of-type(37) { - -webkit-transform: translate3d(54px, -90px, 0) rotate(326deg); - -moz-transform: translate3d(54px, -90px, 0) rotate(326deg); - -ms-transform: translate3d(54px, -90px, 0) rotate(326deg); - -o-transform: translate3d(54px, -90px, 0) rotate(326deg); - transform: translate3d(54px, -90px, 0) rotate(326deg); - background: #00ffd9; -} -#confetti i:nth-of-type(38) { - -webkit-transform: translate3d(19px, -84px, 0) rotate(222deg); - -moz-transform: translate3d(19px, -84px, 0) rotate(222deg); - -ms-transform: translate3d(19px, -84px, 0) rotate(222deg); - -o-transform: translate3d(19px, -84px, 0) rotate(222deg); - transform: translate3d(19px, -84px, 0) rotate(222deg); - background: red; -} -#confetti i:nth-of-type(39) { - -webkit-transform: translate3d(20px, -57px, 0) rotate(186deg); - -moz-transform: translate3d(20px, -57px, 0) rotate(186deg); - -ms-transform: translate3d(20px, -57px, 0) rotate(186deg); - -o-transform: translate3d(20px, -57px, 0) rotate(186deg); - transform: translate3d(20px, -57px, 0) rotate(186deg); - background: #ffdd00; -} -#confetti i:nth-of-type(40) { - -webkit-transform: translate3d(73px, -66px, 0) rotate(73deg); - -moz-transform: translate3d(73px, -66px, 0) rotate(73deg); - -ms-transform: translate3d(73px, -66px, 0) rotate(73deg); - -o-transform: translate3d(73px, -66px, 0) rotate(73deg); - transform: translate3d(73px, -66px, 0) rotate(73deg); - background: #2200ff; -} -#confetti i:nth-of-type(41) { - -webkit-transform: translate3d(-66px, -66px, 0) rotate(199deg); - -moz-transform: translate3d(-66px, -66px, 0) rotate(199deg); - -ms-transform: translate3d(-66px, -66px, 0) rotate(199deg); - -o-transform: translate3d(-66px, -66px, 0) rotate(199deg); - transform: translate3d(-66px, -66px, 0) rotate(199deg); - background: #ff00ae; -} -#confetti i:nth-of-type(42) { - -webkit-transform: translate3d(10px, -87px, 0) rotate(238deg); - -moz-transform: translate3d(10px, -87px, 0) rotate(238deg); - -ms-transform: translate3d(10px, -87px, 0) rotate(238deg); - -o-transform: translate3d(10px, -87px, 0) rotate(238deg); - transform: translate3d(10px, -87px, 0) rotate(238deg); - background: #ff1500; -} -#confetti i:nth-of-type(43) { - -webkit-transform: translate3d(-3px, -50px, 0) rotate(131deg); - -moz-transform: translate3d(-3px, -50px, 0) rotate(131deg); - -ms-transform: translate3d(-3px, -50px, 0) rotate(131deg); - -o-transform: translate3d(-3px, -50px, 0) rotate(131deg); - transform: translate3d(-3px, -50px, 0) rotate(131deg); - background: #ff4400; -} -#confetti i:nth-of-type(44) { - -webkit-transform: translate3d(-18px, -58px, 0) rotate(305deg); - -moz-transform: translate3d(-18px, -58px, 0) rotate(305deg); - -ms-transform: translate3d(-18px, -58px, 0) rotate(305deg); - -o-transform: translate3d(-18px, -58px, 0) rotate(305deg); - transform: translate3d(-18px, -58px, 0) rotate(305deg); - background: #0077ff; -} -#confetti i:nth-of-type(45) { - -webkit-transform: translate3d(14px, -67px, 0) rotate(280deg); - -moz-transform: translate3d(14px, -67px, 0) rotate(280deg); - -ms-transform: translate3d(14px, -67px, 0) rotate(280deg); - -o-transform: translate3d(14px, -67px, 0) rotate(280deg); - transform: translate3d(14px, -67px, 0) rotate(280deg); - background: #00d5ff; -} -#confetti i:nth-of-type(46) { - -webkit-transform: translate3d(64px, -86px, 0) rotate(252deg); - -moz-transform: translate3d(64px, -86px, 0) rotate(252deg); - -ms-transform: translate3d(64px, -86px, 0) rotate(252deg); - -o-transform: translate3d(64px, -86px, 0) rotate(252deg); - transform: translate3d(64px, -86px, 0) rotate(252deg); - background: #00ff99; -} -#confetti i:nth-of-type(47) { - -webkit-transform: translate3d(-56px, -67px, 0) rotate(95deg); - -moz-transform: translate3d(-56px, -67px, 0) rotate(95deg); - -ms-transform: translate3d(-56px, -67px, 0) rotate(95deg); - -o-transform: translate3d(-56px, -67px, 0) rotate(95deg); - transform: translate3d(-56px, -67px, 0) rotate(95deg); - background: #ee00ff; -} -#confetti i:nth-of-type(48) { - -webkit-transform: translate3d(-75px, -71px, 0) rotate(306deg); - -moz-transform: translate3d(-75px, -71px, 0) rotate(306deg); - -ms-transform: translate3d(-75px, -71px, 0) rotate(306deg); - -o-transform: translate3d(-75px, -71px, 0) rotate(306deg); - transform: translate3d(-75px, -71px, 0) rotate(306deg); - background: #e100ff; -} -#confetti i:nth-of-type(49) { - -webkit-transform: translate3d(16px, -94px, 0) rotate(154deg); - -moz-transform: translate3d(16px, -94px, 0) rotate(154deg); - -ms-transform: translate3d(16px, -94px, 0) rotate(154deg); - -o-transform: translate3d(16px, -94px, 0) rotate(154deg); - transform: translate3d(16px, -94px, 0) rotate(154deg); - background: #5500ff; -} -#confetti i:nth-of-type(50) { - -webkit-transform: translate3d(-84px, -89px, 0) rotate(211deg); - -moz-transform: translate3d(-84px, -89px, 0) rotate(211deg); - -ms-transform: translate3d(-84px, -89px, 0) rotate(211deg); - -o-transform: translate3d(-84px, -89px, 0) rotate(211deg); - transform: translate3d(-84px, -89px, 0) rotate(211deg); - background: #f200ff; -} diff --git a/assets/img/first-infinite-recharge-logo.png b/2020/assets/first-infinite-recharge-logo.png similarity index 100% rename from assets/img/first-infinite-recharge-logo.png rename to 2020/assets/first-infinite-recharge-logo.png diff --git a/2020/assets/style.css b/2020/assets/style.css new file mode 100644 index 0000000..a5b62a9 --- /dev/null +++ b/2020/assets/style.css @@ -0,0 +1,98 @@ +@import url('https://fonts.googleapis.com/css?family=Concert+One|Quicksand:600'); + +body, button { + font-family: 'Quicksand', sans-serif; + color: #fff; + background-color: #000; +} + +/* Colors: + #FAB74F + #FFF041 + #00C0DD + #005CB8 + #003A5D + #000000 +*/ + +/* Header */ +h1 { + margin-top: 5px; +} + +h3 { + margin-bottom: 25px; + color: #00C0DD; +} + +#game-logo { + width: 20vmax; +} + +#title { + font-family: 'Concert One', sans-serif; + font-size: 1.5em; +} + +/* Footer */ +#footer .button { + font-size: 15px; +} + +/* Buttons */ +.button { + background-color: #003A5D !important; + border: solid #00C0DD 3px !important; + border-radius: 10px !important; +} +.button:hover { + background-color: #005CB8 !important; +} +.button:active { + background-color: #00C0DD !important; +} + +#bingo { + font-family: 'Concert One', decorative; +} +#bingo div { + padding: 11px 7px 13px 10px; + font-size: 30px !important; +} + +/* Board */ +#board { + font-size: 1.2em; +} + +#boardHeader { + margin-top: -20px; + margin-bottom: 10px; +} +#boardHeader > .tile { + font-family: 'Concert One', decorative; + font-size: 4.5em; + border-width: 5px; + color: #FAB74F; + padding: 0 .5vw .5vw !important; +} + +/* Tiles */ +.tile { + border: 5px solid #FAB74F; + border-radius: 25px; +} + +#freeSpace > label { + font-size: 25px; +} + +input[type=checkbox]:checked + div { + background-color: #FAB74F; + color: #003A5D; + border-color: #FFF041; +} + +div.tile:hover { + background-color: #003A5D; +} \ No newline at end of file diff --git a/assets/sweetalert2/sweetalert2.css b/2020/assets/sweetalert2.css similarity index 100% rename from assets/sweetalert2/sweetalert2.css rename to 2020/assets/sweetalert2.css diff --git a/2020/index.html b/2020/index.html new file mode 100644 index 0000000..950a334 --- /dev/null +++ b/2020/index.html @@ -0,0 +1,42 @@ + +
+ 
+
+
+
+
+
+
+
diff --git a/assets/favicon/android-chrome-192x192.png b/assets/favicon/android-chrome-192x192.png
deleted file mode 100755
index 3ed757d..0000000
Binary files a/assets/favicon/android-chrome-192x192.png and /dev/null differ
diff --git a/assets/favicon/android-chrome-512x512.png b/assets/favicon/android-chrome-512x512.png
deleted file mode 100755
index 89e0bda..0000000
Binary files a/assets/favicon/android-chrome-512x512.png and /dev/null differ
diff --git a/assets/favicon/apple-touch-icon.png b/assets/favicon/apple-touch-icon.png
deleted file mode 100755
index 5806d2e..0000000
Binary files a/assets/favicon/apple-touch-icon.png and /dev/null differ
diff --git a/assets/favicon/favicon-16x16.png b/assets/favicon/favicon-16x16.png
deleted file mode 100755
index 7f6850e..0000000
Binary files a/assets/favicon/favicon-16x16.png and /dev/null differ
diff --git a/assets/favicon/favicon-32x32.png b/assets/favicon/favicon-32x32.png
deleted file mode 100755
index 634525d..0000000
Binary files a/assets/favicon/favicon-32x32.png and /dev/null differ
diff --git a/assets/favicon/site.webmanifest b/assets/favicon/site.webmanifest
deleted file mode 100755
index 67ed3d1..0000000
--- a/assets/favicon/site.webmanifest
+++ /dev/null
@@ -1 +0,0 @@
-{"name":"","short_name":"","icons":[{"src":"/assets/favicon/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/assets/favicon/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/assets/first-infinite-recharge-logo.png b/assets/first-infinite-recharge-logo.png
new file mode 100644
index 0000000..93a18b4
Binary files /dev/null and b/assets/first-infinite-recharge-logo.png differ
diff --git a/assets/style.css b/assets/style.css
new file mode 100644
index 0000000..a5b62a9
--- /dev/null
+++ b/assets/style.css
@@ -0,0 +1,98 @@
+@import url('https://fonts.googleapis.com/css?family=Concert+One|Quicksand:600');
+
+body, button {
+ font-family: 'Quicksand', sans-serif;
+ color: #fff;
+ background-color: #000;
+}
+
+/* Colors:
+ #FAB74F
+ #FFF041
+ #00C0DD
+ #005CB8
+ #003A5D
+ #000000
+*/
+
+/* Header */
+h1 {
+ margin-top: 5px;
+}
+
+h3 {
+ margin-bottom: 25px;
+ color: #00C0DD;
+}
+
+#game-logo {
+ width: 20vmax;
+}
+
+#title {
+ font-family: 'Concert One', sans-serif;
+ font-size: 1.5em;
+}
+
+/* Footer */
+#footer .button {
+ font-size: 15px;
+}
+
+/* Buttons */
+.button {
+ background-color: #003A5D !important;
+ border: solid #00C0DD 3px !important;
+ border-radius: 10px !important;
+}
+.button:hover {
+ background-color: #005CB8 !important;
+}
+.button:active {
+ background-color: #00C0DD !important;
+}
+
+#bingo {
+ font-family: 'Concert One', decorative;
+}
+#bingo div {
+ padding: 11px 7px 13px 10px;
+ font-size: 30px !important;
+}
+
+/* Board */
+#board {
+ font-size: 1.2em;
+}
+
+#boardHeader {
+ margin-top: -20px;
+ margin-bottom: 10px;
+}
+#boardHeader > .tile {
+ font-family: 'Concert One', decorative;
+ font-size: 4.5em;
+ border-width: 5px;
+ color: #FAB74F;
+ padding: 0 .5vw .5vw !important;
+}
+
+/* Tiles */
+.tile {
+ border: 5px solid #FAB74F;
+ border-radius: 25px;
+}
+
+#freeSpace > label {
+ font-size: 25px;
+}
+
+input[type=checkbox]:checked + div {
+ background-color: #FAB74F;
+ color: #003A5D;
+ border-color: #FFF041;
+}
+
+div.tile:hover {
+ background-color: #003A5D;
+}
\ No newline at end of file
diff --git a/assets/sweetalert2.css b/assets/sweetalert2.css
new file mode 100644
index 0000000..f09e877
--- /dev/null
+++ b/assets/sweetalert2.css
@@ -0,0 +1,730 @@
+body.swal2-in {
+ overflow-y: hidden; }
+
+body.swal2-iosfix {
+ position: fixed;
+ left: 0;
+ right: 0; }
+
+.swal2-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ padding: 10px;
+ background-color: transparent;
+ z-index: 1060; }
+ .swal2-container:not(.swal2-in) {
+ pointer-events: none; }
+ .swal2-container.swal2-fade {
+ -webkit-transition: background-color .1s;
+ transition: background-color .1s; }
+ .swal2-container.swal2-in {
+ background-color: rgba(0, 0, 0, 0.4); }
+
+.swal2-modal {
+ background-color: #FAB74F !important;
+ border-radius: 25px;
+ border: solid #FFF041 3px;
+ box-sizing: border-box;
+ text-align: center;
+ margin: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
+ display: none;
+ position: relative; }
+ .swal2-modal:focus {
+ outline: none; }
+ .swal2-modal.swal2-loading {
+ overflow-y: hidden; }
+ .swal2-modal .swal2-title {
+ color: #003A5D;
+ font-size: 35px;
+ font-family: 'Concert One', decorative;
+ text-align: center;
+ font-weight: 600;
+ text-transform: none;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ padding-left: 10px;
+ line-height: 60px;
+ display: block;
+ transform: scale(1,1.25);
+ -webkit-transform:scale(1,1.25); /* Safari and Chrome */
+ -moz-transform:scale(1,1.25); /* Firefox */
+ -ms-transform:scale(1,1.25); /* IE 9+ */
+ -o-transform:scale(1,1.25); /* Opera */ }
+ .swal2-modal .swal2-spacer {
+ height: 10px;
+ color: transparent;
+ border: 0; }
+ .swal2-modal .swal2-styled {
+ border: 0;
+ border-radius: 3px;
+ box-shadow: none;
+ color: #fff;
+ cursor: pointer;
+ font-size: 20px;
+ font-weight: 500;
+ margin: 0 5px;
+ padding: 10px 32px; }
+ .swal2-modal .swal2-styled:not(.swal2-loading)[disabled] {
+ opacity: .4;
+ cursor: no-drop; }
+ .swal2-modal .swal2-styled.swal2-loading {
+ box-sizing: border-box;
+ border: 4px solid transparent;
+ border-color: transparent;
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ margin: -2px 30px;
+ vertical-align: top;
+ background-color: transparent !important;
+ color: transparent;
+ cursor: default;
+ border-radius: 100%;
+ -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
+ animation: rotate-loading 1.5s linear 0s infinite normal;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .swal2-modal :not(.swal2-styled).swal2-loading::after {
+ display: inline-block;
+ content: '';
+ margin-left: 5px;
+ vertical-align: -1px;
+ height: 6px;
+ width: 6px;
+ border: 3px solid #999999;
+ border-right-color: transparent;
+ border-radius: 50%;
+ -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
+ animation: rotate-loading 1.5s linear 0s infinite normal; }
+ .swal2-modal .swal2-image {
+ margin: 20px auto;
+ max-width: 100%; }
+ .swal2-modal .swal2-close {
+ font-size: 36px;
+ line-height: 36px;
+ font-family: serif;
+ position: absolute;
+ top: 5px;
+ right: 13px;
+ cursor: pointer;
+ color: #cccccc;
+ -webkit-transition: color .1s ease;
+ transition: color .1s ease; }
+ .swal2-modal .swal2-close:hover {
+ color: #d55; }
+ .swal2-modal > .swal2-input,
+ .swal2-modal > .swal2-file,
+ .swal2-modal > .swal2-textarea,
+ .swal2-modal > .swal2-select,
+ .swal2-modal > .swal2-radio,
+ .swal2-modal > .swal2-checkbox {
+ display: none; }
+ .swal2-modal .swal2-content {
+ font-size: 20px;
+ text-align: center;
+ font-weight: 300;
+ position: relative;
+ float: none;
+ margin: 0;
+ padding: 0;
+ line-height: normal;
+ color: #003A5D; }
+ .swal2-modal .swal2-input,
+ .swal2-modal .swal2-file,
+ .swal2-modal .swal2-textarea,
+ .swal2-modal .swal2-select,
+ .swal2-modal .swal2-radio,
+ .swal2-modal .swal2-checkbox {
+ margin: 20px auto; }
+ .swal2-modal .swal2-input,
+ .swal2-modal .swal2-file,
+ .swal2-modal .swal2-textarea {
+ width: 100%;
+ box-sizing: border-box;
+ border-radius: 3px;
+ border: 1px solid #d9d9d9;
+ font-size: 20px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
+ -webkit-transition: border-color box-shadow .3s;
+ transition: border-color box-shadow .3s; }
+ .swal2-modal .swal2-input.swal2-inputerror,
+ .swal2-modal .swal2-file.swal2-inputerror,
+ .swal2-modal .swal2-textarea.swal2-inputerror {
+ border-color: #f06e57; }
+ .swal2-modal .swal2-input:focus,
+ .swal2-modal .swal2-file:focus,
+ .swal2-modal .swal2-textarea:focus {
+ outline: none;
+ box-shadow: 0 0 3px #c4e6f5;
+ border: 1px solid #b4dbed; }
+ .swal2-modal .swal2-input:focus::-webkit-input-placeholder,
+ .swal2-modal .swal2-file:focus::-webkit-input-placeholder,
+ .swal2-modal .swal2-textarea:focus::-webkit-input-placeholder {
+ -webkit-transition: opacity .3s .03s ease;
+ transition: opacity .3s .03s ease;
+ opacity: .8; }
+ .swal2-modal .swal2-input:focus::-moz-placeholder,
+ .swal2-modal .swal2-file:focus::-moz-placeholder,
+ .swal2-modal .swal2-textarea:focus::-moz-placeholder {
+ -webkit-transition: opacity .3s .03s ease;
+ transition: opacity .3s .03s ease;
+ opacity: .8; }
+ .swal2-modal .swal2-input:focus:-ms-input-placeholder,
+ .swal2-modal .swal2-file:focus:-ms-input-placeholder,
+ .swal2-modal .swal2-textarea:focus:-ms-input-placeholder {
+ -webkit-transition: opacity .3s .03s ease;
+ transition: opacity .3s .03s ease;
+ opacity: .8; }
+ .swal2-modal .swal2-input:focus::placeholder,
+ .swal2-modal .swal2-file:focus::placeholder,
+ .swal2-modal .swal2-textarea:focus::placeholder {
+ -webkit-transition: opacity .3s .03s ease;
+ transition: opacity .3s .03s ease;
+ opacity: .8; }
+ .swal2-modal .swal2-input::-webkit-input-placeholder,
+ .swal2-modal .swal2-file::-webkit-input-placeholder,
+ .swal2-modal .swal2-textarea::-webkit-input-placeholder {
+ color: #e6e6e6; }
+ .swal2-modal .swal2-input::-moz-placeholder,
+ .swal2-modal .swal2-file::-moz-placeholder,
+ .swal2-modal .swal2-textarea::-moz-placeholder {
+ color: #e6e6e6; }
+ .swal2-modal .swal2-input:-ms-input-placeholder,
+ .swal2-modal .swal2-file:-ms-input-placeholder,
+ .swal2-modal .swal2-textarea:-ms-input-placeholder {
+ color: #e6e6e6; }
+ .swal2-modal .swal2-input::placeholder,
+ .swal2-modal .swal2-file::placeholder,
+ .swal2-modal .swal2-textarea::placeholder {
+ color: #e6e6e6; }
+ .swal2-modal .swal2-range input {
+ float: left;
+ width: 80%; }
+ .swal2-modal .swal2-range output {
+ float: right;
+ width: 20%;
+ font-size: 20px;
+ font-weight: 600;
+ text-align: center; }
+ .swal2-modal .swal2-range input,
+ .swal2-modal .swal2-range output {
+ height: 43px;
+ line-height: 43px;
+ vertical-align: middle;
+ margin: 20px auto;
+ padding: 0; }
+ .swal2-modal .swal2-input {
+ height: 43px;
+ padding: 0 12px; }
+ .swal2-modal .swal2-input[type='number'] {
+ max-width: 150px; }
+ .swal2-modal .swal2-file {
+ font-size: 20px; }
+ .swal2-modal .swal2-textarea {
+ height: 108px;
+ padding: 12px; }
+ .swal2-modal .swal2-select {
+ color: #545454;
+ font-size: inherit;
+ padding: 5px 10px;
+ min-width: 40%;
+ max-width: 100%; }
+ .swal2-modal .swal2-radio {
+ border: 0; }
+ .swal2-modal .swal2-radio label:not(:first-child) {
+ margin-left: 20px; }
+ .swal2-modal .swal2-radio input,
+ .swal2-modal .swal2-radio span {
+ vertical-align: middle; }
+ .swal2-modal .swal2-radio input {
+ margin: 0 3px 0 0; }
+ .swal2-modal .swal2-checkbox {
+ color: #545454; }
+ .swal2-modal .swal2-checkbox input,
+ .swal2-modal .swal2-checkbox span {
+ vertical-align: middle; }
+ .swal2-modal .swal2-validationerror {
+ background-color: #f0f0f0;
+ margin: 0 -20px;
+ overflow: hidden;
+ padding: 10px;
+ color: gray;
+ font-size: 16px;
+ font-weight: 300;
+ display: none; }
+ .swal2-modal .swal2-validationerror::before {
+ content: '!';
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background-color: #ea7d7d;
+ color: #fff;
+ line-height: 24px;
+ text-align: center;
+ margin-right: 10px; }
+
+@supports (-ms-accelerator: true) {
+ .swal2-range input {
+ width: 100% !important; }
+ .swal2-range output {
+ display: none; } }
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ .swal2-range input {
+ width: 100% !important; }
+ .swal2-range output {
+ display: none; } }
+
+.swal2-icon {
+ width: 80px;
+ height: 80px;
+ border: 4px solid transparent;
+ border-radius: 50%;
+ margin: 20px auto 30px;
+ padding: 0;
+ position: relative;
+ box-sizing: content-box;
+ cursor: default;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .swal2-icon.swal2-error {
+ border-color: #f27474; }
+ .swal2-icon.swal2-error .x-mark {
+ position: relative;
+ display: block; }
+ .swal2-icon.swal2-error .line {
+ position: absolute;
+ height: 5px;
+ width: 47px;
+ background-color: #f27474;
+ display: block;
+ top: 37px;
+ border-radius: 2px; }
+ .swal2-icon.swal2-error .line.left {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ left: 17px; }
+ .swal2-icon.swal2-error .line.right {
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ right: 16px; }
+ .swal2-icon.swal2-warning {
+ color: #f8bb86;
+ border-color: #facea8;
+ font-size: 60px;
+ line-height: 80px;
+ text-align: center; }
+ .swal2-icon.swal2-info {
+ color: #3fc3ee;
+ border-color: #9de0f6;
+ font-size: 60px;
+ line-height: 80px;
+ text-align: center; }
+ .swal2-icon.swal2-question {
+ color: #87adbd;
+ border-color: #c9dae1;
+ font-size: 60px;
+ line-height: 80px;
+ text-align: center; }
+ .swal2-icon.swal2-success {
+ border-color: #a5dc86; }
+ .swal2-icon.swal2-success::before, .swal2-icon.swal2-success::after {
+ content: '';
+ border-radius: 50%;
+ position: absolute;
+ width: 60px;
+ height: 120px;
+ background: #fff;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg); }
+ .swal2-icon.swal2-success::before {
+ border-radius: 120px 0 0 120px;
+ top: -7px;
+ left: -33px;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ -webkit-transform-origin: 60px 60px;
+ transform-origin: 60px 60px; }
+ .swal2-icon.swal2-success::after {
+ border-radius: 0 120px 120px 0;
+ top: -11px;
+ left: 30px;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ -webkit-transform-origin: 0 60px;
+ transform-origin: 0 60px; }
+ .swal2-icon.swal2-success .placeholder {
+ width: 80px;
+ height: 80px;
+ border: 4px solid rgba(165, 220, 134, 0.2);
+ border-radius: 50%;
+ box-sizing: content-box;
+ position: absolute;
+ left: -4px;
+ top: -4px;
+ z-index: 2; }
+ .swal2-icon.swal2-success .fix {
+ width: 7px;
+ height: 90px;
+ background-color: #fff;
+ position: absolute;
+ left: 28px;
+ top: 8px;
+ z-index: 1;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+ .swal2-icon.swal2-success .line {
+ height: 5px;
+ background-color: #a5dc86;
+ display: block;
+ border-radius: 2px;
+ position: absolute;
+ z-index: 2; }
+ .swal2-icon.swal2-success .line.tip {
+ width: 25px;
+ left: 14px;
+ top: 46px;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg); }
+ .swal2-icon.swal2-success .line.long {
+ width: 47px;
+ right: 8px;
+ top: 38px;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+
+.swal2-progresssteps {
+ font-weight: 600;
+ margin: 0 0 20px;
+ padding: 0; }
+ .swal2-progresssteps li {
+ display: inline-block;
+ position: relative; }
+ .swal2-progresssteps .swal2-progresscircle {
+ background: #3085d6;
+ border-radius: 2em;
+ color: #fff;
+ height: 2em;
+ line-height: 2em;
+ text-align: center;
+ width: 2em;
+ z-index: 20; }
+ .swal2-progresssteps .swal2-progresscircle:first-child {
+ margin-left: 0; }
+ .swal2-progresssteps .swal2-progresscircle:last-child {
+ margin-right: 0; }
+ .swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep {
+ background: #3085d6; }
+ .swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep ~ .swal2-progresscircle {
+ background: #add8e6; }
+ .swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep ~ .swal2-progressline {
+ background: #add8e6; }
+ .swal2-progresssteps .swal2-progressline {
+ background: #3085d6;
+ height: .4em;
+ margin: 0 -1px;
+ z-index: 10; }
+
+[class^='swal2'] {
+ -webkit-tap-highlight-color: transparent; }
+
+@-webkit-keyframes showSweetAlert {
+ 0% {
+ -webkit-transform: scale(0.7);
+ transform: scale(0.7); }
+ 45% {
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05); }
+ 80% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95); }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1); } }
+
+@keyframes showSweetAlert {
+ 0% {
+ -webkit-transform: scale(0.7);
+ transform: scale(0.7); }
+ 45% {
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05); }
+ 80% {
+ -webkit-transform: scale(0.95);
+ transform: scale(0.95); }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1); } }
+
+@-webkit-keyframes hideSweetAlert {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 1; }
+ 100% {
+ -webkit-transform: scale(0.5);
+ transform: scale(0.5);
+ opacity: 0; } }
+
+@keyframes hideSweetAlert {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 1; }
+ 100% {
+ -webkit-transform: scale(0.5);
+ transform: scale(0.5);
+ opacity: 0; } }
+
+.swal2-show {
+ -webkit-animation: showSweetAlert 0.3s;
+ animation: showSweetAlert 0.3s; }
+ .swal2-show.swal2-noanimation {
+ -webkit-animation: none;
+ animation: none; }
+
+.swal2-hide {
+ -webkit-animation: hideSweetAlert 0.15s forwards;
+ animation: hideSweetAlert 0.15s forwards; }
+ .swal2-hide.swal2-noanimation {
+ -webkit-animation: none;
+ animation: none; }
+
+@-webkit-keyframes animate-success-tip {
+ 0% {
+ width: 0;
+ left: 1px;
+ top: 19px; }
+ 54% {
+ width: 0;
+ left: 1px;
+ top: 19px; }
+ 70% {
+ width: 50px;
+ left: -8px;
+ top: 37px; }
+ 84% {
+ width: 17px;
+ left: 21px;
+ top: 48px; }
+ 100% {
+ width: 25px;
+ left: 14px;
+ top: 45px; } }
+
+@keyframes animate-success-tip {
+ 0% {
+ width: 0;
+ left: 1px;
+ top: 19px; }
+ 54% {
+ width: 0;
+ left: 1px;
+ top: 19px; }
+ 70% {
+ width: 50px;
+ left: -8px;
+ top: 37px; }
+ 84% {
+ width: 17px;
+ left: 21px;
+ top: 48px; }
+ 100% {
+ width: 25px;
+ left: 14px;
+ top: 45px; } }
+
+@-webkit-keyframes animate-success-long {
+ 0% {
+ width: 0;
+ right: 46px;
+ top: 54px; }
+ 65% {
+ width: 0;
+ right: 46px;
+ top: 54px; }
+ 84% {
+ width: 55px;
+ right: 0;
+ top: 35px; }
+ 100% {
+ width: 47px;
+ right: 8px;
+ top: 38px; } }
+
+@keyframes animate-success-long {
+ 0% {
+ width: 0;
+ right: 46px;
+ top: 54px; }
+ 65% {
+ width: 0;
+ right: 46px;
+ top: 54px; }
+ 84% {
+ width: 55px;
+ right: 0;
+ top: 35px; }
+ 100% {
+ width: 47px;
+ right: 8px;
+ top: 38px; } }
+
+@-webkit-keyframes rotatePlaceholder {
+ 0% {
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+ 5% {
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+ 12% {
+ -webkit-transform: rotate(-405deg);
+ transform: rotate(-405deg); }
+ 100% {
+ -webkit-transform: rotate(-405deg);
+ transform: rotate(-405deg); } }
+
+@keyframes rotatePlaceholder {
+ 0% {
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+ 5% {
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg); }
+ 12% {
+ -webkit-transform: rotate(-405deg);
+ transform: rotate(-405deg); }
+ 100% {
+ -webkit-transform: rotate(-405deg);
+ transform: rotate(-405deg); } }
+
+.animate-success-tip {
+ -webkit-animation: animate-success-tip 0.75s;
+ animation: animate-success-tip 0.75s; }
+
+.animate-success-long {
+ -webkit-animation: animate-success-long 0.75s;
+ animation: animate-success-long 0.75s; }
+
+.swal2-success.animate::after {
+ -webkit-animation: rotatePlaceholder 4.25s ease-in;
+ animation: rotatePlaceholder 4.25s ease-in; }
+
+@-webkit-keyframes animate-error-icon {
+ 0% {
+ -webkit-transform: rotateX(100deg);
+ transform: rotateX(100deg);
+ opacity: 0; }
+ 100% {
+ -webkit-transform: rotateX(0deg);
+ transform: rotateX(0deg);
+ opacity: 1; } }
+
+@keyframes animate-error-icon {
+ 0% {
+ -webkit-transform: rotateX(100deg);
+ transform: rotateX(100deg);
+ opacity: 0; }
+ 100% {
+ -webkit-transform: rotateX(0deg);
+ transform: rotateX(0deg);
+ opacity: 1; } }
+
+.animate-error-icon {
+ -webkit-animation: animate-error-icon 0.5s;
+ animation: animate-error-icon 0.5s; }
+
+@-webkit-keyframes animate-x-mark {
+ 0% {
+ -webkit-transform: scale(0.4);
+ transform: scale(0.4);
+ margin-top: 26px;
+ opacity: 0; }
+ 50% {
+ -webkit-transform: scale(0.4);
+ transform: scale(0.4);
+ margin-top: 26px;
+ opacity: 0; }
+ 80% {
+ -webkit-transform: scale(1.15);
+ transform: scale(1.15);
+ margin-top: -6px; }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ margin-top: 0;
+ opacity: 1; } }
+
+@keyframes animate-x-mark {
+ 0% {
+ -webkit-transform: scale(0.4);
+ transform: scale(0.4);
+ margin-top: 26px;
+ opacity: 0; }
+ 50% {
+ -webkit-transform: scale(0.4);
+ transform: scale(0.4);
+ margin-top: 26px;
+ opacity: 0; }
+ 80% {
+ -webkit-transform: scale(1.15);
+ transform: scale(1.15);
+ margin-top: -6px; }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ margin-top: 0;
+ opacity: 1; } }
+
+.animate-x-mark {
+ -webkit-animation: animate-x-mark 0.5s;
+ animation: animate-x-mark 0.5s; }
+
+@-webkit-keyframes pulse-warning {
+ 0% {
+ border-color: #f8d486; }
+ 100% {
+ border-color: #f8bb86; } }
+
+@keyframes pulse-warning {
+ 0% {
+ border-color: #f8d486; }
+ 100% {
+ border-color: #f8bb86; } }
+
+.pulse-warning {
+ -webkit-animation: pulse-warning 0.75s infinite alternate;
+ animation: pulse-warning 0.75s infinite alternate; }
+
+@-webkit-keyframes rotate-loading {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg); }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg); } }
+
+@keyframes rotate-loading {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg); }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg); } }
diff --git a/index.html b/index.html
index b38a17e..6c86cd9 100644
--- a/index.html
+++ b/index.html
@@ -1,22 +1,23 @@
+
+
+ FRC Kickoff Bingo!
+2020 Edition
+
+
+ +
+ + +
- 
+
+