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;
            }

            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
            }

            .left-content {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .right-content {
                flex: 1;
                color: white;
                text-align: left;
                padding: 20px;
            }

            .right-content h1 {
                font-size: 3vw;
                font-weight: bold;
            }

            .right-content p {
                font-size: 1.5vw;
                margin: 10px 0;
            }

            .right-content .check {
                color: #00FF00;
                font-size: 2vw;
                margin-right: 10px;
            }

            .character {
                max-width: 50%;
                height: auto;
                animation: float 3s ease-in-out infinite;
            }

            @keyframes float {
                0%, 100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-10px);
                }
            }
        </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.png" 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">
                      
			<style>
.boton-login {
    display: inline-block;
    background-color: #d3d3d3;
    color: black;
    padding: 12px 24px;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
.boton-login:hover {
    background-color: #bfbfbf;
}
</style>

<a href="https://gamificacionbahia.sumar.com.py/login/wordpress" class="boton-login">
   Iniciar sesión nuevamente
</a>


<!--  <h1 style="font-size: 5vw; color: #FF0000 !important;">En Proceso de Actualización</h1> -->
                    </div>
                </div>
            @else 
            <div class="container">
                <!-- Left Content: Character -->
                <div class="left-content">
                    <img src="/frontend/hombre.png" alt="Character" class="character">
                </div>
                <!-- Right Content: Text -->
                <div class="right-content">
                    <h1>PLATAFORMA DE GAMIFICACIÓN</h1>
                    <p><span class="check">✔</span> Esta es una herramienta de gamificación del Grupo Bahía que agrupa a nuestros principales objetivos, por lo que es nuestra estrategia de negocios.</p>
                    <p><span class="check">✔</span> Es transversal en la organización.</p>
                    <p><span class="check">✔</span> Es nuestro ADN.</p>
                </div>
            </div>
            @endif
        </div>
        @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