File: /var/www/vhost/disk-apps/teamdemo.sports-crowd.com/resources/views/statistics/results.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Estadisticas Equipo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
body {
text-align: center;
display: flex;
flex-flow: column;
align-items: center;
justify-content: space-between;
background-color: transparent;
line-height: normal;
}
p {
margin: 0 0 8px;
}
.container {
padding: 0px 5px;
width: -webkit-fill-available;
}
.card {
background-color: white;
margin: 1px auto;
box-shadow: 1px 1px 1px 1px grey;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-width: 640px;
width: -webkit-fill-available;
border: 1px solid lightgrey;
min-height: 140px;
}
.card-title {
color: gray;
padding: 3px;
text-transform: uppercase;
font-weight: bold;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: white
}
.card-div {
display: flex;
justify-content: space-around;
align-items: center;
}
.card-end-div {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.card-team {
width: -webkit-fill-available;
}
.card-img {
height: 50px;
}
.card-text-date {
color: white;
font-size: min(3vw, 9px);
margin-top: 4px;
}
.card-text-team {
display: flex;
color: white;
font-size: min(3vw, 10px);
line-height: 1em;
height: 2em;
text-align: center;
justify-content: center;
align-content: center;
margin-top: 4px;
}
.card-text-score {
color: white;
font-size: min(8vw, 28px);
min-width: 50px;
}
.card-text-score-winner {
color: white;
font-size: min(8vw, 28px);
font-weight: bold;
min-width: 50px;
}
.card-text-vs {
color: white;
font-size: min(5vw, 14px);
}
.card-text-finalized {
color: white;
font-size: min(5vw, 14px);
height: 18px;
}
.card-text-status {
color: white;
font-size: min(3vw, 9px);
height: 0px;
}
.card-text-match {
color: white;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: min(3vw, 9px);
}
.item {
margin-bottom: 10px;
}
.carousel-control {
background-image: none !important;
}
.carousel-control span {
color: aliceblue !important;
}
.carousel-indicators {
bottom: -4px !important;
}
.carousel-indicators li {
background-color: grey !important;
}
.carousel-control.left {
margin-left: -15px;
}
.carousel-control.right {
margin-right: -15px;
}
.row {
display: flex;
align-items: center;
justify-content: center;
}
.team-container {
border-radius: 25%;
background-color: white;
padding: 3px;
}
</style>
</head>
<body>
<!-- NEXT MATCHES (PROXIMOS PARTIDOS) -->
@if (isset($data->matches) && count($data->matches) > 0 && !isset($data->carousel_matches))
<div class="container">
<div id="nextMatches" class="carousel" data-ride="">
<!-- Wrapper for slides -->
<div class="carousel-inner">
@foreach ($data->matches as $key => $nextMatch)
<div class="item {{ $key == 0 ? 'active' : '' }}">
<div class="card" style="background-color: {{ $color }}">
<div class="card-div">
<p class="card-text-date">{{ $nextMatch->tournament ?? '' }} ยท
{{ $nextMatch->date ?? '' }} {{ $nextMatch->time ?? '' }}
</p>
</div>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="card-div">
<div class="card-team">
<div class="team-container">
<img src="{{ $nextMatch->teams[0]->thumbnail ?? asset('/img/teamEmpty.png') }}" onerror="if (this.src != 'error.jpg') this.src = '/img/teamEmpty.png';" class="card-img" alt="Team1">
</div>
<span class="card-text-team">
@if (isset($nextMatch->teams[0]))
{{ $nextMatch->teams[0]->name }}
@else
Por definir
@endif
</span>
</div>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div style="display: flex; align-items: center; justify-content: center;">
@if (isset($nextMatch->teams[0]->score))
<div class="card-score">
@if ($nextMatch->teams[0]->score > $nextMatch->teams[1]->score)
<p class="card-text-score-winner">
{{ $nextMatch->teams[0]->score }}
</p>
@else
<p class="card-text-score">{{ $nextMatch->teams[0]->score }}</p>
@endif
</div>
@else
<div class="card-score">
<p class="card-text-score-winner"></p>
</div>
@endif
@if (isset($nextMatch->last) || isset($nextMatch->status) || isset($nextMatch->teams[0]->score))
<p class="card-text-finalized"> - </p>
@else
<p class="card-text-vs"> vs </p>
@endif
@if (isset($nextMatch->teams[1]->score))
<div class="card-score">
@if ($nextMatch->teams[1]->score > $nextMatch->teams[0]->score)
<p class="card-text-score-winner">
{{ $nextMatch->teams[1]->score }}
</p>
@else
<p class="card-text-score">{{ $nextMatch->teams[1]->score }}
</p>
@endif
</div>
@else
<div class="card-score">
<p class="card-text-score-winner"></p>
</div>
@endif
</div>
<div>
@if (isset($nextMatch->last) || isset($nextMatch->status) || isset($nextMatch->teams[0]->score))
<p class="card-text-status"> {{ $nextMatch->status ?? '' }} </p>
@endif
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="card-div">
<div class="card-team">
<div class="team-container">
<img src="{{ $nextMatch->teams[1]->thumbnail ?? asset('/img/teamEmpty.png') }}" onerror="if (this.src != 'error.jpg') this.src = '/img/teamEmpty.png';" class="card-img" alt="Team2">
</div>
<span class="card-text-team">
@if (isset($nextMatch->teams[1]))
{{ $nextMatch->teams[1]->name }}
@else
Por definir
@endif
</span>
</div>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
</div>
<div class="card-end-div">
<p class="card-text-match">{{ $nextMatch->stage ?? '' }}</p>
</div>
</div>
</div>
@endforeach
</div>
@if (count($data->matches) > 1)
<!-- Left and right controls -->
<a class="left carousel-control" href="#nextMatches" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#nextMatches" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
@endif
</div>
</div>
@endif
<!-- CARRUSEL PARTIDOS DATAFACTORY -->
@if(isset($data->carousel_matches))
{!! $data->carousel_matches !!}
@endif
</body>
</html>