@golstats/gsc-reports 1.0.0

package/src/components/template-report-maker/CoverPage.vue

@@ -0,0 +1,636 @@
+<script setup>
+
+import { computed, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  game: {
+    type: Object,
+    default: () => null
+  },
+  coverId: {
+    type: Number,
+    default: 1
+  },
+  isPostMatch: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['intersection-changed'])
+
+const coverPage = ref(null)
+
+const isCoverTypeOne = computed(() => {
+  return [1, 2].includes(props.coverId)
+})
+
+const isBackgroundImageTypeOne = computed(() => {
+  console.log('coverId', props.coverId)
+  return [1, 3].includes(props.coverId)
+})
+
+const teamsShieldColors = computed(() => {
+  if (1 === props.coverId) {
+    return {
+      homeTeam: '#1558CC',
+      awayTeam: '#0046BF',
+      opacity: 1
+    }
+  } else if (3 === props.coverId) {
+    return {
+      homeTeam: '#000A1A',
+      awayTeam: '#000A1A',
+      opacity: 0.4
+    }
+  }
+  return {
+    homeTeam: '#576883',
+    awayTeam: '#576883',
+    opacity: 0.4
+  }
+})
+
+const score = computed(() => {
+  if (props.game && props.game.score) {
+    return props.game.score
+  }
+  return ['0', '0']
+})
+
+const teamsData = computed(() => {
+  if (props.game && props.game.teams) {
+    // todo return game teams values
+    return props.game.teams
+  }
+  return {
+    homeTeam: {
+      name: 'LOC',
+      logo: null
+    },
+    awayTeam: {
+      name: 'VIS',
+      logo: null
+    }
+  }
+})
+
+const style = computed(() => {
+  return {
+    '--background-image': isBackgroundImageTypeOne.value
+      ? 'url(/reports/background-postmatch-template-01@2x.jpg)'
+      : 'url(/reports/background-postmatch-template-02@2x.jpg)',
+    '--grid-template-columns-type-one': props.isPostMatch
+      ? '1fr min-content 1fr'
+      : '320px min-content 320px',
+    '--width-type-one': props.isPostMatch
+      ? '100%'
+      : 'fit-content',
+    '--grid-template-columns-type-two': props.isPostMatch
+      ? '1fr min-content 1fr'
+      : '320px min-content 320px',
+    '--width-type-two': props.isPostMatch
+      ? '100%'
+      : 'fit-content'
+  }
+})
+
+const analysisType = computed(() => {
+  return props.isPostMatch ? 'Postmatch' : 'Prematch'
+})
+
+const gameDate = computed(() => {
+  if (props.game) {
+    return ''
+  }
+  return 'Jornada - Día 00 Mes'
+})
+
+
+const callback = (entries) => {
+  entries.forEach(entry => {
+
+    emit('intersection-changed', entry.isIntersecting)
+    /*if (entry.isIntersecting) {
+      console.log('Element is in the viewport!');
+      emit('intersection-changed', true)
+      // Perform actions when the element is visible
+    } else {
+      console.log('Element is out of the viewport!');
+      // Perform actions when the element is not visible
+      emit('intersection-changed', entry.isIntersecting && entry.isVisible)
+    }*/
+  })
+}
+
+
+let observer = null
+
+function setUpIntersectionObserver() {
+  const options = {
+    root: null, // Use the viewport as the root
+    rootMargin: '0px', // Margin around the root
+    threshold: 0.7 // Trigger when 50% of the element is visible
+  }
+
+  observer = new IntersectionObserver(callback, options)
+
+// Step 3: Select the target element and start observing
+  const target = coverPage.value
+  if (target) {
+    observer.observe(target)
+  }
+}
+
+onMounted(() => {
+  setUpIntersectionObserver()
+})
+</script>
+
+<template>
+  <div ref="coverPage" class="cover" :style="style">
+    <div class="cover__title-subtitle">
+      <div class="cover__title-subtitle__title">
+        <div>Análisis</div>
+        <div>{{ analysisType }}</div>
+      </div>
+      <div class="cover__title-subtitle__subtitle">
+        {{ gameDate }}
+      </div>
+    </div>
+    <div v-if="isCoverTypeOne" class="cover-type-one">
+      <div class="team-info-one">
+        <div class="team-data">
+          <div v-if="teamsData.homeTeam.logo" class="team-logo">
+            <img :src="game?.team1?.logo || '/default-logo.png'" alt="Team 1 Logo" />
+          </div>
+          <svg v-else width="160" height="161" viewBox="0 0 160 161" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M80.0068 0.953125C80.0068 0.953125 91.0143 12.208 118.141 12.9913C140.898 13.6509 149.102 7.87917 149.102 7.87917C149.102 7.87917 169.839 67.5339 135.786 117.212C117.894 143.308 83.5935 160.211 79.9656 160.953C76.3789 160.211 42.0372 143.308 24.1449 117.212C-9.8257 67.5339 10.9112 7.87917 10.9112 7.87917C10.9112 7.87917 19.1153 13.6509 41.8723 12.9913C68.9993 12.208 80.0068 0.953125 80.0068 0.953125Z"
+              :fill="teamsShieldColors.homeTeam"
+              :opacity="teamsShieldColors.opacity"
+            />
+          </svg>
+          <div class="team-name">{{ teamsData.homeTeam.name }}</div>
+        </div>
+        <div v-if="isPostMatch" class="team-events">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
+                  stroke="white" stroke-width="1.36665" stroke-linecap="round"
+                  stroke-linejoin="round" />
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
+                  stroke="white" stroke-width="1.36665" stroke-linecap="round"
+                  stroke-linejoin="round" />
+            <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+          <div>00'</div>
+          <div class="separator"></div>
+          <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.367188" y="0.09375" width="9.14286" height="13.7143" rx="2.28571"
+                  fill="#F7C330" />
+          </svg>
+          <div>0</div>
+          <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.109375" y="0.09375" width="9.14286" height="13.7143" rx="1.82857"
+                  fill="#FF0000" />
+          </svg>
+          <div>0</div>
+        </div>
+      </div>
+      <div class="score-one">
+        <div v-if="isPostMatch">
+          {{ score[0] }} : {{ score[1] }}
+        </div>
+      </div>
+      <div class="team-info-one">
+        <div class="team-data">
+          <div v-if="teamsData.awayTeam.logo" class="team-logo">
+            <img :src="game?.team2?.logo || '/default-logo.png'" alt="Team 2 Logo" />
+          </div>
+          <svg v-else width="161" height="161" viewBox="0 0 161 161" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M80.8504 0.953125C80.8504 0.953125 92.9822 3.39499 119.261 10.1779C144.106 16.5733 152.827 19.1314 152.827 19.1314C152.827 19.1314 156.936 44.2089 145.657 90.5655C136.548 127.969 106.742 152.038 80.8504 160.953C54.9977 152.038 25.1527 128.007 16.0442 90.5655C4.8039 44.2477 8.91243 19.1314 8.91243 19.1314C8.91243 19.1314 17.6334 16.5733 42.4783 10.1779C68.7574 3.39499 80.8504 0.953125 80.8504 0.953125Z"
+              :fill="teamsShieldColors.awayTeam"
+              :opacity="teamsShieldColors.opacity"
+            />
+          </svg>
+          <div class="team-name">{{ teamsData.awayTeam.name }}</div>
+        </div>
+        <div v-if="isPostMatch" class="team-events">
+          <div>0</div>
+          <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.367188" y="0.09375" width="9.14286" height="13.7143" rx="2.28571"
+                  fill="#F7C330" />
+          </svg>
+          <div>0</div>
+          <svg width="10" height="14" viewBox="0 0 10 14" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.109375" y="0.09375" width="9.14286" height="13.7143" rx="1.82857"
+                  fill="#FF0000" />
+          </svg>
+          <div class="separator"></div>
+          <div>00'</div>
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
+                  stroke="white" stroke-width="1.36665" stroke-linecap="round"
+                  stroke-linejoin="round" />
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
+                  stroke="white" stroke-width="1.36665" stroke-linecap="round"
+                  stroke-linejoin="round" />
+            <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
+                  stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
+                  stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div v-else class="cover-type-two">
+      <div class="team-data">
+        <div class="team-info">
+          <div v-if="teamsData.homeTeam.logo" class="team-logo">
+            <img :src="game?.team1?.logo || '/default-logo.png'" alt="Team 1 Logo" />
+          </div>
+          <svg v-else width="160" height="161" viewBox="0 0 160 161" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M80.0068 0.953125C80.0068 0.953125 91.0143 12.208 118.141 12.9913C140.898 13.6509 149.102 7.87917 149.102 7.87917C149.102 7.87917 169.839 67.5339 135.786 117.212C117.894 143.308 83.5935 160.211 79.9656 160.953C76.3789 160.211 42.0372 143.308 24.1449 117.212C-9.8257 67.5339 10.9112 7.87917 10.9112 7.87917C10.9112 7.87917 19.1153 13.6509 41.8723 12.9913C68.9993 12.208 80.0068 0.953125 80.0068 0.953125Z"
+              :fill="teamsShieldColors.homeTeam"
+              :opacity="teamsShieldColors.opacity"
+            />
+          </svg>
+          <div v-if="isPostMatch" class="team-score-two">{{ score[0] }}</div>
+        </div>
+        <div v-if="isPostMatch" class="team-goals">
+          <div class="goal">
+            <div>
+              Nombre
+            </div>
+            <div class="bullet"></div>
+            <div>
+              00'
+            </div>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                 xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
+                    stroke="white" stroke-width="1.36665" stroke-linecap="round"
+                    stroke-linejoin="round" />
+              <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
+                    stroke="white" stroke-width="1.36665" stroke-linecap="round"
+                    stroke-linejoin="round" />
+              <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="separator"></div>
+      <div class="team-data">
+        <div class="team-info">
+          <div v-if="isPostMatch" class="team-score-two">{{ score[1] }}</div>
+          <div v-if="teamsData.awayTeam.logo" class="team-logo">
+            <img :src="game?.team2?.logo || '/default-logo.png'" alt="Team 2 Logo" />
+          </div>
+          <svg v-else width="161" height="161" viewBox="0 0 161 161" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M80.8504 0.953125C80.8504 0.953125 92.9822 3.39499 119.261 10.1779C144.106 16.5733 152.827 19.1314 152.827 19.1314C152.827 19.1314 156.936 44.2089 145.657 90.5655C136.548 127.969 106.742 152.038 80.8504 160.953C54.9977 152.038 25.1527 128.007 16.0442 90.5655C4.8039 44.2477 8.91243 19.1314 8.91243 19.1314C8.91243 19.1314 17.6334 16.5733 42.4783 10.1779C68.7574 3.39499 80.8504 0.953125 80.8504 0.953125Z"
+              :fill="teamsShieldColors.awayTeam"
+              :opacity="teamsShieldColors.opacity"
+            />
+          </svg>
+        </div>
+        <div v-if="isPostMatch" class="team-goals">
+          <div class="goal">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                 xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M10.0268 2.83594C6.09038 2.83594 2.89844 6.01986 2.89844 9.94705C2.89844 13.8742 6.09038 17.0582 10.0268 17.0582C13.9632 17.0582 17.1551 13.8742 17.1551 9.94705C17.1551 6.01986 13.9632 2.83594 10.0268 2.83594V2.83594Z"
+                    stroke="white" stroke-width="1.36665" stroke-linecap="round"
+                    stroke-linejoin="round" />
+              <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M8.0826 12.9597L6.87109 9.2304L10.0401 6.92578L13.2097 9.2304L11.9995 12.9597H8.0826Z"
+                    stroke="white" stroke-width="1.36665" stroke-linecap="round"
+                    stroke-linejoin="round" />
+              <path d="M12.7277 3.39453L10.0276 4.54375L7.32812 3.39453" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M4.65662 5.34766L4.91603 8.27341L2.98828 10.4871" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M4.01562 13.6523L6.87533 14.3093L8.38436 16.8279" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M11.7031 16.8213L13.2109 14.3015L16.0697 13.6445" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M17.1051 10.4865L15.1758 8.27156L15.4349 5.34766" stroke="white"
+                    stroke-width="1.36665" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M10.0456 4.54688V6.92693" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M13.2109 9.32248L15.1681 8.27344" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M11.9961 12.9609L13.2064 14.3086" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M8.08198 12.9609L6.87109 14.3099" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M4.91797 8.27344L6.87609 9.22818" stroke="white" stroke-width="1.36665"
+                    stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            <div>
+              00'
+            </div>
+            <div class="bullet"></div>
+            <div>
+              Nombre
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.cover {
+  background-image: var(--background-image);
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 998px;
+  height: 776px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+
+  &__title-subtitle {
+    position: absolute;
+    top: 198px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+
+    &__title {
+      display: flex;
+      gap: 12px;
+      font-size: 42px;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: 0.73;
+      letter-spacing: normal;
+      text-align: center;
+      color: #fff;
+
+      & > div:first-child {
+        font-family: Poppins-Regular, sans-serif;
+      }
+
+      & > div:last-child {
+        font-family: Poppins-Bold, sans-serif;
+      }
+    }
+
+    &__subtitle {
+      font-family: Poppins-Regular, sans-serif;
+      font-size: 20px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: 2.2;
+      letter-spacing: 0.2px;
+      text-align: center;
+      color: #fff;
+    }
+  }
+
+  &__subtitle {
+    opacity: 0.8;
+    font-family: Poppins-Regular, sans-serif;
+    font-size: 20px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 2.2;
+    letter-spacing: 0.2px;
+    text-align: center;
+  }
+}
+
+.cover-type-one {
+  width: var(--width-type-one);
+  max-width: 883px;
+  position: absolute;
+  top: 330px;
+  display: grid;
+  grid-template-columns: var(--grid-template-columns-type-one);
+
+  & > .team-info-one {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+
+    & > .team-data {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 20px;
+
+      & .team-name {
+        font-family: Poppins-Bold, sans-serif;
+        font-size: 42px;
+        font-weight: bold;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 0.73;
+        letter-spacing: normal;
+        text-align: right;
+        color: #fff;
+      }
+    }
+
+    & > .team-events {
+      padding: 6.9px 14.9px;
+      border-radius: 4.6px;
+      background-color: rgba(21, 34, 46, 0.24);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+
+      font-family: Poppins-Medium, sans-serif;
+      font-size: 17.9px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: 1.81;
+      letter-spacing: -0.18px;
+      text-align: left;
+      color: rgba(255, 255, 255, 0.7);
+
+      & .separator {
+        width: 1px;
+        height: 16px;
+        border-right: 1px dotted #fff;
+        margin: 0 8px;
+      }
+    }
+
+    &:Last-child {
+      align-items: flex-end;
+
+      & > .team-data {
+        flex-direction: row-reverse;
+      }
+    }
+  }
+}
+
+.score-one {
+  white-space: nowrap;
+  text-shadow: 0 4.5px 4.5px rgba(0, 0, 0, 0.25);
+  font-family: BebasNeue, Poppins-Bold, sans-serif;
+  font-size: 160px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  //line-height: 0.31;
+  letter-spacing: normal;
+  text-align: center;
+  color: #fff;
+}
+
+.cover-type-two {
+  width: 100%;
+  position: absolute;
+  top: 330px;
+  display: grid;
+  grid-template-columns: 1fr min-content 1fr;
+
+  & > .team-data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    & > .team-info {
+      display: flex;
+      align-items: center;
+
+      & > .team-score-two {
+        text-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
+        font-family: BebasNeue, Poppins-Bold, sans-serif;
+        font-size: 259.1px;
+        font-weight: bold;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 0.21;
+        letter-spacing: normal;
+        text-align: center;
+        color: #fff;
+      }
+    }
+
+    & > .team-goals {
+      margin-top: 46px;
+
+      & > .goal {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+
+        font-family: Poppins-Medium, sans-serif;
+        font-size: 17.9px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.81;
+        letter-spacing: -0.18px;
+        text-align: left;
+        color: rgba(255, 255, 255, 0.7);
+
+        & > .bullet {
+          width: 3px;
+          height: 3px;
+          border-radius: 50%;
+          background-color: rgba(255, 255, 255, 0.7);
+        }
+      }
+    }
+
+    &:first-child {
+      justify-self: flex-end;
+      align-items: flex-end;
+    }
+  }
+
+  & > .separator {
+    height: 161px;
+    border-right: 1px dotted #fff;
+    margin: 0 71px;
+  }
+}
+</style>