diff --git a/Punduction/overlays/ExampleOverlay/caster1.html b/Punduction/overlays/ExampleOverlay/caster1.html new file mode 100644 index 0000000..56857cb --- /dev/null +++ b/Punduction/overlays/ExampleOverlay/caster1.html @@ -0,0 +1,26 @@ + + + + + + + + + + + +
+
+
+
+ +
+ +
+ + + + + + + diff --git a/Punduction/overlays/ExampleOverlay/caster2.html b/Punduction/overlays/ExampleOverlay/caster2.html new file mode 100644 index 0000000..b91e648 --- /dev/null +++ b/Punduction/overlays/ExampleOverlay/caster2.html @@ -0,0 +1,26 @@ + + + + + + + + + + + +
+
+
+
+ + + + + + + + + diff --git a/Punduction/overlays/ExampleOverlay/fonts/ACES04.ttf b/Punduction/overlays/ExampleOverlay/fonts/ACES04.ttf new file mode 100644 index 0000000..8eec445 Binary files /dev/null and b/Punduction/overlays/ExampleOverlay/fonts/ACES04.ttf differ diff --git a/Punduction/overlays/ExampleOverlay/fonts/ACES04_Heavy.ttf b/Punduction/overlays/ExampleOverlay/fonts/ACES04_Heavy.ttf new file mode 100644 index 0000000..dcdfbf4 Binary files /dev/null and b/Punduction/overlays/ExampleOverlay/fonts/ACES04_Heavy.ttf differ diff --git a/Punduction/overlays/ExampleOverlay/fonts/VINSDOJO.TTF b/Punduction/overlays/ExampleOverlay/fonts/VINSDOJO.TTF new file mode 100644 index 0000000..4f5aed1 Binary files /dev/null and b/Punduction/overlays/ExampleOverlay/fonts/VINSDOJO.TTF differ diff --git a/Punduction/overlays/ExampleOverlay/fonts/kimberly.ttf b/Punduction/overlays/ExampleOverlay/fonts/kimberly.ttf new file mode 100644 index 0000000..09a597a Binary files /dev/null and b/Punduction/overlays/ExampleOverlay/fonts/kimberly.ttf differ diff --git a/Punduction/overlays/ExampleOverlay/layout/namebar_bg.png b/Punduction/overlays/ExampleOverlay/layout/namebar_bg.png new file mode 100644 index 0000000..40456c7 Binary files /dev/null and b/Punduction/overlays/ExampleOverlay/layout/namebar_bg.png differ diff --git a/Punduction/overlays/ExampleOverlay/layout/namebar_bg_flip.png b/Punduction/overlays/ExampleOverlay/layout/namebar_bg_flip.png new file mode 100644 index 0000000..986597e Binary files /dev/null and b/Punduction/overlays/ExampleOverlay/layout/namebar_bg_flip.png differ diff --git a/Punduction/overlays/ExampleOverlay/layout/namebar_plain.png b/Punduction/overlays/ExampleOverlay/layout/namebar_plain.png new file mode 100644 index 0000000..6723ec0 Binary files /dev/null and b/Punduction/overlays/ExampleOverlay/layout/namebar_plain.png differ diff --git a/Punduction/overlays/ExampleOverlay/layout/twitch.png b/Punduction/overlays/ExampleOverlay/layout/twitch.png new file mode 100644 index 0000000..4b304ae Binary files /dev/null and b/Punduction/overlays/ExampleOverlay/layout/twitch.png differ diff --git a/Punduction/overlays/ExampleOverlay/layout/twitter.png b/Punduction/overlays/ExampleOverlay/layout/twitter.png new file mode 100644 index 0000000..7290797 Binary files /dev/null and b/Punduction/overlays/ExampleOverlay/layout/twitter.png differ diff --git a/Punduction/overlays/ExampleOverlay/playerInfo.html b/Punduction/overlays/ExampleOverlay/playerInfo.html new file mode 100644 index 0000000..6cf5016 --- /dev/null +++ b/Punduction/overlays/ExampleOverlay/playerInfo.html @@ -0,0 +1,199 @@ + + + + + + + + + + + +
+
+
+
+
+
+
+ team +
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ Average Placement +
+
+
+
+
+
+
+
+
+
+ Recent Placements +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+ team +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ Average Placement +
+
+
+
+
+ Recent Placements +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ Head to Head Record +
+
+
+
+ +
+
+
+ % +
+ Head to Head Winrate +
+
+ % +
+
+
+
+ + + + + + diff --git a/Punduction/overlays/ExampleOverlay/players.html b/Punduction/overlays/ExampleOverlay/players.html new file mode 100644 index 0000000..27c1207 --- /dev/null +++ b/Punduction/overlays/ExampleOverlay/players.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + +
+
+ + +
+
+
+
+
+ +
+
+
0
+
+
+
+
+
+
+
0
+
+
+ +
+
+
+
+
+ +
+
+ + + + + + diff --git a/Punduction/overlays/ExampleOverlay/read.js b/Punduction/overlays/ExampleOverlay/read.js new file mode 100644 index 0000000..6fc62a9 --- /dev/null +++ b/Punduction/overlays/ExampleOverlay/read.js @@ -0,0 +1,192 @@ +// Read JSON file +var xobj = new XMLHttpRequest(); +xobj.overrideMimeType("application/json"); +xobj.open("GET", "../../output/outputObject.json", true); +xobj.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + processJson(this); + + } +}; +xobj.send(); + + +function processJson(jsonRequest) { + + var teamBasePath = "../../assets/teams/"; + var flagBasePath = "../../assets/flags/"; + var characterImagePath = "../../assets/characterImages/"; + var json = JSON.parse(jsonRequest.responseText); + + var player1="", player2=""; + var p1score="", p2score=""; + var p1logo="", p2logo=""; + var p1team="", p2team=""; + var p1country="", p2country=""; + var p1image="", p2image=""; + var p1twitter= "", p2twitter= ""; + var p1twitch= "", p2twitch= ""; + var caster1="", caster2="", caster3="", caster4=""; + var casterTwitter1="", casterTwitter2="", casterTwitter3="", casterTwitter4=""; + var round="", bestof=""; + + var p1averagePlacement="", p1placement1="", p1placement2="", p1placement3="", p1placement4="", p1placement5=""; + var p2averagePlacement="", p2placement1="", p2placement2="", p2placement3="", p2placement4="", p2placement5=""; + var h2hP1SetWins = "", h2hP2SetWins = ""; + var h2hP1SetWinRate = "", h2hP2SetWinRate = ""; + + + //Player1 + player1 = json["player1"]["name"]; + p1logo = teamBasePath + json["player1"]["team"]; + p1team = json["player1"]["prefix"]; + p1country = "background: url(" + flagBasePath + json["player1"]["country"] + ");"; + p1score = json["player1"]["score"]; + p1image = "background-image: url(" + characterImagePath + json["player1"]["image"] + ");"; + p1twitter = json["player1"]["twitter"]; + p1twitch = json["player1"]["twitch"]; + + //RecentPlacementPlayer1 + p1averagePlacement = json["placement1"]["AveragePlacement"]; + p1placement1 = json["placement1"]["RecentPlacement1"]; + p1placement2 = json["placement1"]["RecentPlacement2"]; + p1placement3 = json["placement1"]["RecentPlacement3"]; + p1placement4 = json["placement1"]["RecentPlacement4"]; + p1placement5 = json["placement1"]["RecentPlacement5"]; + + //Player2 + player2 = json["player2"]["name"]; + p2logo = teamBasePath + json["player2"]["team"]; + p2team = json["player2"]["prefix"]; + p2country = "background: url(" + flagBasePath + json["player2"]["country"] + ");"; + p2score = json["player2"]["score"]; + p2image = "background-image: url(" + characterImagePath + json["player2"]["image"] + ");"; + p2twitter = json["player2"]["twitter"]; + p2twitch = json["player2"]["twitch"]; + //RecentPlacementPlayer2 + p2averagePlacement = json["placement2"]["AveragePlacement"]; + p2placement1 = json["placement2"]["RecentPlacement1"]; + p2placement2 = json["placement2"]["RecentPlacement2"]; + p2placement3 = json["placement2"]["RecentPlacement3"]; + p2placement4 = json["placement2"]["RecentPlacement4"]; + p2placement5 = json["placement2"]["RecentPlacement5"]; + + //Casters + caster1 = json["commentator1"]["name"]; + casterTwitter1 = json["commentator1"]["twitter"]; + caster2 = json["commentator2"]["name"]; + casterTwitter2 = json["commentator2"]["twitter"]; + caster3 = json["commentator3"]["name"]; + casterTwitter3 = json["commentator3"]["twitter"]; + caster4 = json["commentator4"]["name"]; + casterTwitter4 = json["commentator4"]["twitter"]; + + //MatchInfo + round = json["match"]["round"]; + bestof = json["match"]["firstTo"]; + + //H2H + p1SetWins = json["h2h"]["p1SetWins"]; + p2SetWins = json["h2h"]["p2SetWins"]; + h2hP1SetWinRate = json["h2h"]["p1SetWinRate"]; + h2hP2SetWinRate = json["h2h"]["p2SetWinRate"]; + + switch (n) { + case 0: + document.getElementById("player1").innerHTML = player1; + document.getElementById("p1team").innerHTML = p1team; + document.getElementById("p1logo").src = p1logo; + break; + case 1: + document.getElementById("player2").innerHTML = player2; + document.getElementById("p2team").innerHTML = p2team; + document.getElementById("p2logo").src = p2logo; + break; + case 2: + document.getElementById("caster1").innerHTML = caster1; + document.getElementById("twitter1").innerHTML = casterTwitter1; + break; + case 3: + document.getElementById("caster2").innerHTML = caster2; + document.getElementById("twitter2").innerHTML = casterTwitter2; + break; + case 10: + document.getElementById("caster3").innerHTML = caster3; + document.getElementById("twitter3").innerHTML = casterTwitter3; + break; + case 4: + document.getElementById("p1score").innerHTML = p1score; + break; + case 5: + document.getElementById("p2score").innerHTML = p2score; + break; + case 6: + document.getElementById("round").innerHTML = round; + document.getElementById("bestof").innerHTML = bestof; + break; + case 7: + document.getElementById("player1").innerHTML = player1; + document.getElementById("player2").innerHTML = player2; + document.getElementById("p1team").innerHTML = p1team; + document.getElementById("p2team").innerHTML = p2team; + document.getElementById("p1score").innerHTML = p1score; + document.getElementById("p2score").innerHTML = p2score; + break; + case 8: + document.getElementById("player1").innerHTML = player1; + document.getElementById("player2").innerHTML = player2; + document.getElementById("p1team").innerHTML = p1team; + document.getElementById("p2team").innerHTML = p2team; + document.getElementById("p1country").style = p1country; + document.getElementById("p2country").style = p2country; + document.getElementById("p1score").innerHTML = p1score; + document.getElementById("p2score").innerHTML = p2score; + document.getElementById("p1logo").src = p1logo; + document.getElementById("p2logo").src = p2logo; + break; + case 9: + document.getElementById("mText1").innerHTML = mText1; + document.getElementById("mText2").innerHTML = mText2; + document.getElementById("mText3").innerHTML = mText3; + document.getElementById("mScore1").innerHTML = mScore1; + document.getElementById("mScore2").innerHTML = mScore2; + document.getElementById("mScore3").innerHTML = mScore3; + break; + case 11: + document.getElementById("player1").innerHTML = player1; + document.getElementById("player2").innerHTML = player2; + document.getElementById("p1team").innerHTML = p1team; + document.getElementById("p2team").innerHTML = p2team; + document.getElementById("p1twitter").innerHTML = p1twitter; + document.getElementById("p2twitter").innerHTML = p2twitter; + document.getElementById("p1twitch").innerHTML = p1twitch; + document.getElementById("p2twitch").innerHTML = p2twitch; + document.getElementById("p1image").style = p1image; + document.getElementById("p2image").style = p2image; + document.getElementById("p1averagePlacement").innerHTML = p1averagePlacement; + document.getElementById("p2averagePlacement").innerHTML = p2averagePlacement; + document.getElementById("p1placement1").innerHTML = p1placement1; + document.getElementById("p1placement2").innerHTML = p1placement2; + document.getElementById("p1placement3").innerHTML = p1placement3; + document.getElementById("p1placement4").innerHTML = p1placement4; + document.getElementById("p1placement5").innerHTML = p1placement5; + document.getElementById("p2placement1").innerHTML = p2placement1; + document.getElementById("p2placement2").innerHTML = p2placement2; + document.getElementById("p2placement3").innerHTML = p2placement3; + document.getElementById("p2placement4").innerHTML = p2placement4; + document.getElementById("p2placement5").innerHTML = p2placement5; + document.getElementById("p2placement4").innerHTML = p2placement4; + document.getElementById("p2placement5").innerHTML = p2placement5; + document.getElementById("p1SetWins").innerHTML = p1SetWins; + document.getElementById("p2SetWins").innerHTML = p2SetWins; + document.getElementById("h2hP1SetWinRate").innerHTML = h2hP1SetWinRate; + document.getElementById("h2hP2SetWinRate").innerHTML = h2hP2SetWinRate; + break; + case 12: + document.getElementById("player1").innerHTML = player1; + document.getElementById("player2").innerHTML = player2; + break; + default: + break; + } +} diff --git a/Punduction/overlays/ExampleOverlay/round.html b/Punduction/overlays/ExampleOverlay/round.html new file mode 100644 index 0000000..0a74820 --- /dev/null +++ b/Punduction/overlays/ExampleOverlay/round.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + +
+
+
+
+ + First to
+
+
+
+ + + + + + + diff --git a/Punduction/overlays/ExampleOverlay/style-game.css b/Punduction/overlays/ExampleOverlay/style-game.css new file mode 100644 index 0000000..a412560 --- /dev/null +++ b/Punduction/overlays/ExampleOverlay/style-game.css @@ -0,0 +1,428 @@ +:root { + --blue: linear-gradient(to bottom, #3fb4bf, #bafafc, #28abb3, #b7f7fb, #1ca8aa); + --gold: linear-gradient(to bottom, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); + --silver: linear-gradient(to bottom, #c4c4c4, #ffffff, #b4b4b4, #ffffff, #afafaf); + --black: linear-gradient(to bottom, #181818, #4b4b4b, #1d1d1d, #515151, #1a1a1a); + --red: linear-gradient(to bottom, #bf3f3f, #fcbaba, #b32828, #fbb7b7, #aa1c1c); + --yellow: linear-gradient(to right,#eab600,#eab600); + --green: linear-gradient(to right,#04a9f5,#00f473); + --aceGreen: linear-gradient(to bottom, #299a39, #53ea5a, #56c16d, #75ff7b); + --orange: linear-gradient(to bottom, #feaf04, #ffcb5a, #feaf04, #ffcb5a, #d99502); + + --separatorGradient: linear-gradient(to bottom, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); +} + +.container { + display: inline-flex; + position: absolute; + } + +.shape { + width: 525px; + height: 45px; + margin: 0px; + background: linear-gradient(rgba(72,72,72,1),rgba(35,35,35,0.7)); + background: url('layout/namebar_bg.png'); + background-size: 525px 45px; + overflow: hidden; + position: relative; + + border-style: solid; + border-width: 0 10px 0 10px; + border-image: var(--silver); + border-image-slice: 1; + + animation-name: namebar; + animation-duration: 1.5s; + + display: inline-flex; + justify-content: flex-end; + + + /* box-shadow: inset 0px 0px 10px rgba(0,0,0,0.7); */ + /* box-shadow: 0 8px 8px -10px #000; */ +} + +.shapeL { + background: url('layout/namebar_bg.png'); + background-size: 525px 45px; +} + +.shapeR { + background: url('layout/namebar_bg_flip.png'); + background-size: 525px 45px; +} + +.base { + margin: 0px; + overflow: hidden; + position: relative; + display: flexbox; + justify-content: flex-end; + + border-style: solid; + border-width: 0 10px 0 10px; + border-image: var(--silver); + border-image-slice: 1; + box-shadow: inset 0px 0px 10px rgba(0,0,0,0.7); +} +.name { + width: 300px; + height: 45px; + background: linear-gradient(rgba(72,72,72,1),rgba(35,35,35,0.7)); + background: url('layout/namebar_plain.png'); + background-size: 525px 45px; + + animation-name: caster; + animation-duration: 1.5s; +} +.twitter { + width: 225px; + height: 35px; + margin-left: 111px; + background: linear-gradient(rgba(14, 14, 14, 1),rgba(14, 14, 14, 0.7)); + /*background: var(--silver); */ + /*background: url('layout/namebar_plain.png'); */ + /*background-size: 525px 35px; */ + + animation-name: twitter; + animation-duration: 1.5s; +} +.round { + margin-left: 10px; + width: 250px; + height: 45px; + position: absolute; + transform: skew(-35deg); + border-width: 0 10px 0 0; + animation-name: round; + animation-duration: 1.5s; + background: url('layout/namebar_plain.png'); + /* background: linear-gradient(#04070a, #1c262d); */ + clip-path: polygon(10px 0, 45px 45px, 260px 45px, 260px 0); +} +.round-left { + transform: skew(35deg); + border-width: 0 0 0 10px; + justify-content: flex-start; + clip-path: polygon(0 0, 0 45px, 100px 45px, 100px 0); +} +.extensionL { + z-index: 1; + width: 60px; + border-image: var(--silver); + border-image-slice: 1; + animation-name: extension; + animation-duration: 3s; + background: url('layout/namebar_plain.png'); + /* background: linear-gradient(#1c262d, #04070a); */ + background-position: center; + position: absolute; +} +.extensionR { + z-index: 1; + width: 60px; + border-image: var(--silver); + border-image-slice: 1; + animation-name: extension; + animation-duration: 3s; + background: url('layout/namebar_plain.png'); + /* background: linear-gradient(#1c262d, #04070a); */ + background-position: center; + position: absolute; +} + +.type { + font-family: 'Kimberly', sans-serif; + font-size: 26px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 3px; + + display: inline-flex; + + width: 430px; + height: 100%; + white-space: nowrap; + + justify-content: center; + align-items: center; + + + color: rgba(255, 255, 255, 0.8); +} + + + +.name-type { + font-family: 'Kimberly', sans-serif; + font-size: 26px; + font-weight: 700; + letter-spacing: 1px; + + display: inline-flex; + + width: 300px; + height: 45px; + white-space: nowrap; + + justify-content: center; + align-items: center; + color: rgba(255, 255, 255, 1); +} +.twitter-type { + font-family: 'Kimberly', sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: 1px; + + display: inline-flex; + + width: 225px; + height: 35px; + white-space: nowrap; + + justify-content: center; + align-items: center; + color: rgba(255, 255, 255, 0.8); +} + +.small { + font-size: 18px; + font-weight: 700; + margin-left: 10px; +} +.large { + font-family: 'Kimberly', sans-serif; + font-size: 28px; + font-weight: 700; + width: 60px; + color: rgba(255, 255, 255, 1); +} + +.team { + /* background: var(--yellow); */ + padding-right: 10px; +} + +.gradient { + background: linear-gradient(90deg, rgba(212,175,55,1) 0%, rgba(236,154,21,1) 50%, rgba(212,175,55,1) 100%); + background-size: 400% 400%; + animation: gradient 20s ease infinite; + background-clip: padding-box; +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.logo { + display: inline-flex; + --width: 120px; + width: var(--width); + --height: 45px; + height: var(--height); + + justify-content: center; + align-items: center; + color: #fff; + clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); + -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); + + /*background: linear-gradient(#1c262d, #04070a);*/ + background-size: 120px 45px; + box-shadow: inset 0px 0px 10px #000; + + line-height:1em; +} + +.logoR { + background-size: 120px 45px; +} + +.image { + max-width: calc(1.1*var(--width)); + max-height: calc(0.7*var(--height)); +} + +.flag { + width: calc(1.20*var(--width)); + height: var(--height); + box-shadow: inset 0px 0px 10px #000; + background-size: 100% 100% !important ; + position: absolute; +} +.score { + width: 125px; + height: 75px; + margin: 0px; + + animation-name: score; + animation-duration: 1.5s; + background: linear-gradient(rgba(72,72,72,0.9),rgba(35,35,35,0.9)); +} + + +.flex { + margin-left: 10px; + justify-content: flex-start; +} +.fix { + position: absolute; + right: 0; + margin-right: 10px; +} + +.right { + transform: skew(35deg); +} + +.left { + transform: skew(-35deg); +} + +.first { + position: absolute; + height: 45px; + display: flex; + justify-content: center; + align-items: center; + animation: first 20s 0s infinite; +} +.second { + position: absolute; + animation: second 20s 0s infinite; +} +@font-face { + font-family: Kimberly; + src: url(../../assets/fonts/Kimberly.ttf); +} +.top3 { + text-transform: uppercase; + font-family: 'Kimberly', sans-serif; + font-size: 84px; + font-weight: 700; + color: rgba(255, 255, 255, 1); + padding: 50px; + margin: 0; +} + +@keyframes namebar { + 0%, 25% { + width: 0px; + height: 0px; + } + 50% { + width: 0px; + height: 45px; + } + 100% { + width: 525px; + height: 45px; + } +} +@keyframes caster { + 0%, 25% { + width: 0px; + height: 0px; + } + 50% { + width: 0px; + height: 45px; + } + 100% { + width: 300px; + height: 45px; + } +} +@keyframes twitter { + 0%, 25% { + width: 0px; + height: 0px; + } + 50% { + width: 0px; + height: 35px; + } + 100% { + width: 225px; + height: 35px; + } +} + @keyframes round { + 0%, 50% { + height: 0px; + } + 100% { + height: 45px; + } + } + + @keyframes extension { + 0%, 25% { + width: 0px; + height: 0px; + } + 50% { + width: 0px; + height: 45px; + } + 75%, 100% { + width: 60px; + height: 45px; + } + } + +@keyframes score { + 0%, 25% { + width: 0px; + height: 0px; + } + 50% { + width: 0px; + height: 75px; + } + 100% { + width: 125px; + height: 75px; + } +} + + + +@keyframes first { + 0%, 100% { + margin-top: -100px; + } + 3%, 47% { + margin-top: 0; + } + 50% { + margin-top: -100px; + } +} + +@keyframes second { + 0%, 50%, 95%, 100% { + margin-top: 0; + } + 3% { + margin-top: 100px; + } + 47% { + margin-top: 100px; + } + } + + + \ No newline at end of file diff --git a/Punduction/overlays/ExampleOverlay/style-info.css b/Punduction/overlays/ExampleOverlay/style-info.css new file mode 100644 index 0000000..4d86048 --- /dev/null +++ b/Punduction/overlays/ExampleOverlay/style-info.css @@ -0,0 +1,348 @@ +html, +body { + font-family: 'PT Sans Narrow', sans-serif; + color: #eee; +} + +.grid-container { + height: 100%; + margin: 0; + animation: slide-down 1s; +} + +.grid-container { + display: grid; + grid-template-columns: 3fr 2fr 3fr; + grid-template-rows: 1fr 5fr 1fr; + height: 100vh; + gap: 1px 1px; + grid-template-areas: '. . .' 'Left-side Center Right-side' 'Left-info Center Right-info'; +} + +.Left-side { + grid-area: Left-side; + background: linear-gradient( + rgba(0, 0, 0, 0), + rgba(0, 0, 0, 0), + rgba(29, 161, 242, 1) + ); + background-size: 200% 200%; + margin: 15px; + animation: background 1s ease forwards; + animation-delay: 0s; +} + +.Right-side { + grid-area: Right-side; + background-image: linear-gradient( + rgba(0, 0, 0, 0), + rgba(0, 0, 0, 0), + rgba(255, 5, 80, 1) + ); + background-size: 200% 200%; + margin: 15px; + animation: background 1s ease forwards; + animation-delay: 0s; +} + +.Left-info { + grid-area: Left-info; + margin-top: 30vh; +} + +.Right-info { + grid-area: Right-info; + margin-top: 30vh; +} + +.Center { + grid-area: Center; + margin-top: 30vh; +} + +/* For presentation only, no need to copy the code below */ +/* .grid-container * { + border: 1px solid rgba(255, 0, 0, 0); + position: relative; +} */ + +/* .grid-container *:after { + content: attr(class); + position: absolute; + top: 0; + left: 0; +} */ + +.flex-container { + display: flex; + justify-content: center; + align-items: center; +} + +.box { + font-size: 1.5rem; + width: 50px; + height: 50px; + background: linear-gradient(rgba(15, 13, 22, 1), rgba(28, 23, 39, 0.8)); + border-width: 0px 0px 5px 0px; + border-style: solid; + border-radius: 50px; + display: flex; + align-items: center; + justify-content: center; + margin: 15px auto; + color: RGBA(238, 238, 238, 0); + opacity: 0; + animation: expand 1s forwards; + animation-delay: 1s; +} + +.empty-box { + font-size: 2rem; + width: 90%; + height: 50px; + border-width: 1px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.5); + display: flex; + align-items: center; + justify-content: center; + margin: 30px auto; + opacity: 0; + animation: expand 1s forwards; + animation-delay: 2.5s; +} + +.icon { + height: 35px; + margin: 0 20px 0 50px; +} + +.blue { + border-color: rgb(29, 161, 242); +} + +.red { + border-color: rgba(255, 5, 80); +} + +.red-text { + color: rgba(255, 5, 80); + margin: 0 10px; +} +.blue-text { + color: rgb(29, 161, 242); + margin: 0 10px; +} + +.title { + font-size: 2rem; + text-transform: uppercase; +} + +.large-text { + font-size: 2rem; + margin-bottom: 20px; +} + +.tilt-right { + transform: skew(20deg); +} +.tilt-left { + transform: skew(-20deg); + text-overflow: clip; +} + +.shadow { + text-shadow: 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), + 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.7), + 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.7), + 0 20px 20px rgba(0, 0, 0, 0.15); + opacity: 0; + animation: fade 1s forwards; + animation-delay: 1s; +} +.red-label { + background: linear-gradient(rgb(230, 4, 72), rgb(153, 4, 48)); + padding: 5px 10px 5px 10px; + text-transform: uppercase; + white-space: nowrap; + opacity: 0; + animation: expand-light 0.6s forwards; + animation-delay: 2s; +} + +.blue-label { + background: linear-gradient(rgb(16, 148, 230), rgb(4, 101, 161)); + padding: 5px 10px 5px 10px; + text-transform: uppercase; + white-space: nowrap; + opacity: 0; + animation: expand-light 0.6s forwards; + animation-delay: 2s; +} +.stat { + background: #eee; + color: rgba(15, 13, 22, 1); + max-width: 50%; + white-space: nowrap; + padding: 5px 15px 5px 15px; + opacity: 0; + animation: expand-dark 0.6s forwards; + animation-delay: 2s; +} + +.red-team { + background: linear-gradient(rgb(230, 4, 72), rgb(153, 4, 48)); + padding: 5px 10px 5px 10px; + text-transform: uppercase; + opacity: 0; + animation: expand-light 0.6s forwards; + animation-delay: 0.5s; +} + +.blue-team { + background: linear-gradient(rgb(16, 148, 230), rgb(4, 101, 161)); + padding: 5px 10px 5px 10px; + text-transform: uppercase; + opacity: 0; + animation: expand-light 0.6s forwards; + animation-delay: 0.5s; +} + +.name { + background: #eee; + color: rgba(15, 13, 22, 1); + padding: 5px 15px 5px 15px; + max-height: 50px; + opacity: 0; + animation: expand-dark 0.6s forwards; + animation-delay: 0.5s; + white-space: nowrap; +} + +.image { + max-width: 300px; + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +.character { + background-repeat: no-repeat; + background-size: 100%; + background-position: 50% 10vh; + border-width: 0 0 5px 0; + border-color: rgba(28, 23, 39, 0.8); + border-style: solid; +} + +.namebar { + width: 100%; + height: 100px; + background: rgba(0, 0, 0, 0.3); + border-left-width: 5px; + border-color: blue; +} + +.animation-none { + animation: none; +} + +@keyframes expand { + 0% { + opacity: 0; + width: 50px; + color: RGBA(238, 238, 238, 0); + border-radius: 50px; + } + 20% { + opacity: 1; + width: 50px; + color: RGBA(238, 238, 238, 0); + border-radius: 50px; + } + 60% { + width: 90%; + color: RGBA(238, 238, 238, 0); + border-radius: 0px; + } + 100% { + opacity: 1; + width: 90%; + color: RGBA(238, 238, 238, 1); + border-radius: 0px; + } +} + +@keyframes slide-down { + 0% { + opacity: 0; + margin-top: -100px; + } + 100% { + opacity: 1; + margin-top: 0px; + } +} + +@keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes expand-light { + 0% { + opacity: 0; + width: 0px; + color: RGBA(238, 238, 238, 0); + } + 50% { + opacity: 1; + color: RGBA(238, 238, 238, 0); + } + 75% { + opacity: 1; + color: RGBA(238, 238, 238, 1); + } + 100% { + opacity: 1; + width: 100%; + color: RGBA(238, 238, 238, 1); + } +} + +@keyframes expand-dark { + 0% { + opacity: 0; + color: rgba(15, 13, 22, 0); + } + 50% { + opacity: 1; + color: rgba(15, 13, 22, 0); + } + 75% { + opacity: 1; + color: rgba(15, 13, 22, 1); + } + 100% { + opacity: 1; + color: rgba(15, 13, 22, 1); + } +} +@keyframes background { + 0% { + background-position: 0% 0%; + } + 50% { + background-position: 0% 0%; + } + 100% { + background-position: 0% 50%; + } +}