Sindbad~EG File Manager
<div>
<style>
body {
background-image: url('/frontend/equipo.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
*,*:after,*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
svg{
width: 200px;
height: 100px; /* Altura reducida para el semicírculo */
position: relative;
}
path {
stroke-width: 3px;
fill: none;
}
path:nth-child(1) { stroke: #fff; }
path:nth-child(2) {
stroke: #f00;
position: relative;
z-index: 1;
}
.circle_box:nth-child(1) path:nth-child(2) {
stroke-dasharray: 282.743; /* Circunferencia de un semicírculo con radio 95 */
stroke-dashoffset: calc(282.743 - (282.743 * 100) / 100); /* 100% */
}
.circle_box:nth-child(2) path:nth-child(2) {
stroke-dasharray: 282.743;
stroke-dashoffset: calc(282.743 - (282.743 * {{$porcentajeperdido}}) / 100);
stroke: #0f0;
}
.circle_box:nth-child(3) path:nth-child(2) {
stroke-dasharray: 282.743;
stroke-dashoffset: calc(282.743 - (282.743 * {{$porcentajeganado}}) / 100);
stroke: #00f;
}
.circle_box {
font-size: 36px;
color: #fff;
text-align: center;
position: relative;
margin: 0 10px;
}
.circle_value {
position: absolute;
left: 50%;
top: 50px; /* Fixed position to place it over the semicircle arc */
transform: translateX(-50%);
font-size: 36px;
font-weight: bold;
color: #fff;
z-index: 2;
}
.circle_label {
margin-top: 0px;
font-size: 18px;
padding-top: 0px;
padding-bottom: 0px;
}
@media (max-width: 768px) {
.circle_value {
font-size: 28px;
top: 35px;
}
.circle_label {
font-size: 16px;
}
}
@media (max-width: 480px) {
.circle_value {
font-size: 24px;
top: 30px;
}
.circle_label {
font-size: 14px;
}
}
.cardpuntajes {
background-color: white;
border-radius: 25px;
padding: 10px;
border: 4px solid #c29e52;
}
.form {
border-radius: 10px;
border: 2px solid #c29e52;
}
.images {
display: block;
margin-top: 120px;
margin-left: auto;
margin-right: auto;
width: 35%;
position: fixed;
right: 0;
top: 0;
}
@media (max-width: 768px) {
.images {
width: 70%;
margin-top: 60px;
}
}
@media (max-width: 480px) {
.images {
width: 90%;
margin-top: 70%;
}
}
.image-container {
text-align: center;
position: relative;
}
.responsive-image {
width: 300%; /* La imagen ocupa el 100% del contenedor */
max-width: 450px; /* Tamaño máximo para pantallas grandes */
height: auto; /* Mantiene la proporción de la imagen */
transition: transform 0.3s ease; /* Efecto suave al agrandarse */
}
.table-header {
background-color: #c29e52;
color: white;
}
</style>
<?php
use App\Models\Puntos;
use App\Models\Matricula;
use Illuminate\Support\Facades\DB;
?>
<div class="row">
<div class="col-md-8" align="center"><br>
<h3 style="font-size: 4vw; font-weight: bold; color: white;">Puntajes</h3>
</div>
<div class="col-md-8 d-flex align-items-center justify-content-around">
<div class="circle_box">
<div class="circle_value">{{$totalpuntos+$totalpuntosextras}}</div>
<svg viewBox="0 0 200 100">
<path d="M 10,95 A 95,95 0 0 1 190,95" /> <!-- Semicírculo inferior -->
<path d="M 10,95 A 95,95 0 0 1 190,95" /> <!-- Semicírculo inferior -->
</svg>
<div class="circle_label"><strong>Puntos en Juego</strong></div>
</div>
<div class="circle_box">
<div class="circle_value">{{round($porcentajeperdido)}}%</div>
<svg viewBox="0 0 200 100">
<path d="M 10,95 A 95,95 0 0 1 190,95" /> <!-- Semicírculo inferior -->
<path d="M 10,95 A 95,95 0 0 1 190,95" /> <!-- Semicírculo inferior -->
</svg>
<div class="circle_label">Puntos Perdidos</div>
</div>
<div class="circle_box">
<div class="circle_value">{{round($porcentajeganado)}}%</div>
<svg viewBox="0 0 200 100">
<path d="M 10,95 A 95,95 0 0 1 190,95" /> <!-- Semicírculo inferior -->
<path d="M 10,95 A 95,95 0 0 1 190,95" /> <!-- Semicírculo inferior -->
</svg>
<div class="circle_label">Performance</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-8 cardpuntajes">
<div class="row">
<div class="col-md-12">
<br>
</div>
<div class="col-md-2">
<h5>Filtro:</h5>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="">Fecha inicio:</label>
<input type="date" wire:model="fecha_inicio" class="form-control form">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="">Fecha fin:</label>
<input type="date" wire:model="fecha_fin" class="form-control form">
</div>
</div>
</div>
<table class="table table-striped table-responsive">
<thead class="table-header">
<tr>
<th colspan="2"></th>
<th colspan="2">PUNTOS A LOGRAR</b></th>
<th colspan="2"><b>PUNTOS LOGRADOS</b></th>
<th></th>
</tr>
<tr>
<th>MES</th>
<th>MISION</th>
<th>PUNTOS EN JUEGO</th>
<th>EXTRAS</th>
<th>PUNTOS LOGRADOS</th>
<th>EXTRAS</th>
<th>TOTAL PUNTOS</th>
</tr>
</thead>
<tbody style="background-color: rgba(255, 255, 255, 0.8);">
@foreach ($misiones as $value)
<tr>
<?php
$matricula=Matricula::where('usuario_id',Auth::user()->id)->first();
$puntos = Puntos::where('mision_id',$value->id)->where('equipo_id',$matricula->equipo_id)->first();
?>
<td style="color: #343333;">{{ $value->fecha_limite }}</td>
<td style="color: #343333;">
{{ $value->titulo }}
@if($puntos)
<?php
$comentarios=DB::table('comentariomisionequipos as cm')
->join('users as u','cm.usuario_id','u.id')
->select('cm.*','u.name')
->where('cm.punto_id',$puntos->id)->orderBy('cm.id','desc')->get();
?>
@endif
@if($puntos)
@if(count($comentarios)>0)
<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#comentarioModal-{{$value->id}}"><i class="fa fa-comments"></i></button>
<!-- Modal -->
<div class="modal fade" wire:ignore.self id="comentarioModal-{{$value->id}}" tabindex="-1" role="dialog" aria-labelledby="comentarioModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="comentarioModalLabel">Comentario</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlTextarea1">Comentario:</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" wire:model='comentario'></textarea>
<input type="hidden" wire:model="comentario_id">
</div>
<div class="row">
@foreach($comentarios as $comentario)
<div class="col-6" class="">
<p style="color:black; font-size:12px;"><strong>{{ $comentario->name }}</strong></p>
</div>
<div class="col-6 blockquote-footer" align="right">
{{ \Carbon\Carbon::parse($comentario->created_at)->diffForHumans() }}
</div>
<div class="col-12">
<p><small>{{ $comentario->comentario }}</small></p><hr>
</div>
@endforeach
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" wire:click="updatecomentario({{ $puntos->id }})" class="btn btn-success" data-dismiss="modal">Guardar</button>
</div>
</div>
</div>
</div>
@endif
@endif
</td>
<td style="color: #343333;">{{ $value->puntos }}</td>
<td style="color: #343333;">{{ $value->puntos_extras }}</td>
@if (isset($puntos))
<td style="color: #343333;">{{ $puntos->puntos }}</td>
<td style="color: #343333;">{{ $puntos->puntos_extras }}</td>
<td style="color: #343333;">{{ $puntos->puntos_extras+$puntos->puntos }}</td>
</tr>
@else
<td style="color: #343333;">0</td>
<td style="color: #343333;">0</td>
<td style="color: #343333;">0</td>
</tr>
@endif
@endforeach
</tbody>
</table>
<div class="col-md-12" align="center">
{{$misiones->links()}}
</div>
</div>
<div class="col-md-3" style="margin-top: -50px;">
<div class="image-container">
<img src="/frontend/welcome.png" alt="Carsanies" class="img-fluid responsive-image">
</div>
</div>
</div>
<br><br>
</div>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists