<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UrbaLoca{% block title %} - Inicio{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
<style>
body {
background-color: white;
font-family: 'Trebuchet MS';
background-color: #a9cce3;
}
.navbar-custom {
background: linear-gradient(#2471a3, #1a5276);
background-size: 100% 90px; /* Tamaño del patrón pixelado */
}
.navbar-custom.fixed-top {
background: linear-gradient(135deg, #2471a3, #1a5276);
background-size: 100% 90px; /* Tamaño del patrón pixelado */
}
.navbar-custom .navbar-nav .nav-link {
color: white;
}
.banner-principal {
background-color: #5499c7;
height: 300px;
border-bottom: 2px solid #2980b9;
margin-top: 58px;
background-image: url('/images/web_index_bienvenido.png');
background-repeat: no-repeat;
background-position: center;
}
.banner-principal > .row {
height: 100%;
}
.img-login {
max-width: 215px;
margin-bottom: 7px;
}
.ulcont {
border-radius: 10px;
border: 1px solid black;
background-color: white;
}
.ulcont-footer {
border-radius: 10px;
border: 1px solid black;
padding: 20px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
font-size: 14px;
}
.ulcont-header {
border-top-left-radius: 10px; /* Esquina superior izquierda */
border-top-right-radius: 10px;
background: linear-gradient(to bottom, #5499c7, #1a5276);
padding: 10px;
}
.ulcont-error {
background: linear-gradient(to bottom, #ec7063, #cb4335) !important;
}
.ulcont-title {
color: white;
font-size: 16px;
}
.ulcont-body {
padding: 10px;
color: black;
font-size: 16px;
}
.consequences {
background: #f8d7da;
color: #721c24;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.footer-ul {
height: 500px;
margin-top: 20px;
padding: 20px;
border-top: 2px solid #666666;
width: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
url('/images/nuevo_fondo.png') no-repeat center center;
background-size: cover;
color: white;
background-attachment: fixed;
}
.footer-links, .footer-links a {
text-align: center;
color: white;
}
.card {
height: 100%;
display: flex;
flex-direction: column;
}
.card-body {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
.card-body .btn {
margin-top: auto;
}
.ul-btn {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #cccccc;
padding: 4px;
text-align: center;
text-decoration: none;
color: black;
}
.ul-btn:hover {
background-color:#999999;
color: white;
text-decoration: none;
}
.statusConexServer {
width: 150px;
margin-top: 20px;
padding: 10px;
margin: 0 auto;
vertical-align: middle;
}
.cat-active {
color: red;
}
.alert {
margin: 20px;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v20.0" nonce="G0xD5uQ0"></script>
<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
<a class="navbar-brand" href="{{ path('app_index') }}"><img src="/images/logo2024.png" style="height: 48px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="/images/menu.png" style="height: 24px;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ path('app_index') }}"><img src="/images/miscasas.png" style="height: 24px;"> Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_web_loks') }}"><img src="/images/loks.png" style="height: 24px;"> Loks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_web_tienda') }}"><img src="/images/tienda.png" style="height: 24px;"> Tienda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_web_seguridad') }}"><img src="/placas/MOD_1.png" style="height: 24px;"> Seguridad</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://foro.urba-loca.es" target="_blank"><img src="/images/icono_foro.png" style="height: 24px;"> Foro</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_web_contacto') }}"><img src="/images/help.png" style="height: 24px;"> Contacto</a>
</li>
</ul>
</div>
</nav>
<div class="banner-principal">
<div class="row w-100 d-flex align-items-center">
<div class="col-md-3 col-sm-6 col-12 text-center">
{% if app.user %}
{% include 'web/miperfil.html.twig' %}
{% else %}
<div class="ulcont mt-3 ml-3" style="height: 100%;">
<div class="ulcont-header">
<div class="ulcont-title">Entra a <strong>UrbaLoca</strong></div>
</div>
<div class="ulcont-body">
<div class="row">
<div class="col-12">
<form method="POST" action="{{ path('app_login') }}">
<input type="text" class="loginInput mb-2" placeholder="Usuario" name='username' value="" autocomplete="username" required autofocus>
<input type="password" class="loginInput mb-2" placeholder="Contraseña" name="password" required>
<input type="submit" class="ul-btn" value="Entrar a UrbaLoca"><br><br>
<a href="{{ path('app_forgot_password') }}">Recordar contraseña</a><br>
<a href="{{ path('app_register') }}">Nuevo usuario</a>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
</form>
</div>
<div class="col-12">
</div>
</div>
</div>
</div>
{% endif %}
</div>
<div class="col-md-6 col-sm-6 col-12"></div>
<div class="col-md-3 col-sm-6 col-12 text-center">
{% if app.user %}
<a href="{{ path('app_game') }}" target="_blank"><img src="/images/enterul.png" class="img-fluid"></a><br><br>
<div class="ulcont statusConexServer">
Conectando...
</div>
{% else %}
<img src="/images/enterul.png" class="img-fluid" onclick="toastr.error('Regístrate para acceder a UrbaLoca');">
{% endif %}
</div>
</div>
</div>
{% for message in app.flashes('success') %}
<div class="container">
<div class="row">
<div class="col">
<div class="alert alert-success">{{ message|raw }}</div>
</div>
</div>
</div>
{% endfor %}
{% for message in app.flashes('error') %}
<div class="container">
<div class="row">
<div class="col">
<div class="alert alert-danger">{{ message }}</div>
</div>
</div>
</div>
{% endfor %}
{% block body %}{% endblock %}
<div class="footer-ul p-4">
<div class="row ulcont-footer">
<div class="col-md-4 text-center">
<img src="/images/logo2024.png" class="img-fluid"><br><br>
UrbaLoca es un chat virtual isométrico que nació en 2004, y cuya idea original es de Ni0.<br><br>
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>
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>
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.
</div>
<div class="col-md-4 text-center">
<img src="/images/gana_100_loks_gratis.png" class="img-fluid"><br>
Ahora, solo por registrarte obtendrás 100 loks <strong>totalmente gratis.</strong><br><br>
Durante el tiempo que dure la versión Alpha, podrás disponer de créditos ilimitados sin pagar nada.<br><br>
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>
Visítala para obtener más detalles.
</div>
<div class="col-md-4 text-center">
<img src="/images/sube_furnis.png" class="img-fluid"><br>
A partir de la versión <strong>Beta</strong>, podrás subir tus propios furnis o muebles a UrbaLoca.<br><br>
Puedes elegir si los <strong>vendes por una comisión</strong> en la tienda.<br><br>
Así podrás <strong>ganar loks</strong> compartiendo tus propias creaciones.<br><br>
Otros usuarios podrán decorar sus salas con tus diseños, y así haremos una gran comunidad entre todos.<br><br>
¿Te atreves?
</div>
</div>
<div class="row ulcont-footer mt-4">
<div class="footer-links col-12">
<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>
</div>
</div>
</div>
{% if app.user %}
<script>
window.muebles = [];
//window.socket = new WebSocket('ws://localhost:8899');
window.socket = new WebSocket('wss://urba-loca.es:9000');
window.socket.onopen = () => {
$(".statusConexServer").html("Conectado a UL");
window.socket.send(JSON.stringify({type: 'connectweb', data: {user: "{{ app.user.username }}", token: "{{ app.user.token }}"}}));
};
window.socket.onmessage = (event) => {
var packet = JSON.parse(event.data);
console.log(packet);
switch (packet.type) {
case 'authenticatedweb':
window.socket.send(JSON.stringify({type: 'mueblesdb'}));
window.socket.send(JSON.stringify({type: 'creditos'}));
window.poderes = packet.data.poderes;
window.roles = packet.data.roles;
break;
case 'creditos':
$("#cantLoks").html(packet.data);
break;
case 'alerta':
alert(packet.data);
break;
case 'mueblesdb':
window.muebles = packet.data;
window.socket.send(JSON.stringify({type: 'inventario'}));
break;
case 'inventario':
window.inventario = packet.data;
if (window.location.pathname == "/inventario") {
InventarioWeb(window.inventario);
}
break;
}
};
window.socket.onclose = () => {
console.log('Disconnected from WebSocket server');
$(".statusConexServer").html("Desconectado");
};
function ComprarMueble(key) {
var pregunta = confirm("¿Deseas comprar el mueble seleccionado?");
if (pregunta == true) {
window.socket.send(JSON.stringify({type: 'comprarmueble', data: {key: key}}));
}
}
function RecargarCreditos() {
window.socket.send(JSON.stringify({type: 'recargarcreditos'}));
}
</script>
{% endif %}
</body>
</html>