357 lines
9.2 KiB
PHP
357 lines
9.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
@include('layouts.shared/title-meta', ['title' => "Form"])
|
|
@include('layouts.shared/head-css', ["mode" => $mode ?? '', "demo" => $demo ?? ''])
|
|
</head>
|
|
<body>
|
|
<div class="container d-flex justify-content-center align-item-center px-0 px-md-3">
|
|
<div class="page-container">
|
|
<div
|
|
class="card page-content-card score-board-page-content-card text-white border-0 mb-0"
|
|
style="
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
rgba(2, 0, 36, 1) 25%,
|
|
rgba(23, 23, 135, 0.9) 50%,
|
|
rgba(72, 72, 222, 0.65) 56%,
|
|
rgba(0, 212, 255, 0) 100%
|
|
),
|
|
url(/images/team4/score-board-page-bg.jpg);
|
|
background-size: auto;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
"
|
|
>
|
|
<div class="company-logo d-flex justify-content-end">
|
|
<img
|
|
src="/images/team4/company-logo.png"
|
|
class="img-fluid"
|
|
alt="company-logo"
|
|
/>
|
|
</div>
|
|
<div id="score-board-page-content" class="card-img-overlay">
|
|
<div class="row row-cols-4 row-card row-head d-flex flex-nowrap">
|
|
<div class="col col-card d-flex justify-content-center align-item-center"> RANK </div>
|
|
<div class="col col-card d-flex justify-content-center align-item-center" > LOGO </div>
|
|
<div class="col col-card d-flex justify-content-center align-item-center text-wrap"> TEAM NAME </div>
|
|
<div class="col col-card d-flex justify-content-center align-item-center"> TEAM RUN RATE </div>
|
|
</div>
|
|
@foreach($competition->participants as $participant)
|
|
<div class="row row-cols-4 row-card d-flex flex-nowrap">
|
|
<div class="col col-card d-flex justify-content-center align-item-center">{{$participant->rank}}</div>
|
|
<div class="col col-card d-flex justify-content-center align-item-center">
|
|
<img src="{{$participant->team->image}}" alt="logo-${item.teamName}" class="mx-auto img-fluid" />
|
|
</div>
|
|
<div class="col col-card d-flex justify-content-start align-item-center text-wrap">{{$participant->team->name}}</div>
|
|
<div class="col col-card d-flex justify-content-center align-item-center">{{$participant->avg_score}}</div>
|
|
</div>
|
|
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style type="text/css">
|
|
body {
|
|
padding-bottom:0px!important;
|
|
}
|
|
.page-container {
|
|
width: 700px;
|
|
height: auto;
|
|
position: relative;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.company-logo {
|
|
margin-bottom: 20px;
|
|
padding-top: 40px;
|
|
margin-right: 15px;
|
|
}
|
|
.company-logo img {
|
|
height: 30px;
|
|
}
|
|
|
|
.col-card {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.page-content-card .card-img-overlay {
|
|
position: relative;
|
|
background-color: rgba(250, 250, 250, 0);
|
|
padding: 0px 15px 10px;
|
|
padding-bottom: 20%;
|
|
}
|
|
.page-content-card .card-img-overlay .row-card {
|
|
background-color: transparent;
|
|
padding: 0px 2px;
|
|
margin: 0;
|
|
min-height: 4.2em;
|
|
color: #fff;
|
|
}
|
|
.page-content-card .card-img-overlay .row.row-card:nth-child(odd) > .col-card {
|
|
color: #333;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.page-content-card .card-img-overlay .row.row-card:nth-child(even) > .col-card {
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(3, 150, 219, 1) 17%,
|
|
rgba(44, 73, 153, 1) 68%
|
|
);
|
|
}
|
|
|
|
.page-content-card .card-img-overlay .col-card {
|
|
font-size: 14px;
|
|
padding: 8px 8px;
|
|
align-items: center;
|
|
line-height: 1.2;
|
|
border: 1px solid #96e9ff;
|
|
}
|
|
|
|
.page-content-card .card-img-overlay .col-card img {
|
|
width: auto;
|
|
height: 25px;
|
|
}
|
|
.page-content-card.score-board-page-content-card
|
|
.card-img-overlay
|
|
.row-card.row-head
|
|
.col-card {
|
|
background: linear-gradient(0deg, rgba(2, 0, 36, 1) 31%, rgb(22 22 116) 82%);
|
|
border: 1px solid #ccc;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
padding: 8px 5px;
|
|
color: #fff;
|
|
}
|
|
.page-content-card .card-img-overlay .col-card {
|
|
max-width: calc((100% / 4));
|
|
flex-basis: calc((100% / 4));
|
|
flex-shrink: 1;
|
|
}
|
|
.page-content-card .card-img-overlay .row-card .col-card:nth-child(1) {
|
|
font-weight: 600;
|
|
}
|
|
.page-content-card .card-img-overlay .col-card:nth-child(3) {
|
|
max-width: calc((3 * (100% / 4)));
|
|
flex-basis: calc((3 * (100% / 4)));
|
|
flex-grow: 1;
|
|
}
|
|
.page-content-card .card-img-overlay .col-card:nth-child(4) {
|
|
max-width: calc((100% / 4) + 20px);
|
|
flex-basis: calc((100% / 4) + 20px);
|
|
}
|
|
|
|
/** Team Score Page **/
|
|
|
|
.page-content-card .card-img-overlay#team-score-board-page-content {
|
|
background-color: rgba(250, 250, 250, 0);
|
|
padding: 0px 25px 25%;
|
|
}
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.team-logo-container {
|
|
min-height: 22em;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
background-color: #fff;
|
|
}
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.team-logo-container
|
|
img {
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
.page-content-card .card-img-overlay#team-score-board-page-content .col-card {
|
|
max-width: calc((100% / 8));
|
|
flex-basis: calc((100% / 8));
|
|
flex-shrink: 1;
|
|
align-items: center;
|
|
}
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.col-card:nth-child(1) {
|
|
max-width: calc((3.2 * (100% / 8)));
|
|
flex-basis: calc((3.2 * (100% / 8)));
|
|
flex-grow: 1;
|
|
}
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.col-card:nth-child(2),
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.col-card:nth-child(3) {
|
|
max-width: calc(1.4 * (100% / 8));
|
|
flex-basis: calc(1.4 * (100% / 8));
|
|
}
|
|
.page-content-card .card-img-overlay#team-score-board-page-content .row-card {
|
|
background-color: transparent;
|
|
padding: 0px 3px;
|
|
margin: 0;
|
|
min-height: 5.68em;
|
|
color: #333;
|
|
}
|
|
.page-content-card.team-score-board-card
|
|
.card-img-overlay
|
|
.row-card.row-head
|
|
.col-card {
|
|
background: linear-gradient(
|
|
264deg,
|
|
rgba(196, 36, 22, 1) 15%,
|
|
rgba(219, 113, 3, 1) 81%
|
|
) !important;
|
|
border: 1px solid rgb(240, 140, 32);
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 8px 3px;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.page-content-card.team-score-board-card
|
|
.card-img-overlay
|
|
.row.row-card:nth-child(odd)
|
|
> .col-card {
|
|
color: #333;
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(101, 197, 239, 1) 15%,
|
|
rgba(255, 255, 255, 1) 81%
|
|
);
|
|
}
|
|
|
|
.page-content-card.team-score-board-card
|
|
.card-img-overlay
|
|
.row.row-card:nth-child(even)
|
|
> .col-card {
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(87, 107, 175, 1) 15%,
|
|
rgba(255, 255, 255, 1) 81%
|
|
);
|
|
}
|
|
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.row-card:last-child {
|
|
min-height: 8.8em;
|
|
color: #fffe78;
|
|
|
|
padding-top: 0.65em;
|
|
}
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.row-card:last-child
|
|
.col-card {
|
|
font-weight: bold;
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(196, 36, 22, 1) 15%,
|
|
rgba(219, 113, 3, 1) 81%
|
|
);
|
|
border: 1px solid rgb(240, 140, 32);
|
|
color: #fffe78;
|
|
}
|
|
|
|
/* Responsive styles */
|
|
@media screen and (max-width: 767px) {
|
|
.page-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.col-card {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.page-content-card .card-img-overlay {
|
|
padding: 0% 10px 30%;
|
|
}
|
|
.page-content-card .card-img-overlay .col-card img {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.page-content-card.score-board-page-content-card
|
|
.card-img-overlay
|
|
.row-card.row-head
|
|
.col-card {
|
|
padding: 5px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.page-content-card .card-img-overlay .row-card {
|
|
min-height: 2.75em;
|
|
}
|
|
.page-content-card .card-img-overlay .col-card {
|
|
font-size: 12px;
|
|
padding: 4px 8px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/** Team Score Page **/
|
|
.page-content-card .card-img-overlay#team-score-board-page-content {
|
|
padding: 0% 10px 40%;
|
|
}
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.team-logo-container {
|
|
min-height: 12em;
|
|
margin-bottom: 15px;
|
|
padding: 20px;
|
|
}
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.team-logo-container
|
|
img {
|
|
height: 80px;
|
|
width: auto;
|
|
}
|
|
|
|
.page-content-card .card-img-overlay#team-score-board-page-content .row-card {
|
|
/* background-color: lightblue; */
|
|
background-color: transparent;
|
|
padding: 0px 3px;
|
|
margin: 0;
|
|
min-height: 2.95em;
|
|
color: #333;
|
|
}
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.row-card:last-child {
|
|
min-height: 4em;
|
|
}
|
|
.page-content-card.team-score-board-card
|
|
.card-img-overlay
|
|
.row-card.row-head
|
|
.col-card {
|
|
font-size: 12px;
|
|
}
|
|
.page-content-card
|
|
.card-img-overlay#team-score-board-page-content
|
|
.col-card:nth-child(1) {
|
|
max-width: calc((1.8 * (100% / 8)));
|
|
flex-basis: calc((1.8 * (100% / 8)));
|
|
}
|
|
.page-content-card.team-score-board-card .card-img-overlay .col-card {
|
|
font-size: 12px;
|
|
padding: 5px 8px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
#team-score-board-content {
|
|
overflow: scroll;
|
|
}
|
|
#team-score-board-content > div {
|
|
min-width: 600px;
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |