templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>UrbaLoca{% block title %} - Inicio{% endblock %}</title>
  7.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  8.         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  9.         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  10.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  11.         <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
  12.         <style>
  13.             body {
  14.                 background-color: white;
  15.                 font-family: 'Trebuchet MS';
  16.                 background-color: #a9cce3;
  17.             }
  18.             .navbar-custom {
  19.                 background: linear-gradient(#2471a3, #1a5276);
  20.                 background-size: 100% 90px; /* Tamaño del patrón pixelado */
  21.             }
  22.             .navbar-custom.fixed-top {
  23.                 background: linear-gradient(135deg, #2471a3, #1a5276);
  24.                 background-size: 100% 90px; /* Tamaño del patrón pixelado */
  25.             }
  26.             .navbar-custom .navbar-nav .nav-link {
  27.                 color: white;
  28.             }
  29.             .banner-principal {
  30.                 background-color: #5499c7;
  31.                 height: 300px;
  32.                 border-bottom: 2px solid #2980b9;
  33.                 margin-top: 58px;
  34.                 background-image: url('/images/web_index_bienvenido.png');
  35.                 background-repeat: no-repeat;
  36.                 background-position: center;
  37.             }
  38.             .banner-principal > .row {
  39.                 height: 100%;
  40.             }
  41.             .img-login {
  42.                 max-width: 215px;
  43.                 margin-bottom: 7px;
  44.             }
  45.             .ulcont {
  46.                 border-radius: 10px;
  47.                 border: 1px solid black;
  48.                 background-color: white;
  49.             }
  50.             .ulcont-footer {
  51.                 border-radius: 10px;
  52.                 border: 1px solid black;
  53.                 padding: 20px;
  54.                 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  55.                 font-size: 14px;
  56.             }
  57.             .ulcont-header {
  58.                 border-top-left-radius: 10px;  /* Esquina superior izquierda */
  59.                 border-top-right-radius: 10px;
  60.                 background: linear-gradient(to bottom, #5499c7, #1a5276);
  61.                 padding: 10px;
  62.             }
  63.             .ulcont-error {
  64.                 background: linear-gradient(to bottom, #ec7063, #cb4335) !important;
  65.             }
  66.             .ulcont-title {
  67.                 color: white;
  68.                 font-size: 16px;
  69.             }
  70.             .ulcont-body {
  71.                 padding: 10px;
  72.                 color: black;
  73.                 font-size: 16px;
  74.             }
  75.             .consequences {
  76.                 background: #f8d7da;
  77.                 color: #721c24;
  78.                 padding: 10px;
  79.                 border-radius: 5px;
  80.                 margin-bottom: 10px;
  81.             }
  82.             .footer-ul {
  83.                 height: 500px;
  84.                 margin-top: 20px;
  85.                 padding: 20px;
  86.                 border-top: 2px solid #666666;
  87.                 width: 100%;
  88.                 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  89.                     url('/images/nuevo_fondo.png') no-repeat center center;
  90.                 background-size: cover;
  91.                 color: white;
  92.                 background-attachment: fixed;
  93.             }
  94.             .footer-links, .footer-links a {
  95.                 text-align: center;
  96.                 color: white;
  97.             }
  98.             .card {
  99.                 height: 100%;
  100.                 display: flex;
  101.                 flex-direction: column;
  102.             }
  103.             .card-body {
  104.                 display: flex;
  105.                 flex-direction: column;
  106.                 justify-content: space-between;
  107.                 flex-grow: 1;
  108.             }
  109.             .card-body .btn {
  110.                 margin-top: auto;
  111.             }
  112.             .ul-btn {
  113.                 border-radius: 10px;
  114.                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  115.                 background-color: #cccccc;
  116.                 padding: 4px;
  117.                 text-align: center;
  118.                 text-decoration: none;
  119.                 color: black;
  120.             }
  121.             .ul-btn:hover {
  122.                 background-color:#999999;
  123.                 color: white;
  124.                 text-decoration: none;
  125.             }
  126.             .statusConexServer {
  127.                 width: 150px;
  128.                 margin-top: 20px;
  129.                 padding: 10px;
  130.                 margin: 0 auto;
  131.                 vertical-align: middle;
  132.             }
  133.             .cat-active {
  134.                 color: red;
  135.             }
  136.             .alert {
  137.                 margin: 20px;
  138.                 margin: 20px auto;
  139.             }
  140.         </style>
  141.     </head>
  142.     <body>
  143.         <div id="fb-root"></div>
  144.         <script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v20.0" nonce="G0xD5uQ0"></script>
  145.         <nav class="navbar navbar-expand-lg navbar-custom fixed-top">
  146.             <a class="navbar-brand" href="{{ path('app_index') }}"><img src="/images/logo2024.png" style="height: 48px;"></a>
  147.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  148.                 <span class="navbar-toggler-icon"><img src="/images/menu.png" style="height: 24px;"></span>
  149.             </button>
  150.             <div class="collapse navbar-collapse" id="navbarNav">
  151.                 <ul class="navbar-nav ml-auto">
  152.                     <li class="nav-item active">
  153.                         <a class="nav-link" href="{{ path('app_index') }}"><img src="/images/miscasas.png" style="height: 24px;"> Inicio</a>
  154.                     </li>
  155.                     <li class="nav-item">
  156.                         <a class="nav-link" href="{{ path('app_web_loks') }}"><img src="/images/loks.png" style="height: 24px;"> Loks</a>
  157.                     </li>
  158.                     <li class="nav-item">
  159.                         <a class="nav-link" href="{{ path('app_web_tienda') }}"><img src="/images/tienda.png" style="height: 24px;"> Tienda</a>
  160.                     </li>
  161.                     <li class="nav-item">
  162.                         <a class="nav-link" href="{{ path('app_web_seguridad') }}"><img src="/placas/MOD_1.png" style="height: 24px;"> Seguridad</a>
  163.                     </li>
  164.                     <li class="nav-item">
  165.                         <a class="nav-link" href="https://foro.urba-loca.es" target="_blank"><img src="/images/icono_foro.png" style="height: 24px;"> Foro</a>
  166.                     </li>
  167.                     <li class="nav-item">
  168.                         <a class="nav-link" href="{{ path('app_web_contacto') }}"><img src="/images/help.png" style="height: 24px;"> Contacto</a>
  169.                     </li>
  170.                 </ul>
  171.             </div>
  172.         </nav>
  173.         <div class="banner-principal">
  174.             <div class="row w-100  d-flex align-items-center">
  175.                 <div class="col-md-3 col-sm-6 col-12 text-center">
  176.                     {% if app.user %}
  177.                         {% include 'web/miperfil.html.twig' %}
  178.                     {% else %}
  179.                         <div class="ulcont mt-3 ml-3" style="height: 100%;">
  180.                             <div class="ulcont-header">
  181.                                 <div class="ulcont-title">Entra a <strong>UrbaLoca</strong></div>
  182.                             </div>
  183.                             <div class="ulcont-body">
  184.                                 <div class="row">
  185.                                     <div class="col-12">
  186.                                         <form method="POST" action="{{ path('app_login') }}">
  187.                                             <input type="text" class="loginInput mb-2" placeholder="Usuario" name='username' value="" autocomplete="username" required autofocus>
  188.                                             <input type="password" class="loginInput mb-2" placeholder="Contraseña" name="password" required>
  189.                                             <input type="submit" class="ul-btn" value="Entrar a UrbaLoca"><br><br>
  190.                                             <a href="{{ path('app_forgot_password') }}">Recordar contraseña</a><br>
  191.                                             <a href="{{ path('app_register') }}">Nuevo usuario</a>
  192.                                             <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
  193.                                         </form>
  194.                                     </div>
  195.                                     <div class="col-12">
  196.                                     </div>
  197.                                 </div>
  198.                             </div>
  199.                         </div>
  200.                     {% endif %}
  201.                 </div>
  202.                 <div class="col-md-6 col-sm-6 col-12"></div>
  203.                 <div class="col-md-3 col-sm-6 col-12 text-center">
  204.                     {% if app.user %}
  205.                         <a href="{{ path('app_game') }}" target="_blank"><img src="/images/enterul.png" class="img-fluid"></a><br><br>
  206.                         <div class="ulcont statusConexServer">
  207.                             Conectando...
  208.                         </div>
  209.                     {% else %}
  210.                         <img src="/images/enterul.png" class="img-fluid" onclick="toastr.error('Regístrate para acceder a UrbaLoca');">
  211.                     {% endif %}
  212.                 </div>
  213.             </div>
  214.         </div>
  215.         {% for message in app.flashes('success') %}
  216.             <div class="container">
  217.                 <div class="row">
  218.                     <div class="col">
  219.                         <div class="alert alert-success">{{ message|raw }}</div>
  220.                     </div>
  221.                 </div>
  222.             </div>
  223.         {% endfor %}
  224.         {% for message in app.flashes('error') %}
  225.             <div class="container">
  226.                 <div class="row">
  227.                     <div class="col">
  228.                         <div class="alert alert-danger">{{ message }}</div>
  229.                     </div>
  230.                 </div>
  231.             </div>
  232.         {% endfor %}
  233.         {% block body %}{% endblock %}
  234.         <div class="footer-ul p-4">
  235.             <div class="row ulcont-footer">
  236.                 <div class="col-md-4 text-center">
  237.                     <img src="/images/logo2024.png" class="img-fluid"><br><br>
  238.                     UrbaLoca es un chat virtual isométrico que nació en 2004, y cuya idea original es de Ni0.<br><br>
  239.                     En 2016 cerró oficialmente y escavo <i>-uno de los colaboradores en la programación de UL junto con RaFa-</i> decidió librear el código fuente.<br><br>
  240.                     Existen <strong>dos versiones oficiales de UL</strong>: La versión de escavo (de código libre) y la versión de RaFa (desarrollo privado).<br><br>
  241.                     Te recomendamos que explores también la página <a href="https://urbaloca.es">www.urbaloca.es</a> para ver más contenido de la Urbanización.
  242.                 </div>
  243.                 <div class="col-md-4 text-center">
  244.                     <img src="/images/gana_100_loks_gratis.png" class="img-fluid"><br>
  245.                     Ahora, solo por registrarte obtendrás 100 loks <strong>totalmente gratis.</strong><br><br>
  246.                     Durante el tiempo que dure la versión Alpha, podrás disponer de créditos ilimitados sin pagar nada.<br><br>
  247.                     Los Loks son la moneda de UL. Con ella puedes comprarte la suscripción VIP o comprar muebles exclusivos y rangos en la tienda.<br><br>
  248.                     Visítala para obtener más detalles.
  249.                 </div>
  250.                 <div class="col-md-4 text-center">
  251.                     <img src="/images/sube_furnis.png" class="img-fluid"><br>
  252.                     A partir de la versión <strong>Beta</strong>, podrás subir tus propios furnis o muebles a UrbaLoca.<br><br>
  253.                     Puedes elegir si los <strong>vendes por una comisión</strong> en la tienda.<br><br>
  254.                     Así podrás <strong>ganar loks</strong> compartiendo tus propias creaciones.<br><br>
  255.                     Otros usuarios podrán decorar sus salas con tus diseños, y así haremos una gran comunidad entre todos.<br><br>
  256.                     ¿Te atreves?
  257.                 </div>
  258.             </div>
  259.             <div class="row ulcont-footer mt-4">
  260.                 <div class="footer-links col-12">
  261.                     <a href="/politica-de-privacidad">Política de privacidad</a> - <a href="/politica-de-cookies">Política de cookies</a> - <a href="/aviso-legal">Aviso Legal</a>
  262.                 </div>
  263.             </div>
  264.         </div>
  265.         {% if app.user %}
  266.             <script>
  267.                 window.muebles = [];
  268.                 //window.socket = new WebSocket('ws://localhost:8899');
  269.                 window.socket = new WebSocket('wss://urba-loca.es:9000');
  270.                 window.socket.onopen = () => {
  271.                     $(".statusConexServer").html("Conectado a UL");
  272.                     window.socket.send(JSON.stringify({type: 'connectweb', data: {user: "{{ app.user.username }}", token: "{{ app.user.token }}"}}));
  273.                 };
  274.                 window.socket.onmessage = (event) => {
  275.                     var packet = JSON.parse(event.data);
  276.                     console.log(packet);
  277.                     switch (packet.type) {
  278.                         case 'authenticatedweb':
  279.                             window.socket.send(JSON.stringify({type: 'mueblesdb'}));
  280.                             window.socket.send(JSON.stringify({type: 'creditos'}));
  281.                             window.poderes = packet.data.poderes;
  282.                             window.roles = packet.data.roles;
  283.                             break;
  284.                         case 'creditos':
  285.                             $("#cantLoks").html(packet.data);
  286.                             break;
  287.                         case 'alerta':
  288.                             alert(packet.data);
  289.                             break;
  290.                         case 'mueblesdb':
  291.                             window.muebles = packet.data;
  292.                             window.socket.send(JSON.stringify({type: 'inventario'}));
  293.                             break;
  294.                         case 'inventario':
  295.                             window.inventario = packet.data;
  296.                             if (window.location.pathname == "/inventario") {
  297.                                 InventarioWeb(window.inventario);
  298.                             }
  299.                             break;
  300.                     }
  301.                 };
  302.                 window.socket.onclose = () => {
  303.                     console.log('Disconnected from WebSocket server');
  304.                     $(".statusConexServer").html("Desconectado");
  305.                 };
  306.                 function ComprarMueble(key) {
  307.                     var pregunta = confirm("¿Deseas comprar el mueble seleccionado?");
  308.                     if (pregunta == true) {
  309.                         window.socket.send(JSON.stringify({type: 'comprarmueble', data: {key: key}}));
  310.                     }
  311.                 }
  312.                 function RecargarCreditos() {
  313.                     window.socket.send(JSON.stringify({type: 'recargarcreditos'}));
  314.                 }
  315.             </script>
  316.         {% endif %}
  317.     </body>
  318. </html>