Sindbad~EG File Manager

@extends('layouts.frontend')
@section('contenido')
    <style>
        body { 
			background: url(/frontend/fondoprincipal.jpg) no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}

            .calendario-img {
            position: fixed;
            bottom: -40px;
            left: -130px;
            width: 40%; /* Ajusta el tamaño según necesidad */
            z-index: 1000; /* Asegura que esté por encima de otros elementos */
        }

        .contenedor {
                position: relative;
                width: 100%;
                margin: auto;
                text-align: center;
            }
            .image-overlay {
                position: absolute;
                transform: translate(-50%, -50%);
            }
            #giro {
                animation: giro-escala 5s infinite alternate;
            }

            #opacar {
                animation: opacar 3s infinite alternate;
            }

            @keyframes giro-escala {
                0% {
                    transform: translate(-50%, -50%) rotate(0) scale(0.7);
                }
                50% {
                    transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
                }
                100% {
                    transform: translate(-50%, -50%) rotate(360deg) scale(0.7);
                }
            }

            @keyframes opacar {
                0% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.5;
                }
                100% {
                    opacity: 1;
                }
            }
    </style>
        <?php
            use App\Models\Modal;
            $popup=Modal::first();
        ?>
        <livewire:navbar></livewire:navbar> 

        <div class="container">
            @if(!Auth::check())
                <style>
                    body { 
                        background: url(/frontend/fondoprincipal.jpg) no-repeat center center fixed !important; 
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;
                    }
                </style>
                <div class="row justify-content-center align-items-center minh-100">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-6"><br><br>
                        <div class="contenedor">
                            <img src="/frontend/estrella.gif" alt="logo" class="image-overlay" width="80%">
                            <img src="/imgsystem/music.png" alt="logo" id="opacar" class="image-overlay" width="100%">
                            <img src="/imgsystem/vol.png" alt="logo" id="giro" class="image-overlay" width="70%">
                            <img src="/imgsystem/logo.gif" alt="logo" class="image-overlay" width="50%">
                        </div>
                    </div>
                    <div class="col-lg-3"></div>
                </div>
                <div class="row">
                    <div class="col-lg-12" align="center">
                        <h1 style="font-size: 5vw; color: #FF0000 !important;">En Proceso de Actualización</h1>
                    </div>
                </div>
            @else
                <div class="row justify-content-center align-items-center minh-100">
                    <div class="col-md-12">
                        <br><br><br><br><br><br><br><br><br>
                    </div>
                    <div class="col-lg-3"></div>
                    <div class="col-lg-6"><br><br>
                        <div class="contenedor" style="margin-top:100px;">
                           <!-- <img src="/imgsystem/music.png" alt="logo" id="opacar" class="image-overlay" width="100%">
                            <img src="/imgsystem/vol.png" alt="logo" id="giro" class="image-overlay" width="70%"> -->
                            <img src="/imgsystem/logo.gif" alt="logo" class="image-overlay" width="130%">
                        </div>
                    </div>
                    <div class="col-lg-3"></div>
                </div>
            @endif
        </div>

         <!-- Imagen fija en la esquina inferior izquierda -->
    <img src="/frontend/calendario.png" alt="Calendario" class="calendario-img">

        @if($popup)
            @if($popup->estado == 1)
                <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">{{$popup->nombre}}</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body" align="center">
                                @if($popup->tipo == 'imagen')
                                    <img src="{{ asset('modal/'.$popup->enlace) }}" width="100%"><br>
                                @elseif($popup->tipo == 'video')
                                    <video src="{{ asset('modal/'.$popup->enlace) }}" controls width="100%"></video><br>
                                @endif
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    $('#modal').modal('show')
                </script>
            @endif
        @endif
@stop