Skip to content

Commit 86af48e

Browse files
quiellllquiellll
committed
pagina de usuario
1 parent 5439e39 commit 86af48e

10 files changed

Lines changed: 2961 additions & 94 deletions

File tree

‎Stratum/login/index.html‎

Lines changed: 0 additions & 94 deletions
This file was deleted.

‎Stratum/login/login.html‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
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>Stratum: Inicio de sesión</title>
7+
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
9+
<link href="/css/flag-icon.css" rel="stylesheet"/>
10+
11+
<style>
12+
:root {
13+
--forest-green: #2c5530;
14+
--moss-green: #8b9e6e;
15+
--earth-brown: #796355;
16+
--cream: #f4e9d7;
17+
--deep-brown: #403029;
18+
}
19+
20+
body {
21+
font-family: "Special Elite", system-ui;
22+
background: url('https://againstsoftware.github.io/img/Fondo_liso.jpg') no-repeat center center fixed;
23+
background-size: cover;
24+
min-height: 100vh;
25+
margin: 0;
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
}
30+
31+
.login-container {
32+
width: 100%;
33+
max-width: 400px;
34+
padding: 2rem;
35+
}
36+
37+
.card {
38+
background: var(--cream);
39+
filter: drop-shadow(0.1vw 0.1vw 0.1vw var(--deep-brown));
40+
border: none;
41+
border-radius: 8px;
42+
}
43+
44+
.card-header {
45+
background: var(--forest-green);
46+
color: var(--cream);
47+
border: none;
48+
padding: 1.5rem;
49+
text-align: center;
50+
border-radius: 8px 8px 0 0;
51+
}
52+
53+
.form-control {
54+
font-family: "Special Elite", system-ui;
55+
border: 1px solid var(--moss-green);
56+
padding: 0.75rem;
57+
margin-bottom: 1rem;
58+
background-color: rgba(244, 233, 215, 0.5);
59+
}
60+
61+
.form-control:focus {
62+
border-color: var(--forest-green);
63+
box-shadow: 0 0 0 0.2rem rgba(44, 85, 48, 0.25);
64+
}
65+
66+
.form-label {
67+
color: var(--deep-brown);
68+
margin-bottom: 0.5rem;
69+
}
70+
71+
.btn-primary {
72+
background: var(--forest-green);
73+
border: none;
74+
padding: 0.75rem;
75+
width: 100%;
76+
font-family: "Special Elite", system-ui;
77+
transition: 0.3s;
78+
}
79+
80+
.btn-primary:hover {
81+
background: var(--moss-green);
82+
}
83+
84+
.lang-toggle {
85+
position: fixed;
86+
top: 1rem;
87+
right: 1rem;
88+
background: var(--forest-green);
89+
color: var(--cream);
90+
border: none;
91+
padding: 0.5rem;
92+
border-radius: 4px;
93+
font-family: "Special Elite", system-ui;
94+
cursor: pointer;
95+
transition: 0.3s;
96+
}
97+
98+
.lang-toggle:hover {
99+
background: var(--moss-green);
100+
}
101+
102+
.flag-icon {
103+
width: 1.5rem;
104+
height: 1.5rem;
105+
}
106+
107+
.lang-toggle i {
108+
font-size: 1.1rem;
109+
}
110+
111+
.logo-container {
112+
text-align: center;
113+
margin-bottom: 2rem;
114+
}
115+
116+
.logo {
117+
height: 256px;
118+
filter: drop-shadow(0.1vw 0.1vw 0.1vw var(--deep-brown));
119+
}
120+
121+
[data-lang="en"] .es { display: none; }
122+
[data-lang="es"] .en { display: none; }
123+
</style>
124+
</head>
125+
<body data-lang="es">
126+
<button class="lang-toggle" onclick="toggleLanguage()">
127+
<span class="es"><span class="flag-icon flag-icon-gbr"></span></span>
128+
<span class="en"><span class="flag-icon flag-icon-esp"></span></span>
129+
</button>
130+
131+
<div class="login-container">
132+
<div class="logo-container">
133+
<img src="/img/stratum_logo_transparent.png" alt="Stratum Logo" class="logo">
134+
</div>
135+
136+
<div class="card">
137+
<div class="card-header">
138+
<h2 class="mb-0">
139+
<span class="es">Inicio de sesión</span>
140+
<span class="en">Login</span></span>
141+
</h2>
142+
</div>
143+
<div class="card-body">
144+
<form>
145+
<div class="mb-3">
146+
<label class="form-label">
147+
<span class="es">Nombre de usuario</span>
148+
<span class="en">Username</span>
149+
</label>
150+
<input type="text" class="form-control" id="username" required>
151+
</div>
152+
<div class="mb-4">
153+
<label class="form-label">
154+
<span class="es">Contraseña</span>
155+
<span class="en">Password</span>
156+
</label>
157+
<input type="password" class="form-control" id="password" required>
158+
</div>
159+
<button type="button" id="backToGame" class="btn btn-primary">
160+
<span class="es">Iniciar sesión</span>
161+
<span class="en">Login</span>
162+
</button>
163+
</form>
164+
</div>
165+
</div>
166+
</div>
167+
168+
<script>
169+
function toggleLanguage() {
170+
const body = document.body;
171+
const currentLang = body.getAttribute('data-lang');
172+
const newLang = currentLang === 'es' ? 'en' : 'es';
173+
body.setAttribute('data-lang', newLang);
174+
localStorage.setItem('preferredLanguage', newLang);
175+
}
176+
177+
// Set initial language based on localStorage or default to Spanish
178+
const savedLang = localStorage.getItem('preferredLanguage');
179+
if (savedLang) {
180+
document.body.setAttribute('data-lang', savedLang);
181+
}
182+
183+
document.getElementById("backToGame").addEventListener("click", function() {
184+
var username = document.getElementById("username").value;
185+
var password = document.getElementById("password").value;
186+
187+
if (username.trim() === "" || password.trim() === "") {
188+
const currentLang = document.body.getAttribute('data-lang');
189+
alert(currentLang === 'es'
190+
? "Por favor, introduce tanto el nombre de usuario como la contraseña."
191+
: "Please enter both username and password.");
192+
return;
193+
}
194+
195+
if (window.opener) {
196+
window.opener.postMessage({ username: username, password: password }, "*");
197+
window.close();
198+
}
199+
window.location.href = 'profile.html?username=' + encodeURIComponent(username);
200+
});
201+
</script>
202+
</body>
203+
</html>

0 commit comments

Comments
 (0)