{"id":3040,"date":"2021-12-08T15:35:45","date_gmt":"2021-12-08T08:35:45","guid":{"rendered":"https:\/\/khoahocthethao.vn\/?p=3040"},"modified":"2021-12-09T14:34:42","modified_gmt":"2021-12-09T07:34:42","slug":"elementor-3040","status":"publish","type":"post","link":"https:\/\/khoahocthethao.vn\/index.php\/2021\/12\/08\/elementor-3040\/","title":{"rendered":"Elementor #3040"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3040\" class=\"elementor elementor-3040\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4a7374d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4a7374d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b93db75\" data-id=\"b93db75\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-afb450b elementor-widget elementor-widget-heading\" data-id=\"afb450b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Xu\u1ea5t d\u1eef li\u1ec7u d\u01b0\u1edbi d\u1ea1ng bi\u1ec3u \u0111\u1ed3 \u1edf d\u01b0\u1edbi \u0111\u00e2y<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f269754 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f269754\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-de65f1c\" data-id=\"de65f1c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f0b1e3b elementor-widget elementor-widget-html\" data-id=\"f0b1e3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    \r\n    \r\n    <link rel=\"shortcut icon\" type=\"image\/png\" href=\"favicon.png\" \/>\r\n    <link\r\n      rel=\"stylesheet\"\r\n      href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.1\/css\/all.min.css\"\r\n      integrity=\"sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==\"\r\n      crossorigin=\"anonymous\"\r\n    \/>\r\n    <link rel=\"stylesheet\" href=\"style.css\" \/>\r\n  <\/head>\r\n  <body>\r\n    <div class=\"navigation-container\">\r\n      <nav>\r\n\r\n        <div class=\"change-video\">\r\n          <form id=\"submit\">\r\n            <input\r\n              type=\"text\"\r\n              id=\"change-video-input\"\r\n              placeholder=\"Enter YouTube URL\"\/>\r\n            <button class=\"large-btn\" id=\"change-video-btn\" type=\"submit\">\r\n              Change Video <br \/><span class=\"small\">(Deletes Events)<\/span>\r\n            <\/button>\r\n          <\/form>\r\n        <\/div>\r\n        <select name=\"pitches\" id=\"pitchSelector\">\r\n          <option selected disabled>Thay S\u00e2n<\/option>\r\n          <option value=\"football\">Football<\/option>\r\n          <option value=\"handball\">Handball<\/option>\r\n          <option value=\"rugby\">Rugby<\/option>\r\n          <option value=\"americanfootball\">American Football<\/option>\r\n          <option value=\"basketball\">Basketball<\/option>\r\n          <option value=\"gaa\">GAA<\/option>\r\n          <option value=\"futsal\">Futsal<\/option>\r\n        <\/select>\r\n      <\/nav>\r\n    <\/div>\r\n    <div class=\"main-container\">\r\n      <div class=\"tools-container\">\r\n        <ul>\r\n          <li id=\"help\">\r\n            <i class=\"fa fa-question-circle fa-2x\"><\/i>\r\n          <\/li>\r\n          <li>\r\n            <a target=\"_blank\" href=\"https:\/\/khoahocthethao.vn\/\"\r\n              ><i class=\"fab fa-facebook fa-2x\"><\/i\r\n            ><\/a>\r\n          <\/li>\r\n          <li>\r\n            <a href=\"https:\/\/khoahocthethao.vn\/\" target=\"_blank\"\r\n              ><i class=\"fas fa-chart-pie fa-2x\"><\/i>\r\n            <\/a>\r\n          <\/li>\r\n          <li>\r\n            <a href=\"https:\/\/khoahocthethao.vn\/\" target=\"_blank\"\r\n              ><i class=\"fas fa-mobile-alt fa-2x\"><\/i\r\n            ><\/a>\r\n          <\/li>\r\n        <\/ul>\r\n        <div class=\"logo-container\">\r\n          <a href=\"http:\/\/khoahocthethao.vn\" target=\"_blank\"\r\n            ><\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"video-container\">\r\n        <div class=\"player-timeline-container\" id=\"player-timeline-container\">\r\n          <div class=\"player\" id=\"player\"><\/div>\r\n          <div id=\"timeline\" class=\"timeline\">\r\n            <input\r\n              type=\"range\"\r\n              id=\"progress\"\r\n              class=\"progress\"\r\n              min=\"0\"\r\n              max=\"100\"\r\n              step=\"0.1\"\r\n              value=\"0\"\r\n            \/>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"events-container\">\r\n          <div class=\"table-container\">\r\n            <table id=\"results-table\">\r\n              <thead>\r\n                <tr>\r\n                  <th>Team<\/th>\r\n                  <th>Player<\/th>\r\n                  <th>Event<\/th>\r\n                  <th>Mins<\/th>\r\n                  <th>Secs<\/th>\r\n                  <th>X<\/th>\r\n                  <th>Y<\/th>\r\n                  <th>X2<\/th>\r\n                  <th>Y2<\/th>\r\n                  <th>\u274c<\/th>\r\n                <\/tr>\r\n              <\/thead>\r\n              <tbody id=\"results-data\"><\/tbody>\r\n            <\/table>\r\n          <\/div>\r\n          <div class=\"event-navigation\" id=\"event-navigation\">\r\n            <button\r\n              class=\"btn\"\r\n              id=\"export\"\r\n              onclick=\"exportTableToCSV('events.csv')\"\r\n            >\r\n              Export CSV\r\n            <\/button>\r\n            <button class=\"btn\" id=\"delLast\" onclick=\"delLast()\">\r\n              Delete last\r\n            <\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"data-container\">\r\n        <div class=\"tag-container\">\r\n          <div class=\"tag-navigation\">\r\n            <button class=\"btn\" id=\"edit-tags\" onclick=\"eventsEditable()\">\r\n              Edit tag\r\n            <\/button>\r\n            <button class=\"btn\" id=\"edit-tags\" onclick=\"addTag()\">\r\n              Add tag\r\n            <\/button>\r\n          <\/div>\r\n          <div class=\"tag-button-container\" id=\"tag-button-container\">\r\n            <div class=\"team-tags\">\r\n              <div class=\"home-tags\">\r\n                <p\r\n                  class=\"team-tag tag\"\r\n                  id=\"selected-team\"\r\n                  contenteditable=\"false\"\r\n                >\r\n                  Home\r\n                <\/p>\r\n                <p class=\"home-player player-tag tag\">H1<\/p>\r\n                <p class=\"home-player player-tag tag\">H2<\/p>\r\n                <p class=\"home-player player-tag tag\">H3<\/p>\r\n                <p class=\"home-player player-tag tag\">H4<\/p>\r\n                <p class=\"home-player player-tag tag\">H5<\/p>\r\n                <p class=\"home-player player-tag tag\">H6<\/p>\r\n                <p class=\"home-player player-tag tag\">H7<\/p>\r\n                <p class=\"home-player player-tag tag\">H8<\/p>\r\n                <p class=\"home-player player-tag tag\">H9<\/p>\r\n                <p class=\"home-player player-tag tag\">H10<\/p>\r\n                <p class=\"home-player player-tag tag\">H11<\/p>\r\n                <p class=\"home-player player-tag tag\">H12<\/p>\r\n                <p class=\"home-player player-tag tag\">H13<\/p>\r\n                <p class=\"home-player player-tag tag\">H14<\/p>\r\n                <p class=\"home-player player-tag tag\">H15<\/p>\r\n              <\/div>\r\n\r\n              <div class=\"away-tags\">\r\n                <p class=\"team-tag tag\">Away<\/p>\r\n                <p class=\"away-player player-tag tag\">A1<\/p>\r\n                <p class=\"away-player player-tag tag\">A2<\/p>\r\n                <p class=\"away-player player-tag tag\">A3<\/p>\r\n                <p class=\"away-player player-tag tag\">A4<\/p>\r\n                <p class=\"away-player player-tag tag\">A5<\/p>\r\n                <p class=\"away-player player-tag tag\">A6<\/p>\r\n                <p class=\"away-player player-tag tag\">A7<\/p>\r\n                <p class=\"away-player player-tag tag\">A8<\/p>\r\n                <p class=\"away-player player-tag tag\">A9<\/p>\r\n                <p class=\"away-player player-tag tag\">A10<\/p>\r\n                <p class=\"away-player player-tag tag\">A11<\/p>\r\n                <p class=\"away-player player-tag tag\">A12<\/p>\r\n                <p class=\"away-player player-tag tag\">A13<\/p>\r\n                <p class=\"away-player player-tag tag\">A14<\/p>\r\n                <p class=\"away-player player-tag tag\">A15<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"tags\" id=\"tags\">\r\n              <div\r\n                class=\"tag\"\r\n                id=\"selected\"\r\n                contenteditable=\"false\"\r\n                onclick=\"changeEventFocus(this)\"\r\n              >\r\n                <p>Shot<\/p>\r\n              <\/div>\r\n              <div\r\n                class=\"tag\"\r\n                contenteditable=\"false\"\r\n                onclick=\"changeEventFocus(this)\"\r\n              >\r\n                <p>Shot Assist<\/p>\r\n              <\/div>\r\n              <div\r\n                class=\"tag\"\r\n                contenteditable=\"false\"\r\n                onclick=\"changeEventFocus(this)\"\r\n              >\r\n                <p>Dribble<\/p>\r\n              <\/div>\r\n              <div\r\n                class=\"tag\"\r\n                contenteditable=\"false\"\r\n                onclick=\"changeEventFocus(this)\"\r\n              >\r\n                <p>Cross<\/p>\r\n              <\/div>\r\n              <div\r\n                class=\"tag\"\r\n                contenteditable=\"false\"\r\n                onclick=\"changeEventFocus(this)\"\r\n              >\r\n                <p>Pass<\/p>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"pitch-container\" id=\"pitch-container\">\r\n          <div class=\"pitch-placeholder\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    \r\n    <div class=\"notification-container\" id=\"notification-container\"><\/div>\r\n    <script src=\"pitches.js\"><\/script>\r\n    <script src=\"script.js\"><\/script>\r\n<style>@import url('https:\/\/fonts.googleapis.com\/css2?family=Lato:wght@300;400;700&display=swap');\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Graduate&display=swap');\r\n\r\n:root {\r\n  --themeColOne: #502274;\r\n  --themeColTwo: rgb(226, 226, 226);\r\n  --themeColThree: #d8dbd7;\r\n  --themeColFour: #12223D;\r\n  --themeColFive: #3777ab;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n  font-family: 'Lato', sans-serif;\r\n  overflow-x: none;\r\n}\r\n\r\n.btn {\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);\r\n}\r\n\r\nbutton {\r\n  border: 1px solid var(--themeColFive);\r\n  padding: 2px 8px;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton:hover {\r\n  background-color: var(--themeColTwo);\r\n}\r\n\r\nbutton:active,\r\nbutton:focus,\r\nbutton:focus:active {\r\n  outline: 0;\r\n  box-shadow: none;\r\n}\r\n\r\nbody {\r\n   \r\n}\r\n\r\n.navigation-container {\r\n  padding-top: 10px;\r\n  height: 100px;\r\n  width: 100%;\r\n  border-bottom: 2px solid var(--themeColOne);\r\n  background-color: var(--themeColFive);\r\n  color: #fff;\r\n  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\nnav {\r\n  width: 100%;\r\n  margin: 0 auto;\r\n}\r\n\r\nnav h1 {\r\n  margin: 0;\r\n  padding: 0;\r\n  font-weight: 700;\r\n}\r\n\r\nnav * {\r\n  display: inline-block;\r\n}\r\n\r\n.change-video {\r\n  vertical-align: top;\r\n  margin-left: 30px;\r\n  width: 60%;\r\n  height: 60px;\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);\r\n}\r\n\r\n.change-video form {\r\n  position: relative;\r\n  width: 100%;\r\n  padding-left: 5%;\r\n  height: 100%;\r\n  background-color: white;\r\n  margin: 0 auto;\r\n}\r\n\r\n.change-video input {\r\n  width: 100%;\r\n  background-color: #fff;\r\n  border: 0;\r\n  border-radius: 10px;\r\n}\r\n\r\n.change-video input:focus {\r\n  outline: 0;\r\n}\r\n\r\n.change-video button {\r\n  position: absolute;\r\n  top: 0px;\r\n  right: 0px;\r\n  height: 100%;\r\n  background-color: #ddd;\r\n  border: 0;\r\n  box-shadow: 0;\r\n}\r\n\r\n.change-video button:hover {\r\n  background-color: rgb(211, 211, 211);\r\n}\r\n\r\n.change-video button:hover span {\r\n  background-color: rgb(211, 211, 211);\r\n  color: var(--themeColOne);\r\n}\r\n\r\n#pitchSelector {\r\n  position: absolute;\r\n  left: 70%;\r\n  height: 60px;\r\n  width: 190px;\r\n}\r\n\r\n\r\n\r\nbutton:active,\r\nbutton:focus,\r\nbutton:focus:active {\r\n  outline: 0;\r\n}\r\n\r\n.small {\r\n  font-size: 12px;\r\n  color: darkgray;\r\n}\r\n\r\n.main-container {\r\n  width: 100%;\r\n  max-width: 1400px;\r\n  height: 95vh;\r\n  max-height: 2000px;\r\n  background-color: var(--themeColTwo);\r\n  margin: 0 auto;\r\n  padding-top: 5px;\r\n  padding-left: 5%;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-content: space-between;\r\n  box-shadow: 0px 0px 21px 1px rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.tools-container {\r\n  position: absolute;\r\n  width: 6%;\r\n  left: 0;\r\n  top: 0;\r\n  height: 100%;\r\n  background-color: var(--themeColFour);\r\n}\r\n\r\n.tools-container ul {\r\n  width: 100%;\r\n  margin: 0 auto;\r\n  padding: 0;\r\n}\r\n\r\n.tools-container ul li {\r\n  list-style: none;\r\n  color: #fff;\r\n  margin: 30px auto;\r\n  padding: 10px 0;\r\n  text-align: center;\r\n  position: relative;\r\n  cursor: pointer;\r\n  width: 75%;\r\n}\r\n\r\n.tools-container ul li i {\r\n  color: #fff;\r\n}\r\n\r\n.tools-container ul li a:visited {\r\n  color: #fff;\r\n}\r\n\r\n.tools-container ul li:hover {\r\n  background-color: rgba(24, 24, 24, 0.075);\r\n}\r\n\r\nli img {\r\n  width: 80%;\r\n  margin: 0 auto;\r\n}\r\n\r\n.logo-container {\r\n  position: absolute;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 5%;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  width: 85%;\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\n\r\n.logo-container a img,\r\n.logo-container a {\r\n  width: 100%;\r\n  margin: 0 auto;\r\n}\r\n\r\n.video-container {\r\n  width: 95%;\r\n  height: 50%;\r\n  padding: 20px;\r\n  margin: 0 auto;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-around;\r\n}\r\n\r\n.player-timeline-container {\r\n  width: 45%;\r\n  background-color: rgb(255, 251, 251);\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);\r\n}\r\n\r\n.player {\r\n  width: 100%;\r\n  height: 90%;\r\n}\r\n\r\n.timeline {\r\n  width: 100%;\r\n  height: 40px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  margin-top: -6px;\r\n  background-color: transparent;\r\n}\r\n\r\n.timeline input {\r\n  width: 100%;\r\n  margin: 0 auto;\r\n  cursor: pointer;\r\n}\r\n\r\n.timeline-piece {\r\n  position: absolute;\r\n  top: 20%;\r\n  height: 60%;\r\n  width: 1px;\r\n}\r\n\r\n.home-timeline-piece {\r\n  background-color: var(--themeColOne);\r\n}\r\n\r\n.away-timeline-piece {\r\n  background-color: var(--themeColFive);\r\n}\r\n\r\n.change-video button:active {\r\n  outline: 0;\r\n}\r\n\r\n.events-container {\r\n  width: 45%;\r\n  height: 100%;\r\n}\r\n\r\n.table-container {\r\n  background-color: #fff;\r\n  overflow-y: scroll;\r\n  height: 85%;\r\n  max-height: 85%;\r\n  padding-bottom: 10px;\r\n  width: 100%;\r\n  margin: 0 auto;\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);\r\n}\r\n\r\n.events-container table {\r\n  max-height: 100%;\r\n  min-width: 100%;\r\n  margin: 0 auto;\r\n}\r\n\r\n.events-container table button {\r\n  box-shadow: none;\r\n  border: 1px solid var(--themeColFour);\r\n}\r\n\r\nth {\r\n  background-color: var(--themeColFive);\r\n  color: #fff;\r\n  height: 250px;\r\n}\r\n\r\nth,\r\ntd,\r\ntr {\r\n  border-bottom: 1px solid #ddd;\r\n  height: 25px;\r\n  padding: 0;\r\n}\r\n\r\ntd {\r\n  text-align: center;\r\n}\r\n\r\ntr:nth-child(even) {\r\n  background-color: var(--themeColThree);\r\n}\r\n\r\ntr:hover {\r\n  background-color: var(--themeColFour);\r\n  color: white;\r\n  cursor: pointer;\r\n}\r\n\r\n.event-navigation {\r\n  padding: 15px;\r\n  margin: 0 auto;\r\n  width: 90%;\r\n}\r\n\r\n.event-navigation button {\r\n  margin-left: 10px;\r\n}\r\n\r\n.data-container {\r\n  padding: 1% 20px 0 20px;\r\n  width: 95%;\r\n  height: 45%;\r\n  margin: 0 auto;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-around;\r\n}\r\n\r\n.tag-container {\r\n  width: 45%;\r\n  min-height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  position: relative;\r\n  background-color: #fff;\r\n}\r\n\r\n.tag-navigation {\r\n  position: absolute;\r\n  bottom: 30px;\r\n  right: 36px;\r\n  background-color: none;\r\n  padding: 5px 0;\r\n}\r\n\r\n.tag-navigation p {\r\n  display: none;\r\n}\r\n\r\n.tag-navigation p.show {\r\n  display: inline;\r\n}\r\n\r\n.tag-button-container {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  height: 100%;\r\n  width: 100%;\r\n  margin: 0 auto;\r\n  padding: 15px 10px 0 10px;\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);\r\n}\r\n\r\n.team-tags {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  width: 70%;\r\n  box-shadow: inset 0 -10px 10px -15px #000000;\r\n}\r\n\r\n.home-tags,\r\n.away-tags {\r\n  width: 40%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: 300%;\r\n}\r\n\r\n.tags,\r\n.team-tags {\r\n  width: 60%;\r\n  overflow-y: scroll;\r\n  height: 100%;\r\n}\r\n\r\n.team-tag,\r\n.player-tag {\r\n  width: 80%;\r\n  text-align: center;\r\n}\r\n\r\n.team-tag {\r\n  background-color: var(--themeColThree);\r\n}\r\n\r\n.player-tag {\r\n  background-color: var(--themeColFour);\r\n  color: white;\r\n}\r\n\r\n.tag,\r\n.team-tag,\r\n.player-tag {\r\n  cursor: pointer;\r\n  max-width: 130px;\r\n  margin: 5px auto;\r\n  padding: 2px;\r\n  border: 1px solid white;\r\n  border-radius: 1px;\r\n  white-space: nowrap;\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);\r\n  overflow-x: hidden;\r\n  overflow-y: hidden;\r\n}\r\n\r\n.tag br,\r\n.team-tag br,\r\n.player-tag br {\r\n  display: none;\r\n}\r\n\r\n.tag:active,\r\n.team-tag:active,\r\n.tag:focus,\r\n.team-tag:focus,\r\n.tag:focus:active,\r\n.team-tag:focus:active {\r\n  box-shadow: none;\r\n}\r\n\r\n.tag p,\r\n.team-tag p,\r\n.player-tag p {\r\n  padding: 0;\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\n\r\n.editable {\r\n  \r\n  background-color: var(--themeColFive);\r\n  color: white !important;\r\n}\r\n\r\n[contenteditable='true'].tag,\r\n[contenteditable='true'].team-tag {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n}\r\n\r\n[contenteditable='true'].tag br,\r\n[contenteditable='true'].team-tag br {\r\n  display: none;\r\n}\r\n\r\n#selected,\r\n#selected-team,\r\n#selected-player {\r\n  color: var(--themeColOne);\r\n  font-weight: 700;\r\n  border: 1px solid var(--themeColOne);\r\n}\r\n\r\n.pitch-container {\r\n  height: 100%;\r\n  width: 45%;\r\n  padding: 0.1% 0 0.1% 0;\r\n  border: 0;\r\n  position: relative;\r\n\r\n  -webkit-box-shadow: 6px 4px 8px -1px rgba(115, 115, 115, 1);\r\n  -moz-box-shadow: 6px 4px 8px -1px rgba(115, 115, 115, 1);\r\n  box-shadow: 6px 4px 8px -1px rgba(115, 115, 115, 1);\r\n}\r\n\r\n.notification-container {\r\n  background-color: rgba(243, 243, 243, 0.945);\r\n  border-radius: 0 0 10px 10px;\r\n  padding: 15px 10px;\r\n  position: absolute;\r\n  top: -100px;\r\n  right: 5%;\r\n  font-size: 18px;\r\n  color: var(--themeColFive);\r\n  width: 370px;\r\n  text-align: center;\r\n  transition: transform 0.3s ease-in-out;\r\n  transform: translateY(-100px);\r\n}\r\n\r\n.notification-container p {\r\n  margin: 0;\r\n}\r\n\r\n.notification-container.show {\r\n  transform: translateY(100px);\r\n  transition: transform 0.3s ease-in-out;\r\n}\r\n\r\n\/* PITCH!!! *\/\r\n\r\n.football-pitch {\r\n  width: 100%;\r\n  position: absolute;\r\n  top: 50%;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n  padding-top: 65%;\r\n  transform: translateY(-50%);\r\n  z-index: 1;\r\n}\r\n\r\n.marking {\r\n  background: #ffffff;\r\n  position: absolute;\r\n  z-index: 2;\r\n}\r\n\r\n.outline.marking {\r\n  border: 4px solid #ffffff;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: transparent;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n}\r\n\r\n.football-center-line {\r\n  width: 4px;\r\n  height: 100%;\r\n  top: 0;\r\n  left: calc(50% - 4px \/ 2);\r\n}\r\n\r\n.football-center-circle {\r\n  width: 90px;\r\n  height: 90px;\r\n  border-radius: 90px;\r\n  border: 4px solid #ffffff;\r\n  background: none;\r\n  top: calc(50% - 90px \/ 2);\r\n  left: calc(50% - 90px \/ 2);\r\n}\r\n\r\n.box {\r\n  top: 21.5%;\r\n  width: 15.7%;\r\n  height: 57%;\r\n  background: transparent;\r\n  border: 4px solid #ffffff;\r\n}\r\n.box.left {\r\n  left: 0;\r\n}\r\n.box.right {\r\n  right: 0;\r\n}\r\n.box.small {\r\n  top: 36%;\r\n  width: 5.23%;\r\n  height: 28%;\r\n}\r\n.box-d {\r\n  top: 35%;\r\n  width: 15%;\r\n  height: 30%;\r\n  background: transparent;\r\n  border: 4px solid #ffffff;\r\n}\r\n.box-d.left {\r\n  left: 5%;\r\n  border-left: none;\r\n  border-bottom-right-radius: 1000px;\r\n  border-top-right-radius: 1000px;\r\n  clip-path: inset(0 0 0 70%);\r\n}\r\n.box-d.right {\r\n  right: 5%;\r\n  border-right: none;\r\n  border-bottom-left-radius: 1000px;\r\n  border-top-left-radius: 1000px;\r\n  clip-path: inset(0 70% 0 0);\r\n}\r\n.spot {\r\n  width: 4px;\r\n  height: 4px;\r\n  border-radius: 4px;\r\n  top: calc(50% - 4px \/ 2);\r\n}\r\n.spot.left {\r\n  left: 10.4%;\r\n}\r\n.spot.right {\r\n  right: 10.4%;\r\n}\r\n.spot.center {\r\n  width: 8px;\r\n  height: 8px;\r\n  left: calc(50% - 4px);\r\n}\r\n.corner {\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 40px;\r\n  background: none;\r\n  border: 4px solid #ffffff;\r\n}\r\n.corner.top {\r\n  top: -20px;\r\n}\r\n.corner.left {\r\n  left: -20px;\r\n}\r\n.corner.bottom {\r\n  bottom: -20px;\r\n}\r\n.corner.right {\r\n  right: -20px;\r\n}\r\n.grass {\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: #358626;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n}\r\n.grass:before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 2;\r\n  \/* background-image: url('data:image\/png;base64, iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl\/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T\/hRo9\/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty\/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz\/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF\/C1M8uP\/ZtYdiuj26UdAdQQSXQErwSOMzt\/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3\/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W\/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z\/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp\/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip\/ppIhA1\/mSZ\/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK\/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+\/q\/AWR0tJzYHRULOa4MP+W\/HfGadZUbfw177G7j\/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT\/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2\/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG\/D86ruKEauBjvH5xy6um\/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH\/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp\/3fEV5a+4wz\/\/6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4\/wuqcXY47QILbgAAAABJRU5ErkJggg=='); *\/\r\n}\r\n.grass:after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 1;\r\n  background: repeating-linear-gradient(\r\n    to right,\r\n    rgba(0, 0, 0, 0.1),\r\n    rgba(0, 0, 0, 0.1) 5%,\r\n    transparent 5%,\r\n    transparent 10%\r\n  );\r\n}\r\n\r\n\/* American Football *\/\r\n\r\n.amfootball-pitch {\r\n  width: 100%;\r\n  position: absolute;\r\n  top: 50%;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n  padding-top: 44%;\r\n  transform: translateY(-50%);\r\n  background-color: #11bf7d;\r\n  z-index: 2;\r\n}\r\n\r\n.tdzone {\r\n  width: 8.3%;\r\n  height: 100%;\r\n  background-color: #502274;\r\n  top: 0;\r\n  position: absolute;\r\n  border: 1px solid #ffffff;\r\n  z-index: -2;\r\n}\r\n\r\n.tdzone.right {\r\n  right: 0;\r\n}\r\n\r\n.amline.marking {\r\n  position: absolute;\r\n  width: 2px;\r\n  height: 100%;\r\n  top: 0;\r\n  z-index: -1;\r\n}\r\n\r\n.amline.marking.lite {\r\n  width: 0.5px;\r\n  border: 0.05px solid #4fa16f;\r\n}\r\n\r\n.tenline {\r\n  left: calc((8.3% * 1) + 8.3%);\r\n}\r\n\r\n.twentyline {\r\n  left: calc((8.3% * 2) + 8.3%);\r\n}\r\n\r\n.thirtyline {\r\n  left: calc((8.3% * 3) + 8.3%);\r\n}\r\n\r\n.fortyline {\r\n  left: calc((8.3% * 4) + 8.3%);\r\n}\r\n\r\n.fiftyline {\r\n  left: calc((8.3% * 5) + 8.3%);\r\n}\r\n\r\n.sixtyline {\r\n  left: calc((8.3% * 6) + 8.3%);\r\n}\r\n\r\n.seventyline {\r\n  left: calc((8.3% * 7) + 8.3%);\r\n}\r\n\r\n.eightyline {\r\n  left: calc((8.3% * 8) + 8.3%);\r\n}\r\n\r\n.ninetyline {\r\n  left: calc((8.3% * 9) + 8.3%);\r\n}\r\n\r\n.fiveline {\r\n  left: calc((4.15% * 1) + 8.3%);\r\n}\r\n\r\n.fifteenline {\r\n  left: calc((4.15% * 3) + 8.3%);\r\n}\r\n.twentyfiveline {\r\n  left: calc((4.15% * 5) + 8.3%);\r\n}\r\n.thirtyfiveline {\r\n  left: calc((4.15% * 7) + 8.3%);\r\n}\r\n.fortyfiveline {\r\n  left: calc((4.15% * 9) + 8.3%);\r\n}\r\n.fiftyfiveline {\r\n  left: calc((4.15% * 11) + 8.3%);\r\n}\r\n.sixtyfiveline {\r\n  left: calc((4.15% * 13) + 8.3%);\r\n}\r\n.seventyfiveline {\r\n  left: calc((4.15% * 15) + 8.3%);\r\n}\r\n.eightyfiveline {\r\n  left: calc((4.15% * 17) + 8.3%);\r\n}\r\n.ninetyfiveline {\r\n  left: calc((4.15% * 19) + 8.3%);\r\n}\r\n\r\n.amtext {\r\n  color: white;\r\n  position: absolute;\r\n  top: 2%;\r\n  z-index: -1;\r\n}\r\n\r\n.amtext > p {\r\n  font-family: 'Graduate', cursive;\r\n}\r\n\r\n.gopython {\r\n  color: #ffffff30;\r\n  transform: rotate(270deg);\r\n  left: -8%;\r\n  top: 35%;\r\n}\r\n\r\n.amtext.tentext {\r\n  left: calc((8.3% * 1) + 6.3%);\r\n}\r\n\r\n.amtext.thirtytext {\r\n  left: calc((8.3% * 3) + 6.3%);\r\n}\r\n\r\n.amtext.fiftytext {\r\n  left: calc((8.3% * 5) + 6.3%);\r\n}\r\n\r\n.amtext.seventytext {\r\n  left: calc((8.3% * 7) + 6.3%);\r\n}\r\n\r\n.amtext.ninetytext {\r\n  left: calc((8.3% * 9) + 6.3%);\r\n}\r\n\r\n\/* Handball *\/\r\n\/* Uses outline & centre line from football *\/\r\n\r\n.handball-pitch {\r\n  width: 100%;\r\n  position: absolute;\r\n  top: 50%;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n  padding-top: 50%;\r\n  transform: translateY(-50%);\r\n  background-color: #2e6fd9;\r\n  z-index: 2;\r\n}\r\n\r\n.center-line.handball {\r\n  z-index: -1;\r\n}\r\n\r\n.four-meter.marking.left {\r\n  position: absolute;\r\n  top: 48.5%;\r\n  height: 3%;\r\n  width: 0.5%;\r\n  left: 10%;\r\n  z-index: -1;\r\n}\r\n\r\n.four-meter.marking.right {\r\n  position: absolute;\r\n  top: 48.5%;\r\n  height: 3%;\r\n  width: 0.5%;\r\n  right: 10%;\r\n  z-index: -1;\r\n}\r\n\r\n.seven-meter.marking.left {\r\n  position: absolute;\r\n  top: 47%;\r\n  height: 6%;\r\n  width: 0.5%;\r\n  left: 17.5%;\r\n  z-index: -1;\r\n}\r\n\r\n.seven-meter.marking.right {\r\n  position: absolute;\r\n  top: 47%;\r\n  height: 6%;\r\n  width: 0.5%;\r\n  right: 17.5%;\r\n  z-index: -1;\r\n}\r\n\r\n.handball-box.left {\r\n  position: absolute;\r\n  left: -15%;\r\n  top: 12.5%;\r\n  width: 30%;\r\n  height: 75%;\r\n  border: 3px solid white;\r\n  border-top-right-radius: 42%;\r\n  border-bottom-right-radius: 42%;\r\n}\r\n\r\n.handball-box.right {\r\n  position: absolute;\r\n  right: -15%;\r\n  top: 12.5%;\r\n  width: 30%;\r\n  height: 75%;\r\n  border: 3px solid white;\r\n  border-top-left-radius: 42%;\r\n  border-bottom-left-radius: 42%;\r\n}\r\n\r\n.handball-box-big.left {\r\n  position: absolute;\r\n  left: -15%;\r\n  top: 0;\r\n  width: 39%;\r\n  height: 100%;\r\n  border: 3px dashed white;\r\n  border-top-right-radius: 42%;\r\n  border-bottom-right-radius: 42%;\r\n}\r\n\r\n.handball-box-big.right {\r\n  position: absolute;\r\n  right: -15%;\r\n  top: 0;\r\n  width: 39%;\r\n  height: 100%;\r\n  border: 3px dashed white;\r\n  border-top-left-radius: 42%;\r\n  border-bottom-left-radius: 42%;\r\n}\r\n\r\n.hover-marker {\r\n  position: absolute;\r\n  transform: translate(-50%, -50%);\r\n  width: 10px;\r\n  height: 10px;\r\n  border-radius: 50%;\r\n  background-color: #dcc2f0;\r\n  display: none;\r\n}\r\n\r\n#hover-marker1 {\r\n  top: 50%;\r\n  left: 50%;\r\n}\r\n\r\n#hover-marker2 {\r\n  top: 50%;\r\n  left: 50%;\r\n}\r\n\r\n\/* Rugby *\/\r\n.rugby-pitch {\r\n  width: 100%;\r\n  position: absolute;\r\n  top: 50%;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n  padding-top: 49%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.dashed-marking {\r\n  border: 1px dashed #ffffff80;\r\n  background: transparent;\r\n  position: absolute;\r\n  z-index: 2;\r\n}\r\n\r\n.five-line-left {\r\n  height: 100%;\r\n  width: 1px;\r\n  top: 0;\r\n  left: 18.8%;\r\n}\r\n\r\n.five-line-right {\r\n  height: 100%;\r\n  width: 1px;\r\n  top: 0;\r\n  left: 81.2%;\r\n}\r\n\r\n.ten-line-left {\r\n  height: 100%;\r\n  width: 1px;\r\n  top: 0;\r\n  left: 43%;\r\n}\r\n\r\n.ten-line-right {\r\n  height: 100%;\r\n  width: 1px;\r\n  top: 0;\r\n  left: 57%;\r\n}\r\n\r\n.near-line-top {\r\n  width: 62.5%;\r\n  height: 1px;\r\n  top: 7.1%;\r\n  left: 18.8%;\r\n}\r\n\r\n.near-line-bottom {\r\n  width: 62.5%;\r\n  height: 1px;\r\n  top: 92.9%;\r\n  left: 18.8%;\r\n}\r\n\r\n.far-line-top {\r\n  width: 62.5%;\r\n  height: 1px;\r\n  top: 21.3%;\r\n  left: 18.8%;\r\n}\r\n\r\n.far-line-bottom {\r\n  width: 62.5%;\r\n  height: 1px;\r\n  top: 78.7%;\r\n  left: 18.8%;\r\n}\r\n\r\n.rugby-pitch .center-line {\r\n  width: 2px;\r\n}\r\n\r\n.try-line-left {\r\n  width: 2px;\r\n  height: 100%;\r\n  top: 0;\r\n  left: 15.2%;\r\n}\r\n\r\n.try-line-right {\r\n  width: 2px;\r\n  height: 100%;\r\n  top: 0;\r\n  left: 84.8%;\r\n}\r\n\r\n.twentytwo-line-left {\r\n  width: 2px;\r\n  height: 100%;\r\n  top: 0;\r\n  left: 30.5%;\r\n}\r\n\r\n.twentytwo-line-right {\r\n  width: 2px;\r\n  height: 100%;\r\n  top: 0;\r\n  left: 69.5%;\r\n}\r\n\r\n\/* Basketball *\/\r\n\r\n.basketball-pitch {\r\n  width: 100%;\r\n  position: absolute;\r\n  top: 50%;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n  padding-top: 53%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.basketball-box.left {\r\n  position: absolute;\r\n  left: -12%;\r\n  top: 7.5%;\r\n  width: 40.75%;\r\n  height: 85%;\r\n  border: 3px solid white;\r\n  border-top-right-radius: 50%;\r\n  border-bottom-right-radius: 50%;\r\n}\r\n\r\n.basketball-box.right {\r\n  position: absolute;\r\n  right: -12%;\r\n  top: 7.5%;\r\n  width: 40.75%;\r\n  height: 85%;\r\n  border: 3px solid white;\r\n  border-top-left-radius: 50%;\r\n  border-bottom-left-radius: 50%;\r\n}\r\n\r\n.hoop-box {\r\n  position: fixed;\r\n  top: 33.5%;\r\n  width: 20.7%;\r\n  height: 33.6%;\r\n  background: #502274;\r\n  border: 2px solid #ffffff;\r\n}\r\n\r\n.hoop-box.left {\r\n  left: 0;\r\n}\r\n\r\n.hoop-box.right {\r\n  right: 0;\r\n}\r\n\r\n.hoop {\r\n  position: fixed;\r\n  width: 1.5%;\r\n  height: 3%;\r\n  border-radius: 50%;\r\n  border: 1px solid #ffffff;\r\n  background: transparent;\r\n  z-index: 0;\r\n  top: 48.5%;\r\n}\r\n\r\n.hoop.left {\r\n  left: 5.63%;\r\n}\r\n\r\n.hoop.right {\r\n  right: 5.63%;\r\n}\r\n\r\n.backboard {\r\n  position: absolute;\r\n  top: 44%;\r\n  height: 12%;\r\n  width: 0.4%;\r\n  background-color: white;\r\n}\r\n\r\n.backboard.left {\r\n  left: 4.63%;\r\n}\r\n\r\n.backboard.right {\r\n  right: 4.63%;\r\n}\r\n\r\n.hoop-circle {\r\n  position: absolute;\r\n  top: 42%;\r\n  width: 6%;\r\n  height: 16%;\r\n  background: transparent;\r\n  border: 1px solid #aaaaaa;\r\n}\r\n\r\n.hoop-circle.left {\r\n  left: 4.63%;\r\n  border-top-right-radius: 100px;\r\n  border-bottom-right-radius: 100px;\r\n  border-left: 0;\r\n}\r\n\r\n.hoop-circle.right {\r\n  right: 4.63%;\r\n  border-top-left-radius: 100px;\r\n  border-bottom-left-radius: 100px;\r\n  border-right: 0;\r\n}\r\n\r\n.freethrow-circle {\r\n  position: fixed;\r\n  width: 12.9%;\r\n  height: 24%;\r\n  border-radius: 50%;\r\n  border: 2px solid #ffffff;\r\n  background: transparent;\r\n  top: 38%;\r\n  z-index: -1;\r\n}\r\n\r\n.freethrow-circle.left {\r\n  left: 13%;\r\n}\r\n\r\n.freethrow-circle.right {\r\n  left: 74%;\r\n}\r\n\r\n.center-line {\r\n  width: 4px;\r\n  height: 100%;\r\n  top: 0;\r\n  left: calc(50% - 4px \/ 2);\r\n  z-index: -1;\r\n}\r\n\r\n.center-circle {\r\n  width: 12.9%;\r\n  height: 24%;\r\n  border-radius: 100%;\r\n  border: 4px solid #ffffff;\r\n  background: none;\r\n  top: calc(50% - 24% \/ 2);\r\n  left: calc(50% - 12.9% \/ 2);\r\n  z-index: -1;\r\n}\r\n\r\n.basketball-court {\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: #d3ad66;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  z-index: -2;\r\n}\r\n\r\n\/* GAA *\/\r\n\r\n.gaa-pitch {\r\n  width: 100%;\r\n  position: absolute;\r\n  top: 50%;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n  padding-top: 62%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.gaa-line.marking {\r\n  border: 1px solid white;\r\n}\r\n\r\n.gaa-line {\r\n  height: 100%;\r\n  top: 0;\r\n}\r\n\r\n.gaa-one {\r\n  left: 9%;\r\n}\r\n\r\n.gaa-two {\r\n  left: 13.8%;\r\n}\r\n\r\n.gaa-three {\r\n  left: 31%;\r\n}\r\n\r\n.gaa-four {\r\n  left: 44.8%;\r\n}\r\n\r\n.gaa-five {\r\n  left: 55.2%;\r\n}\r\n\r\n.gaa-six {\r\n  left: 86.2%;\r\n}\r\n\r\n.gaa-seven {\r\n  left: 69%;\r\n}\r\n\r\n.gaa-eight {\r\n  left: 91%;\r\n}\r\n\r\n.gaa-line.center {\r\n  height: 15%;\r\n  left: 50%;\r\n  top: 42.5%;\r\n}\r\n\r\n.gaa-box {\r\n  width: 9%;\r\n  height: 21%;\r\n  top: 39.5%;\r\n  position: absolute;\r\n  border: 2px solid white;\r\n  z-index: 1;\r\n}\r\n\r\n.gaa-small-box {\r\n  width: 5%;\r\n  height: 15.5%;\r\n  top: 42.25%;\r\n  position: absolute;\r\n  border: 2px solid white;\r\n  z-index: 1;\r\n}\r\n\r\n.gaa-box.left,\r\n.gaa-small-box.left {\r\n  left: 0.4%;\r\n}\r\n\r\n.gaa-box.right,\r\n.gaa-small-box.right {\r\n  right: 0%;\r\n}\r\n\r\n.gaa-spot {\r\n  width: 3px;\r\n  height: 3px;\r\n  border-radius: 1px;\r\n  top: 50%;\r\n  position: absolute;\r\n  background: white;\r\n  z-index: 2;\r\n}\r\n\r\n.gaa-spot.left {\r\n  left: 7.59%;\r\n}\r\n\r\n.gaa-spot.right {\r\n  right: 7.59%;\r\n}\r\n\r\n.gaa-circle {\r\n  position: absolute;\r\n  top: 35.6%;\r\n  width: 8.96%;\r\n  height: 28.8%;\r\n  background: transparent;\r\n  border: 2px solid white;\r\n}\r\n\r\n.gaa-circle.left {\r\n  left: 13.8%;\r\n  border-top-right-radius: 100px;\r\n  border-bottom-right-radius: 100px;\r\n  border-left: 0;\r\n}\r\n\r\n.gaa-circle.right {\r\n  right: 13.8%;\r\n  border-top-left-radius: 100px;\r\n  border-bottom-left-radius: 100px;\r\n  border-right: 0;\r\n}\r\n\r\n\/* Futsal *\/\r\n.handball-pitch.futsal-pitch {\r\n  padding-top: 59.5%;\r\n}\r\n\r\n.futsal-penalty.marking {\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 5px;\r\n  top: calc(50% - 4px);\r\n  position: absolute;\r\n  background: white;\r\n  z-index: 0;\r\n}\r\n\r\n.futsal-penalty.marking.left {\r\n  left: 13.8%;\r\n}\r\n\r\n.futsal-penalty.marking.right {\r\n  right: 13.8%;\r\n}\r\n\r\n.futsal-penalty.marking.far-left {\r\n  left: 23.8%;\r\n}\r\n\r\n.futsal-penalty.marking.far-right {\r\n  right: 23.8%;\r\n}\r\n\r\n.futsal-center-circle {\r\n  width: 14.3%;\r\n  height: 24%;\r\n  border-radius: 100%;\r\n  border: 4px solid #ffffff;\r\n  background: none;\r\n  position: absolute;\r\n  top: calc(50% - 24% \/ 2);\r\n  left: calc(50% - 14.3% \/ 2);\r\n  z-index: -1;\r\n}\r\n\r\n\/* Media queries *\/\r\n\r\n@media only screen and (max-width: 1400px) {\r\n  .main-container {\r\n    width: 90%;\r\n  }\r\n\r\n  .player-timeline-container,\r\n  .events-container,\r\n  .tag-container,\r\n  .pitch-container {\r\n    width: 45%;\r\n  }\r\n}\r\n\r\n@media only screen and (max-width: 1200px) {\r\n  .player-timeline-container,\r\n  .events-container,\r\n  .tag-container,\r\n  .pitch-container {\r\n    width: 49%;\r\n  }\r\n\r\n  .tools-container ul {\r\n    padding-left: 2px;\r\n  }\r\n\r\n  nav {\r\n    width: 90%;\r\n  }\r\n}\r\n\r\n@media only screen and (max-width: 1000px) {\r\n  .pitch-container {\r\n    width: 63%;\r\n  }\r\n\r\n  .tag-container {\r\n    width: 35%;\r\n  }\r\n}\r\n\r\n@media only screen and (max-width: 870px) {\r\n  .tools-container {\r\n    width: 7%;\r\n  }\r\n\r\n  \r\n\r\n  .player-timeline-container {\r\n    width: 60%;\r\n  }\r\n\r\n  .events-container {\r\n    width: 30%;\r\n    font-size: 12px;\r\n  }\r\n\r\n  .event-navigation {\r\n    padding: 5px;\r\n  }\r\n\r\n  .event-navigation button {\r\n    margin-left: 2px;\r\n  }\r\n\r\n  #bmc-wbtn {\r\n    width: 50px !important;\r\n    height: 50px !important;\r\n  }\r\n}\r\n\r\n@media only screen and (max-width: 700px) {\r\n  * {\r\n    overflow-x: scroll;\r\n  }\r\n\r\n \r\n \r\n  .navigation-container {\r\n    height: 120px;\r\n    width: 200%;\r\n  }\r\n  #pitchSelector {\r\n   position: fixed;\r\n   right: 30%;\r\n   height: 20px;\r\n   width:20px;\r\n }\r\n  .main-container {\r\n    width: 100%;\r\n  }\r\n\r\n  .nav {\r\n    width: 200%;\r\n  }\r\n\r\n  h1 {\r\n    font-size: 22px;\r\n  }\r\n\r\n  .change-video {\r\n    margin-left: 10px;\r\n    width: 90%;\r\n    margin-top: 10px;\r\n  }\r\n\r\n  .change-video form input {\r\n    font-size: 11px;\r\n  }\r\n\r\n  .changepitch {\r\n    position: absolute;\r\n    right: 10%;\r\n    height: 40px;\r\n  }\r\n\r\n  .tools-container {\r\n    display: none;\r\n  }\r\n\r\n  .video-container,\r\n  .data-container {\r\n    align-content: flex-start;\r\n  }\r\n\r\n  .main-container {\r\n    height: 200vh;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .video-container,\r\n  .data-container {\r\n    flex-direction: column;\r\n    padding: 0;\r\n    margin: 0;\r\n    position: relative;\r\n  }\r\n\r\n  .video-container {\r\n    height: 40%;\r\n  }\r\n\r\n  .player-timeline-container {\r\n    position: fixed;\r\n    top: 130px;\r\n    left: 5px;\r\n    z-index: 100;\r\n    width: 100%;\r\n  }\r\n\r\n  .player-timeline-container.pinned {\r\n    position: fixed;\r\n    top: 0px;\r\n  }\r\n\r\n  .player-timeline-container,\r\n  .tag-container,\r\n  .pitch-container {\r\n    width: 98%;\r\n    padding: 0;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .events-container {\r\n    position: absolute;\r\n    bottom: 0;\r\n    height: 160px;\r\n    width: 98%;\r\n    min-height: 0;\r\n  }\r\n\r\n  .events-container table {\r\n    max-height: 0;\r\n    min-width: 100%;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .table-container {\r\n    height: 100px;\r\n    min-height: 0;\r\n  }\r\n\r\n  .event-navigation {\r\n    padding: 2px;\r\n    padding-top: 15px;\r\n  }\r\n\r\n  .event-navigation button {\r\n    margin-left: 0px;\r\n  }\r\n\r\n  .tag-container {\r\n    height: 270px;\r\n    min-height: 0;\r\n  }\r\n\r\n  .tag-navigation {\r\n    right: 20px;\r\n  }\r\n\r\n  .team-tags {\r\n    height: 140%;\r\n  }\r\n\r\n  .pitch-container {\r\n    height: 200px;\r\n    min-height: 0;\r\n    width: 80%;\r\n  }\r\n\r\n  .football-pitch {\r\n    height: 100%;\r\n    min-height: 0;\r\n  }\r\n\r\n  .center-circle {\r\n    height: 60px;\r\n    width: 60px;\r\n    top: calc(50% - 60px \/ 2);\r\n    left: calc(50% - 60px \/ 2);\r\n  }\r\n\r\n  body {\r\n    overflow: scroll;\r\n  }\r\n}\r\n<\/style>\r\n<script>const pitches = {\r\n  football: {\r\n    players: 11,\r\n    div: `<div class=\"football-pitch\" id=\"pitch\">\r\n  <div class=\"outline marking\"><\/div>\r\n  <div class=\"box left marking\"><\/div>\r\n  <div class=\"box-d left marking\"><\/div>\r\n  <div class=\"box left small marking\"><\/div>\r\n  <div class=\"box right marking\"><\/div>\r\n  <div class=\"box-d right marking\"><\/div>\r\n  <div class=\"box right small marking\"><\/div>\r\n  <div class=\"spot left marking\"><\/div>\r\n  <div class=\"spot right marking\"><\/div>\r\n  <div class=\"spot center marking\"><\/div>\r\n  <div class=\"football-center-line marking\"><\/div>\r\n  <div class=\"football-center-circle marking\"><\/div>\r\n  <div class=\"corner top left marking\"><\/div>\r\n  <div class=\"corner top right marking\"><\/div>\r\n  <div class=\"corner bottom left marking\"><\/div>\r\n  <div class=\"corner bottom right marking\"><\/div>\r\n  <div class=\"grass\"><\/div>\r\n  <div id=\"hover-marker1\" class=\"hover-marker\"><\/div>\r\n  <div id=\"hover-marker2\" class=\"hover-marker\"><\/div>\r\n<\/div>`,\r\n  },\r\n\r\n  americanfootball: {\r\n    players: 11,\r\n    div: `<div class=\"amfootball-pitch\" id=\"pitch\">\r\n  <div class=\"outline marking\"><\/div>\r\n\r\n  <div class=\"tdzone left\"><\/div>\r\n  <div class=\"tdzone right\"><\/div>\r\n\r\n  <div class=\"amline marking tenline\"><\/div>\r\n  <div class=\"amline marking twentyline\"><\/div>\r\n  <div class=\"amline marking thirtyline\"><\/div>\r\n  <div class=\"amline marking fortyline\"><\/div>\r\n  <div class=\"amline marking fiftyline\"><\/div>\r\n  <div class=\"amline marking sixtyline\"><\/div>\r\n  <div class=\"amline marking seventyline\"><\/div>\r\n  <div class=\"amline marking eightyline\"><\/div>\r\n  <div class=\"amline marking ninetyline\"><\/div>\r\n\r\n  <div class=\"amline marking lite fiveline\"><\/div>\r\n  <div class=\"amline marking lite fifteenline\"><\/div>\r\n  <div class=\"amline marking lite twentyfiveline\"><\/div>\r\n  <div class=\"amline marking lite thirtyfiveline\"><\/div>\r\n  <div class=\"amline marking lite fortyfiveline\"><\/div>\r\n  <div class=\"amline marking lite fiftyfiveline\"><\/div>\r\n  <div class=\"amline marking lite sixtyfiveline\"><\/div>\r\n  <div class=\"amline marking lite seventyfiveline\"><\/div>\r\n  <div class=\"amline marking lite eightyfiveline\"><\/div>\r\n  <div class=\"amline marking lite ninetyfiveline\"><\/div>\r\n\r\n  <div class=\"amtext tentext\"><p>10<\/p><\/div>\r\n  <div class=\"amtext thirtytext\"><p>30<\/p><\/div>\r\n  <div class=\"amtext fiftytext\"><p>50<\/p><\/div>\r\n  <div class=\"amtext seventytext\"><p>30<\/p><\/div>\r\n  <div class=\"amtext ninetytext\"><p>10<\/p><\/div>\r\n\r\n  <div class=\"amtext gopython\"><p>FC PYTHON #1<\/p><\/div>\r\n\r\n  <div class=\"amgrass\"><\/div>\r\n  <div id=\"hover-marker1\" class=\"hover-marker\"><\/div>\r\n  <div id=\"hover-marker2\" class=\"hover-marker\"><\/div>\r\n<\/div>`,\r\n  },\r\n  handball: {\r\n    players: 7,\r\n    div: `<div class=\"handball-pitch\" id=\"pitch\">\r\n    <div class=\"outline marking\"><\/div>\r\n    <div class=\"center-line handball marking\"><\/div>\r\n    <div class=\"four-meter marking left\"><\/div>\r\n    <div class=\"four-meter marking right\"><\/div>\r\n    <div class=\"seven-meter marking left\"><\/div>\r\n    <div class=\"seven-meter marking right\"><\/div>\r\n    <div class=\"handball-box left\"><\/div>\r\n    <div class=\"handball-box right\"><\/div>\r\n    <div class=\"handball-box-big left\"><\/div>\r\n    <div class=\"handball-box-big right\"><\/div>\r\n    <div id=\"hover-marker1\" class=\"hover-marker\"><\/div>\r\n    <div id=\"hover-marker2\" class=\"hover-marker\"><\/div>\r\n  <\/div>`,\r\n  },\r\n  rugby: {\r\n    players: 15,\r\n    div: `<div class=\"rugby-pitch\" id=\"pitch\">\r\n    <div class=\"outline marking\"><\/div>\r\n\r\n    <div class=\"try-line-left marking\"><\/div>\r\n    <div class=\"try-line-right marking\"><\/div>\r\n\r\n    <div class=\"twentytwo-line-left marking\"><\/div>\r\n    <div class=\"twentytwo-line-right marking\"><\/div>\r\n\r\n    <div class=\"five-line-left dashed-marking\"><\/div>\r\n    <div class=\"five-line-right dashed-marking\"><\/div>\r\n\r\n    <div class=\"ten-line-left dashed-marking\"><\/div>\r\n    <div class=\"ten-line-right dashed-marking\"><\/div>\r\n\r\n    <div class=\"near-line-top dashed-marking\"><\/div>\r\n    <div class=\"near-line-bottom dashed-marking\"><\/div>\r\n\r\n    <div class=\"far-line-top dashed-marking\"><\/div>\r\n    <div class=\"far-line-bottom dashed-marking\"><\/div>\r\n\r\n    <div class=\"center-line marking\"><\/div>\r\n\r\n    <div class=\"grass\"><\/div>\r\n    <div id=\"hover-marker1\" class=\"hover-marker\"><\/div>\r\n    <div id=\"hover-marker2\" class=\"hover-marker\"><\/div>\r\n  <\/div>`,\r\n  },\r\n  basketball: {\r\n    players: 15,\r\n    div: `<div class=\"basketball-pitch\" id=\"pitch\">\r\n    <div class=\"outline marking\"><\/div>\r\n    <div class=\"center-line marking\"><\/div>\r\n    <div class=\"basketball-box left\"><\/div>\r\n    <div class=\"basketball-box right\"><\/div>\r\n    <div class=\"freethrow-circle left\"><\/div>\r\n    <div class=\"freethrow-circle right\"><\/div>\r\n    <div class=\"center-circle marking\"><\/div>\r\n    <div class=\"hoop-box left\"><\/div>\r\n    <div class=\"hoop-box right\"><\/div>\r\n    <div class=\"hoop left\"><\/div>\r\n    <div class=\"hoop right\"><\/div>\r\n    <div class=\"backboard left\"><\/div>\r\n    <div class=\"backboard right\"><\/div>\r\n    <div class=\"hoop-circle left\"><\/div>\r\n    <div class=\"hoop-circle right\"><\/div>\r\n    <div class=\"basketball-court\"><\/div>\r\n    <div id=\"hover-marker1\" class=\"hover-marker\"><\/div>\r\n    <div id=\"hover-marker2\" class=\"hover-marker\"><\/div>\r\n  <\/div>`,\r\n  },\r\n  gaa: {\r\n    players: 15,\r\n    div: `<div class=\"gaa-pitch\" id=\"pitch\">\r\n    <div class=\"outline marking\"><\/div>\r\n\r\n    <div class=\"gaa-line gaa-one marking\"><\/div>\r\n    <div class=\"gaa-line gaa-two marking\"><\/div>\r\n    <div class=\"gaa-line gaa-three marking\"><\/div>\r\n    <div class=\"gaa-line gaa-four marking\"><\/div>\r\n    <div class=\"gaa-line gaa-five marking\"><\/div>\r\n    <div class=\"gaa-line gaa-six marking\"><\/div>\r\n    <div class=\"gaa-line gaa-seven marking\"><\/div>\r\n    <div class=\"gaa-line gaa-eight marking\"><\/div>\r\n    <div class=\"gaa-line center marking\"><\/div>\r\n\r\n    <div class=\"gaa-box left\"><\/div>\r\n    <div class=\"gaa-box right\"><\/div>\r\n\r\n    <div class=\"gaa-small-box left\"><\/div>\r\n    <div class=\"gaa-small-box right\"><\/div>\r\n\r\n    <div class=\"gaa-spot left\"><\/div>\r\n    <div class=\"gaa-spot right\"><\/div>\r\n\r\n    <div class=\"gaa-circle marking left\"><\/div>\r\n    <div class=\"gaa-circle marking right\"><\/div>\r\n\r\n    <div class=\"grass\"><\/div>\r\n    <div id=\"hover-marker1\" class=\"hover-marker\"><\/div>\r\n    <div id=\"hover-marker2\" class=\"hover-marker\"><\/div>\r\n  <\/div>`,\r\n  },\r\n  futsal: {\r\n    players: 15,\r\n    div: `<div class=\"handball-pitch futsal-pitch\" id=\"pitch\">\r\n    <div class=\"outline marking\"><\/div>\r\n    <div class=\"center-line handball marking\"><\/div>\r\n    <div class=\"futsal-penalty marking left\"><\/div>\r\n    <div class=\"futsal-penalty marking right\"><\/div>\r\n    <div class=\"futsal-penalty marking far-left\"><\/div>\r\n    <div class=\"futsal-penalty marking far-right\"><\/div>\r\n    <div class=\"handball-box left\"><\/div>\r\n    <div class=\"handball-box right\"><\/div>\r\n    <div class=\"futsal-center-circle\"><\/div>\r\n\r\n    <div class=\"corner top left marking\"><\/div>\r\n    <div class=\"corner top right marking\"><\/div>\r\n    <div class=\"corner bottom left marking\"><\/div>\r\n    <div class=\"corner bottom right marking\"><\/div>\r\n\r\n    <div id=\"hover-marker1\" class=\"hover-marker\"><\/div>\r\n    <div id=\"hover-marker2\" class=\"hover-marker\"><\/div>\r\n  <\/div>`,\r\n  },\r\n};\r\nconst help = document.getElementById('help');\r\nconst videoDetails = document.getElementById('video-details');\r\nconst eventButtons = document.getElementsByClassName('tag');\r\nconst changeVideoButton = document.getElementById('change-video-btn');\r\nconst changeVideoURL = document.getElementById('change-video-input');\r\nconst editWarning = document.getElementById('edit-warning');\r\nconst videoTimelineContainer = document.getElementById(\r\n  'player-timeline-container'\r\n);\r\nconst progressContainer = document.getElementById('timeline');\r\nconst progress = document.getElementById('progress');\r\nconst tags = document.getElementById('tags');\r\nconst teamTags = document.getElementsByClassName('team-tag');\r\nconst playerTags = document.getElementsByClassName('player-tag');\r\nconst table = document.getElementById('results-table');\r\nconst tableBody = document.getElementById('results-data');\r\nlet pitch = document.getElementById('pitch');\r\nlet pitchContainer = document.getElementById('pitch-container');\r\nlet eventMarker1 = document.getElementById('hover-marker1');\r\nlet eventMarker2 = document.getElementById('hover-marker2');\r\nconst notification = document.getElementById('notification-container');\r\nconst changepitchbutton = document.getElementById('changepitch');\r\nlet pitchSelector = document.getElementById('pitchSelector');\r\nconst isSafari =\r\n  \/constructor\/i.test(window.HTMLElement) ||\r\n  (function (p) {\r\n    return p.toString() === '[object SafariRemoteNotification]';\r\n  })(\r\n    !window['safari'] ||\r\n      (typeof safari !== 'undefined' && window['safari'].pushNotification)\r\n  );\r\n\r\n\/\/ Global variables needed for mouse up\/down detection, pause detection, pitch list\r\nlet downX = 0;\r\nlet downY = 0;\r\nlet paused = false;\r\nlet pitchlist = [];\r\n\r\nfor (var key in pitches) {\r\n  pitchlist.push(key);\r\n}\r\n\r\n\/\/ Init Video\r\nconst tag = document.createElement('script');\r\nlet player;\r\n\r\ntag.src = 'https:\/\/www.youtube.com\/iframe_api';\r\nconst firstScriptTag = document.getElementsByTagName('script')[0];\r\nfirstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n\r\nlet vidID =\r\n  localStorage.getItem('gameOneVideo') !== null\r\n    ? JSON.parse(localStorage.getItem('gameOneVideo'))\r\n    : 'IPMxipAkvCI';\r\n\r\nfunction onYouTubeIframeAPIReady() {\r\n  player = new YT.Player('player', {\r\n    height: '550',\r\n    width: '330',\r\n    videoId: vidID,\r\n    events: { onReady: initSave, onStateChange: onPlayerStateChange },\r\n    playerVars: { modestbranding: 1, playsinline: 1 },\r\n  });\r\n}\r\n\r\n\/\/ if safari, remove progress bar\r\nif (isSafari) {\r\n  progressContainer.style.display = 'none';\r\n}\r\n\r\n\/\/ If URL has params, set correct pitch. Else football\r\nlet queryString = window.location.search;\r\nlet urlParams = new URLSearchParams(queryString);\r\nlet pitchType = urlParams.get('pitch');\r\n\r\nif (pitchlist.indexOf(pitchType) > -1) {\r\n  initPitch(pitchType);\r\n} else {\r\n  pitchContainer.innerHTML = '';\r\n\r\n  pitchContainer.innerHTML = pitches['football'].div;\r\n\r\n  pitch = document.getElementById('pitch');\r\n  eventMarker1 = document.getElementById('hover-marker1');\r\n  eventMarker2 = document.getElementById('hover-marker2');\r\n  pitch.addEventListener('mousedown', getDownCoords);\r\n  pitch.addEventListener('mouseup', buttonClick);\r\n}\r\n\/\/ Load New Video\r\nfunction loadNewVideo(e) {\r\n  e.preventDefault();\r\n\r\n  if (changeVideoURL.value.trim() != '') {\r\n    if (changeVideoURL.value.trim().toLowerCase().indexOf('youtube') != -1) {\r\n      let video_id = changeVideoURL.value.split('v=')[1];\r\n      let ampersandPosition = video_id.indexOf('&');\r\n      if (ampersandPosition != -1) {\r\n        video_id = video_id.substring(0, ampersandPosition);\r\n      }\r\n      player.loadVideoById(video_id);\r\n      tableBody.innerHTML = '';\r\n      addToTimeline(results);\r\n\r\n      localStorage.setItem('gameOne', JSON.stringify(tableToJson(table)));\r\n      localStorage.setItem('gameOneVideo', JSON.stringify(video_id));\r\n    } else {\r\n      showNotification('Please enter a full YouTube URL!');\r\n    }\r\n  } else {\r\n    showNotification('Please enter a YouTube URL!');\r\n  }\r\n}\r\n\r\n\/\/ Handle document-level key presses\r\ndocument.body.onkeydown = function (e) {\r\n  \/\/ Spacebar pause\/play anywhere\r\n  if (e.keyCode == 32) {\r\n    if (paused == false) {\r\n      player.pauseVideo();\r\n    } else if (paused == true) {\r\n      player.playVideo();\r\n    }\r\n  }\r\n\r\n  \/\/ Skip forward, back\r\n  if (e.keyCode == 37) {\r\n    player.seekTo(player.getCurrentTime() - 5);\r\n  }\r\n\r\n  if (e.keyCode == 39) {\r\n    player.seekTo(player.getCurrentTime() + 5);\r\n  }\r\n\r\n  \/\/ Ignore all enteres\r\n  if (e.keyCode == 13) {\r\n    e.preventDefault();\r\n  }\r\n};\r\n\r\n\/\/ Video state changes, change pause status\r\nfunction onPlayerStateChange(event) {\r\n  if (event.data == 1) {\r\n    paused = false;\r\n  } else if (event.data == 2) {\r\n    paused = true;\r\n  }\r\n}\r\n\r\n\/\/ Skip forward, back\r\n\r\n\/\/ Check for local game, load if it exists\r\nfunction initSave() {\r\n  if (localStorage.getItem('gameOne') !== null) {\r\n    let data = JSON.parse(localStorage.getItem('gameOne'));\r\n    data.forEach((event) => {\r\n      let row = tableBody.insertRow(-1);\r\n      row.className = 'result';\r\n      let cell1 = row.insertCell(0);\r\n      let cell2 = row.insertCell(1);\r\n      let cell3 = row.insertCell(2);\r\n      let cell4 = row.insertCell(3);\r\n      let cell5 = row.insertCell(4);\r\n      let cell6 = row.insertCell(5);\r\n      let cell7 = row.insertCell(6);\r\n      let cell8 = row.insertCell(7);\r\n      let cell9 = row.insertCell(8);\r\n      let cell10 = row.insertCell(9);\r\n\r\n      cell1.innerHTML = event.Team;\r\n      cell2.innerHTML = event.PlayerName;\r\n      cell3.innerHTML = event.Event;\r\n      cell4.innerHTML = event.Mins;\r\n      cell5.innerHTML = event.Secs;\r\n      cell6.innerHTML = event.X;\r\n      cell7.innerHTML = event.Y;\r\n      cell8.innerHTML = event.X2;\r\n      cell9.innerHTML = event.Y2;\r\n      cell10.innerHTML =\r\n        '<button class=\"btn\" onclick=\"deleteRow(this)\">X<\/button>';\r\n    });\r\n    let results = document.getElementsByClassName('result');\r\n    addToTimeline(results);\r\n\r\n    for (let i = 0; i < results.length; i++) {\r\n      results[i].addEventListener('click', navigateVideo);\r\n      results[i].addEventListener('mouseover', showLocation);\r\n      results[i].addEventListener('mouseout', hideLocationMarker);\r\n    }\r\n  } else {\r\n  }\r\n}\r\n\r\n\/\/ Make events editable\r\nfunction eventsEditable() {\r\n  let tags = document.getElementsByClassName('tag');\r\n\r\n  if (tags[0].getAttribute('contenteditable') == 'false') {\r\n    notification.innerHTML = 'Edit mode is ON, turn OFF to collect data';\r\n    notification.classList.add('show');\r\n    for (var i = 0; i < tags.length; i++) {\r\n      tags[i].setAttribute('contenteditable', true);\r\n      tags[i].classList.toggle('editable');\r\n    }\r\n  } else {\r\n    notification.classList.remove('show');\r\n    for (var i = 0; i < tags.length; i++) {\r\n      tags[i].setAttribute('contenteditable', false);\r\n      tags[i].classList.toggle('editable');\r\n    }\r\n  }\r\n}\r\n\r\n\/\/ Add new tag container up to 10\r\nfunction addTag() {\r\n  let eventTags = document.querySelectorAll('.tags .tag');\r\n  let editable =\r\n    eventButtons[0].getAttribute('contenteditable') == 'true' ? true : false;\r\n\r\n  if (eventTags.length < 15) {\r\n    let newTag = document.createElement('div');\r\n    newTag.innerHTML = '<p>New tag!<\/p>';\r\n    newTag.classList.add('tag');\r\n    newTag.setAttribute('onclick', 'changeEventFocus(this)');\r\n    if (editable === true) {\r\n      newTag.setAttribute('contenteditable', true);\r\n      newTag.classList.add('editable');\r\n    } else {\r\n      newTag.setAttribute('contenteditable', false);\r\n    }\r\n\r\n    tags.appendChild(newTag);\r\n  } else {\r\n    showNotification('Max of 15 tags - sorry!');\r\n  }\r\n\r\n  if (eventTags.length > 5) {\r\n    tags.style.boxShadow = 'inset 0 -10px 10px -15px #000000';\r\n  }\r\n}\r\n\r\n\/\/ Add event to event table with pitch mouse up\r\nfunction buttonClick(e) {\r\n  events = document.getElementsByClassName('tag');\r\n  let team = document.getElementById('selected-team');\r\n  if (events[0].getAttribute('contenteditable') == 'false') {\r\n    let time = player.getCurrentTime();\r\n    let mins = Math.floor(time \/ 60);\r\n    let secs = Math.floor(time - mins * 60);\r\n    let coords = getCoord(e);\r\n\r\n    let x = downX;\r\n    let y = downY;\r\n    let x2, y2;\r\n\r\n    if (coords[2] == 'Drag') {\r\n      x2 = coords[0];\r\n      y2 = coords[1];\r\n    } else {\r\n      x2 = '-';\r\n      y2 = '-';\r\n    }\r\n\r\n    \/\/Deal with player & team name\r\n    let playerName = document.getElementById('selected-player');\r\n\r\n    if (playerName) {\r\n      playerName = playerName.innerHTML;\r\n    } else {\r\n      playerName = '-';\r\n    }\r\n\r\n    let teamName = document.getElementById('selected').innerText;\r\n\r\n    let row = table.insertRow(-1);\r\n    row.className = 'result';\r\n    let cell1 = row.insertCell(0);\r\n    let cell2 = row.insertCell(1);\r\n    let cell3 = row.insertCell(2);\r\n    let cell4 = row.insertCell(3);\r\n    let cell5 = row.insertCell(4);\r\n    let cell6 = row.insertCell(5);\r\n    let cell7 = row.insertCell(6);\r\n    let cell8 = row.insertCell(7);\r\n    let cell9 = row.insertCell(8);\r\n    let cell10 = row.insertCell(9);\r\n    cell1.innerHTML = team.innerHTML;\r\n    cell2.innerHTML = playerName;\r\n    cell3.innerHTML = teamName;\r\n    cell4.innerHTML = mins;\r\n    cell5.innerHTML = secs;\r\n    cell6.innerHTML = x;\r\n    cell7.innerHTML = y;\r\n    cell8.innerHTML = x2;\r\n    cell9.innerHTML = y2;\r\n    cell10.innerHTML =\r\n      '<button class=\"btn\" onclick=\"deleteRow(this)\">X<\/button>';\r\n\r\n    results = document.getElementsByClassName('result');\r\n\r\n    for (let i = 0; i < results.length; i++) {\r\n      results[i].addEventListener('click', navigateVideo);\r\n      results[i].addEventListener('mouseover', showLocation);\r\n      results[i].addEventListener('mouseout', hideLocationMarker);\r\n    }\r\n\r\n    document.getElementsByClassName('table-container')[0].scrollTop =\r\n      document.getElementsByClassName('table-container')[0].scrollHeight;\r\n\r\n    addToTimeline(results);\r\n    localStorage.setItem('gameOne', JSON.stringify(tableToJson(table)));\r\n    localStorage.setItem(\r\n      'gameOneVideo',\r\n      JSON.stringify(player.getVideoData()['video_id'])\r\n    );\r\n  } else {\r\n  }\r\n}\r\n\r\n\/\/ Get coords of mouse down, allows for x\/y2 if dragged\r\nfunction getDownCoords(e) {\r\n  rect = e.target.getBoundingClientRect(); \/\/get pitch dimensions\r\n  let x = (e.clientX - rect.left) \/ pitch.offsetWidth; \/\/x position within the element.\r\n  let y = (e.clientY - rect.top) \/ pitch.offsetHeight;\r\n\r\n  linex1 = x;\r\n  liney1 = y;\r\n\r\n  downX = Math.round(x * 100);\r\n  downY = Math.round(y * 100);\r\n}\r\n\r\n\/\/ Get X & Y on Pitch mouseup\r\nfunction getCoord(e) {\r\n  let rect = e.target.getBoundingClientRect(); \/\/get pitch dimensions\r\n\r\n  let x = (e.clientX - rect.left) \/ pitch.offsetWidth; \/\/x position within the element.\r\n  let y = (e.clientY - rect.top) \/ pitch.offsetHeight;\r\n\r\n  x = Math.round(x * 100);\r\n  y = Math.round(y * 100);\r\n\r\n  if (x >= downX - 2 && x <= downX + 2 && y >= downY - 2 && y <= downY + 2) {\r\n    return [x, y, 'Click'];\r\n  }\r\n  return [x, y, 'Drag'];\r\n}\r\n\r\n\/\/ Add events to timeline\r\nfunction addToTimeline(results) {\r\n  \/\/ Clear all existing timeline divs\r\n  document.querySelectorAll('.timeline-piece').forEach((e) => e.remove());\r\n  \/\/ Add the remaining divs\r\n  for (let i = 0; i < results.length; i++) {\r\n    let resultElements = results[i].children;\r\n    let resultTime =\r\n      +resultElements[3].innerText * 60 + +resultElements[4].innerText;\r\n    let timelineEl = document.createElement('div');\r\n    timelineEl.classList.add('timeline-piece');\r\n    timelineEl.classList.add(\r\n      `${resultElements[0].innerText.toLowerCase()}-timeline-piece`\r\n    );\r\n    timelineEl.style.left = `${(resultTime \/ player.getDuration()) * 100}%`;\r\n    timeline.appendChild(timelineEl);\r\n  }\r\n}\r\n\r\n\/\/ Save table to json\r\nfunction tableToJson(table) {\r\n  var data = [];\r\n\r\n  \/\/ first row needs to be headers\r\n  var headers = [\r\n    'Team',\r\n    'PlayerName',\r\n    'Event',\r\n    'Mins',\r\n    'Secs',\r\n    'X',\r\n    'Y',\r\n    'X2',\r\n    'Y2',\r\n  ];\r\n\r\n  \/\/ go through cells\r\n  for (var i = 1; i < table.rows.length; i++) {\r\n    var tableRow = table.rows[i];\r\n    var rowData = {};\r\n\r\n    for (var j = 0; j < tableRow.cells.length - 1; j++) {\r\n      rowData[headers[j]] = tableRow.cells[j].innerHTML;\r\n    }\r\n\r\n    data.push(rowData);\r\n  }\r\n  return data;\r\n}\r\n\r\n\/\/ Download table\r\nfunction downloadCSV(csv, filename) {\r\n  let csvFile;\r\n  let downloadLink;\r\n\r\n  \/\/ CSV file\r\n  csvFile = new Blob([csv], { type: 'text\/csv' });\r\n\r\n  \/\/ Download link\r\n  downloadLink = document.createElement('a');\r\n\r\n  \/\/ File name\r\n  downloadLink.download = filename;\r\n\r\n  \/\/ Create a link to the file\r\n  downloadLink.href = window.URL.createObjectURL(csvFile);\r\n\r\n  \/\/ Hide download link\r\n  downloadLink.style.display = 'none';\r\n\r\n  \/\/ Add the link to DOM\r\n  document.body.appendChild(downloadLink);\r\n\r\n  \/\/ Click download link\r\n  downloadLink.click();\r\n}\r\n\r\nfunction exportTableToCSV(filename) {\r\n  var csv = [];\r\n  var rows = document.querySelectorAll('table tr');\r\n\r\n  for (var i = 0; i < rows.length; i++) {\r\n    var row = [],\r\n      cols = rows[i].querySelectorAll('td, th');\r\n\r\n    for (var j = 0; j < cols.length - 1; j++) row.push(cols[j].innerText);\r\n\r\n    csv.push(row.join(','));\r\n  }\r\n\r\n  \/\/ Download CSV file\r\n  downloadCSV(csv.join('\\n'), filename);\r\n}\r\n\r\n\/\/ Delete last one in table\r\nfunction delLast() {\r\n  var table = document.getElementById('results-table');\r\n  if (table.rows.length > 1) {\r\n    table.deleteRow(table.rows.length - 1);\r\n  }\r\n  addToTimeline(document.getElementsByClassName('result'));\r\n  localStorage.setItem('gameOne', JSON.stringify(tableToJson(table)));\r\n  localStorage.setItem(\r\n    'gameOneVideo',\r\n    JSON.stringify(player.getVideoData()['video_id'])\r\n  );\r\n}\r\n\r\n\/\/ Delete row by button press\r\nfunction deleteRow(e) {\r\n  hideLocationMarker();\r\n  e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);\r\n  addToTimeline(document.getElementsByClassName('result'));\r\n  localStorage.setItem('gameOne', JSON.stringify(tableToJson(table)));\r\n  localStorage.setItem(\r\n    'gameOneVideo',\r\n    JSON.stringify(player.getVideoData()['video_id'])\r\n  );\r\n}\r\n\r\n\/\/ Navigate video with data\r\nfunction navigateVideo(e) {\r\n  if (e.target.tagName != 'BUTTON') {\r\n    let time = 0;\r\n    time += Number(this.cells[3].innerText * 60);\r\n    time += Number(this.cells[4].innerText);\r\n    player.seekTo(time);\r\n  }\r\n}\r\n\r\n\/\/ Navigate video with progress bar\r\nfunction setVideoProgress() {\r\n  player.seekTo((+progress.value * player.getDuration()) \/ 100);\r\n  updateProgress();\r\n}\r\n\r\n\/\/ Update progress bar\r\nfunction updateProgress() {\r\n  progress.value = (player.getCurrentTime() \/ player.getDuration()) * 100;\r\n}\r\n\r\nsetInterval(function () {\r\n  updateProgress();\r\n}, 500);\r\n\r\n\/\/ Change event or team focus\r\nfunction changeEventFocus(event) {\r\n  if (document.getElementById('selected')) {\r\n    document.getElementById('selected').removeAttribute('id');\r\n  }\r\n  event.setAttribute('id', 'selected');\r\n}\r\n\r\nfunction changeTeamFocus(event) {\r\n  if (document.getElementById('selected-player') != null) {\r\n    document.getElementById('selected-player').removeAttribute('id');\r\n  }\r\n\r\n  if (event.target.classList.contains('team-tag')) {\r\n    document.getElementById('selected-team').removeAttribute('id');\r\n    event.target.setAttribute('id', 'selected-team');\r\n  } else if (event.target.classList.contains('player-tag')) {\r\n    if (event.target.classList.contains('home-player')) {\r\n      document.getElementById('selected-team').removeAttribute('id');\r\n      document\r\n        .querySelectorAll('.home-tags .team-tag')[0]\r\n        .setAttribute('id', 'selected-team');\r\n      event.target.setAttribute('id', 'selected-player');\r\n    } else if (event.target.classList.contains('away-player')) {\r\n      document.getElementById('selected-team').removeAttribute('id');\r\n      document\r\n        .querySelectorAll('.away-tags .team-tag')[0]\r\n        .setAttribute('id', 'selected-team');\r\n      event.target.setAttribute('id', 'selected-player');\r\n    }\r\n  }\r\n}\r\n\r\n\/\/ Show notification\r\nfunction showNotification(text) {\r\n  notification.innerHTML = `<p>${text}<\/p>`;\r\n  notification.classList.add('show');\r\n\r\n  setTimeout(() => {\r\n    notification.classList.remove('show');\r\n  }, 5500);\r\n}\r\n\r\n\/\/ Pin video for mobile\r\nfunction pinVideo() {\r\n  if (window.scrollY > 50) {\r\n    videoTimelineContainer.classList.add('pinned');\r\n  } else {\r\n    videoTimelineContainer.classList.remove('pinned');\r\n  }\r\n}\r\n\r\n\/\/Show location of hovered event\r\nfunction showLocation(event) {\r\n  let markerX, markerY, markerX2, markerY2;\r\n\r\n  if (event.target.tagName != 'BUTTON') {\r\n    markerX = event.target.parentNode.children[5];\r\n    markerY = event.target.parentNode.children[6];\r\n\r\n    markerX2 = event.target.parentNode.children[7];\r\n    markerY2 = event.target.parentNode.children[8];\r\n  } else if (event.target.tagName == 'BUTTON') {\r\n    markerX = event.target.parentNode.parentNode.children[5];\r\n    markerY = event.target.parentNode.parentNode.children[6];\r\n\r\n    markerX2 = event.target.parentNode.parentNode.children[7];\r\n    markerY2 = event.target.parentNode.parentNode.children[8];\r\n  }\r\n  if (markerX) {\r\n    eventMarker1.style.display = 'block';\r\n    eventMarker1.style.left = markerX.innerHTML + '%';\r\n    eventMarker1.style.top = markerY.innerHTML + '%';\r\n  }\r\n\r\n  if (markerX2.innerHTML !== '-' && markerX2) {\r\n    eventMarker2.style.display = 'block';\r\n    eventMarker2.style.left = markerX2.innerHTML + '%';\r\n    eventMarker2.style.top = markerY2.innerHTML + '%';\r\n  }\r\n}\r\n\r\n\/\/ Clear location marker after hover\r\nfunction hideLocationMarker(event) {\r\n  eventMarker1.style.display = 'none';\r\n  eventMarker2.style.display = 'none';\r\n}\r\n\r\n\/\/ Calculate angle\r\nfunction angle(cx, cy, ex, ey) {\r\n  var dy = ey - cy;\r\n  var dx = ex - cx;\r\n  var theta = Math.atan2(dy, dx); \/\/ range (-PI, PI]\r\n  theta *= 180 \/ Math.PI; \/\/ rads to degs, range (-180, 180]\r\n  \/\/if (theta < 0) theta = 360 + theta; \/\/ range [0, 360)\r\n  return theta;\r\n}\r\n\r\n\/\/ Update pitch type & init pitch type\r\nfunction changePitch() {\r\n  pitchContainer.innerHTML = '';\r\n\r\n  pitchContainer.innerHTML = pitches[pitchSelector.value].div;\r\n\r\n  pitch = document.getElementById('pitch');\r\n  eventMarker1 = document.getElementById('hover-marker1');\r\n  eventMarker2 = document.getElementById('hover-marker2');\r\n  pitch.addEventListener('mousedown', getDownCoords);\r\n  pitch.addEventListener('mouseup', buttonClick);\r\n\r\n  history.pushState('', '', `?pitch=${pitchSelector.value}`);\r\n}\r\n\r\nfunction initPitch(pitchParam) {\r\n  pitchContainer.innerHTML = '';\r\n\r\n  pitchContainer.innerHTML = pitches[pitchParam].div;\r\n\r\n  pitch = document.getElementById('pitch');\r\n  eventMarker1 = document.getElementById('hover-marker1');\r\n  eventMarker2 = document.getElementById('hover-marker2');\r\n  pitch.addEventListener('mousedown', getDownCoords);\r\n  pitch.addEventListener('mouseup', buttonClick);\r\n\r\n  history.pushState('', '', `?pitch=${pitchParam}`);\r\n}\r\n\r\n\/\/ Event listeners\r\n\r\nfor (let i = 0; i < teamTags.length; i++) {\r\n  teamTags[i].addEventListener('click', changeTeamFocus);\r\n}\r\n\r\nfor (let i = 0; i < playerTags.length; i++) {\r\n  playerTags[i].addEventListener('click', changeTeamFocus);\r\n}\r\n\r\npitch.addEventListener('mousedown', getDownCoords);\r\npitch.addEventListener('mouseup', buttonClick);\r\nsubmit.addEventListener('submit', loadNewVideo);\r\nprogress.addEventListener('change', setVideoProgress);\r\nhelp.addEventListener('click', function () {\r\n  showNotification(\r\n    `<ol>\r\n    <li>Customise tags with 'Edit Tags' button<\/li>\r\n    <li>Select event & player<\/li>\r\n    <li>Click on pitch for x\/y<\/li> \r\n    <li>Drag on pitch for start & end x\/y<\/li>\r\n    <li>Navigate video with arrow keys<\/li>\r\n    <li>Collect & export data<\/li>\r\n    <\/ol>`\r\n  );\r\n});\r\n\r\npitchSelector.onchange = changePitch;\r\nwindow.addEventListener('scroll', pinVideo);\r\n<\/script>\r\n  <\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Xu\u1ea5t d\u1eef li\u1ec7u d\u01b0\u1edbi d\u1ea1ng bi\u1ec3u \u0111\u1ed3 \u1edf d\u01b0\u1edbi \u0111\u00e2y Change Video (Deletes Events) Thay S\u00e2nFootballHandballRugbyAmerican FootballBasketballGAAFutsal Team Player Event Mins Secs X Y X2 Y2 \u274c Export CSV Delete last Edit tag Add tag Home H1 H2 H3 H4&hellip;&nbsp;<a href=\"https:\/\/khoahocthethao.vn\/index.php\/2021\/12\/08\/elementor-3040\/\" class=\"more-link\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-3040","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts\/3040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/comments?post=3040"}],"version-history":[{"count":28,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts\/3040\/revisions"}],"predecessor-version":[{"id":3071,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/posts\/3040\/revisions\/3071"}],"wp:attachment":[{"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/media?parent=3040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/categories?post=3040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khoahocthethao.vn\/index.php\/wp-json\/wp\/v2\/tags?post=3040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}