-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
386 lines (366 loc) · 24.4 KB
/
index.html
File metadata and controls
386 lines (366 loc) · 24.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ubuntu Halloween Desktop</title>
<link rel="stylesheet" href="./css/output.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Eater&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Eater&family=Nosifer&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Eater&family=Nosifer&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
rel="stylesheet">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body class="bg-halloweenbg min-h-screen bg-cover text-white p-4">
<div id="app">
<!-- Audio -->
<audio ref="music" loop autoplay>
<source src="resource/loop2.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
<div class="flex items-center justify-between mb-4">
<h1 class="text-2xl font-eater">Muro de los lamentos - Linux Halloween Edition</h1>
<button @click="Mute" class="mt-4 p-2 rounded">
<img v-if="isMute" src="resource/mute.svg" alt="unmute" class="w-5 h-5">
<img v-else src="resource/unmute.svg" alt="unmute" class="w-5 h-5">
</button>
</div>
<!-- Columna 1-->
<div class="grid grid-cols-6 gap-4">
<button @click="showTerminal"
class="flex flex-col items-center justify-center p-4 bg-black bg-opacity-50 rounded-lg hover:bg-opacity-70 transition-all">
<img src="resource/terminal.svg" alt="boton terminal" class="w-24 h-24">
<span class="mt-2">Terminal</span>
</button>
</div>
<!-- Columna 2-->
<div class="grid grid-cols-6 gap-4">
<!-- Boton poema-->
<button @click="showText"
class="flex flex-col items-center justify-center m-2 p-4 bg-black bg-opacity-50 rounded-lg hover:bg-opacity-70 transition-all">
<img src="resource/doc-text.svg" alt="boton poema" class="w-24 h-24">
<span class="mt-2">PoemaIncompleto.txt</span>
</button>
<!-- Boton pista-->
<button @click="showProgressBar(); startLoading()"
class="flex flex-col items-center justify-center m-2 p-4 bg-black bg-opacity-50 rounded-lg hover:bg-opacity-70 transition-all">
<img src="resource/eye.svg" alt="boton pista" class="w-24 h-24">
<span class="mt-2">Pista</span>
</button>
</div>
<!-- Columna 3-->
<div class="grid grid-cols-6 gap-4">
<a href="https://www.cuentosdepoe.com/poemas-edgar-allan-poe/el-cuervo/?authuser=1"
target="_blank"
class="flex flex-col items-center justify-center m-2 p-4 bg-black bg-opacity-50 rounded-lg hover:bg-opacity-70 transition-all">
<img src="resource/globe.svg" alt="boton texto" class="w-24 h-24">
<span class="mt-2">Poema original.lnk</span>
</a>
<!-- Boton Poema Org -->
<button @click="showTextOrg"
class="flex flex-col items-center justify-center m-2 p-4 bg-black bg-opacity-50 rounded-lg hover:bg-opacity-70 transition-all">
<img src="resource/doc-text.svg" alt="boton poema" class="w-24 h-24">
<span class="mt-2">Poema Original.txt</span>
</button>
</div>
<!-- modal 1 terminal -->
<div class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center"
:class="isTerminalVisible ? 'flex' : 'hidden'">
<div class="bg-gray-900 max-w-8xl rounded-lg shadow-lg overflow-hidden">
<div class="flex items-center justify-between bg-gray-800 px-4 py-2">
<h2 class="text-sm font-eater">Halloween Terminal</h2>
<button @click="showTerminal" class="bg-red-600 text-gray-400 hover:bg-red-500 px-2 py-1">×
</button>
</div>
<div class="p-4">
<pre ref="TerminalOutput"
class="text-green-400 font-nosifer text-xs mb-4 h-40 overflow-y-auto overflow-x-hidden break-all whitespace-pre-wrap">
{{ TerminalContent }}
</pre>
<div class="flex">
<label for="commandInput" class="sr-only"></label>
<span class="text-green-400 mr-2">$</span>
<input type="text" v-model="commandargs" @keydown.enter="commandInput"
class="flex-grow bg-transparent text-white focus:outline-none"
placeholder="Escriba un comando...">
</div>
</div>
</div>
</div>
<!-- modal 2 poema -->
<div class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center"
:class="isTextVisible ? 'flex' : 'hidden'">
<div class="bg-gray-900 max-w-7xl rounded-lg shadow-lg overflow-hidden">
<div class="flex items-center justify-between bg-gray-800 px-4 py-2">
<h2 class="text-sm font-eater">PoemaIncompleto.txt</h2>
<button @click="showText" class="bg-red-600 hover:bg-red-500 px-2 py-1">×</button>
</div>
<div class="p-4 max-h-100 max-w-4xl overflow-y-auto">
<p class="font-amaticsc text-2xl">Una fosca media noche, cuando en tristes reflexiones, sobre más de un
raro infolio de olvidados cronicones inclinaba soñoliento la cabeza, de repente a mi puerta oí
llamar: como si alguien, suavemente, se pusiese con incierta mano tímida a tocar: «Es—me dije—una
visita que llamando está a mi puerta: eso es ¡y nada más!» ¡Ah! Bien claro lo recuerdo: era el crudo
mes del y su espectro cada moribunda enviaba al suelo. Cuán ansioso el nuevo día deseaba, en la
lectura procurando en vano hallar tregua a la honda desventura de la muerte de Leonora, la radiante,
la sin par virgen pura a quien Leonora las querubes llaman hora ya sin nombre… ¡nunca más! Y el
crujido triste, incierto, de las rojas colgaduras me aterraba, me llenaba de pavuras, de tal modo,
que el latido de mi pecho palpitante procurando dominar, «es, sin duda, un visitante—repetía con
instancia— que a mi alcoba quiere un tardío visitante a las puertas de mi estancia… eso es todo, ¡y
más!» Paso a paso, fuerza y bríos fué mi espíritu cobrando: «Caballero—dije—o dama: mil perdones os
demando; mas, el caso es que dormía, y con tanta gentileza me vinisteis a llamar, y con tal
delicadeza y tan tímida constancia os pusisteis a tocar que no oí»—dije—y las puertas abrí al punto
de mi estancia; ¡sombras sólo y… nada más! Mudo, trémulo, en la sombra por mirar haciendo empeños,
quedé allí, cual antes nadie los soñó, forjando sueños; más profundo era el silencio, y la calma no
acusaba ruido alguno… Resonar sólo un nombre se escuchaba que en voz baja a aquella hora yo me puse
a murmurar, y que el eco repetía como un ¡Leonora!… esto apenas, ¡nada más! A mi alcoba retornando
con el alma en turbulencia pronto oí llamar de nuevo—esta vez con más violencia, «De seguro—dije—es
algo que se posa en mi persiana; pues, veamos de encontrar la razón abierta y llana de este caso
raro y serio y el enigma averiguar. Calma un instante y aclaremos el misterio… —Es el viento—y nada
más!» La ventana abrí—y con rítmico aleteo y garbo extraño entró un cuervo majestuoso de la sacra
edad de antaño. Sin pararse ni un instante ni señales dar de susto, con aspecto señorial, fué a
posarse sobre un busto de Minerva que ornamenta de mi puerta el cabezal; sobre el busto que de Palas
la figura representa, fué y posose—¡y nada más! Trocó entonces el negro pájaro en sonrisas mi
tristeza con su grave, torva y seria decorosa gentileza; y le dije: «Aunque la cresta calva llevas,
de seguro no eres cuervo nocturnal, viejo, infausto cuervo oscuro, vagabundo en la Dime:—«¿Cuál tu
nombre, cuál en el reino plutoniano de la noche y de la niebla?…» Dijo el cuervo: «¡Nunca más!»
Asombrado quedé oyendo así hablar al avechucho, si bien su árida respuesta no expresaba poco o
mucho; pues preciso es convengamos en que nunca hubo criatura que lograse contemplar ave alguna en
la moldura de su puerta encaramada, ave o bruto reposar sobre efigie en la cornisa de su puerta,
cincelada, con tal nombre: «¡Nunca más!» Mas el cuervo, fijo, inmóvil, en la grave efigie aquella,
sólo dijo esa palabra, cual si su alma fuese en ella vinculada—ni una pluma sacudía, ni un acento se
le oía pronunciar… Dije entonces al momento: «Ya otros antes se han marchado, y la aurora al
despuntar, él también se irá volando cual mis sueños han volado.» Dijo el cuervo:»¡Nunca más!» Por
respuesta tan abrupta como justa sorprendido, «no hay ya duda alguna—dije—lo que dice es aprendido;
aprendido de algún amo desdichoso a quien la suerte persiguiera sin cesar, persiguiera hasta la
muerte, hasta el punto de, en su duelo, sus canciones terminar, y el clamor de la esperanza con el
triste ritornelo de jamás, ¡y nunca más!» Mas el cuervo, provocando mi alma triste a la sonrisa mi
sillón rodé hasta el frente al ave, al busto, a la cornisa; luego, en la seda, fantasía y fantasía
dime entonces a juntar, por saber qué pretendía aquel pájaro ominoso de un pasado inmemorial, aquel
hosco, torvo, infausto, cuervo lúgubre y odioso al graznar: «¡Nunca jamás!» Quedé aquesto,
investigando frente al cuervo en honda calma, cuyos ojos encendidos me abrasaban pecho y alma. Esto
y más—sobre cojines reclinado—con anhelo me empeñaba en descifrar, sobre el rojo terciopelo do
imprimía viva huella luminoso mi fanal— terciopelo cuya púrpura ¡ay! jamás volverá ella a
oprimir—¡Ah! ¡Nunca más! Pareciome el aire entonces, por incógnito incensario que un querube
columpiase de mi alcoba en el santuario, perfumado—«Miserable sér—me dije—Dios te ha oído y por
medio angelical, tregua, tregua y el olvido del recuerdo de Leonora te ha venido hoy a brindar:
¡bebe! bebe ese nepente, y así todo olvida ahora. Dijo el cuervo: «¡Nunca más!» «Eh, profeta—dije—o
duende, mas profeta al fin, ya seas ave o diablo—ya te envíe la tormenta, ya te veas por los ábregos
barrido a esta playa, desolado pero intrépido a este hogar por los males devastado, dime, dime, te
lo imploro: ¿Llegaré jamás a hallar algún bálsamo o consuelo para el mal que triste lloro?» Dijo el
cuervo: «¡Nunca más!» «Oh, profeta—dije—o diablo—Por ese ancho combo velo de zafir que nos cobija,
por el mismo Dios del Cielo a quien ambos adoramos, dile a esta alma adolorida, presa infausta del
pesar, si jamás en otra vida la doncella arrobadora a mi seno he de estrechar, la alma virgen a
quien llaman los arcángeles Leonora!» Dijo el cuervo: «¡Nunca más!» «Esa voz, oh, cuervo, sea la
señal de la partida, grité alzándome:—¡Retorna, vuelve a tu hórrida guarida, la plutónica ribera de
la noche y de la bruma!… de tu horrenda falsedad en memoria, ni una pluma dejes, negra, ¡El busto
deja! ¡Deja en paz mi soledad! Quita el pico de mi pecho. De mi umbral tu forma aleja…» Dijo el
cuervo: «¡Nunca más!» Y aun el cuervo inmóvil, fijo, sigue fijo en la escultura, sobre el busto que
ornamenta de mi puerta la moldura… y sus ojos son los ojos de un demonio que, durmiendo, las
visiones ve del mal; y la luz sobre él cayendo, sobre el suelo arroja, trunca su ancha sombra
funeral, y mi alma de esa sombra que en el suelo flota… ¡nunca se alzará… nunca jamás!</p>
</div>
</div>
</div>
<!-- modal 3 pistas -->
<div class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center"
:class="isProgresVisible ? 'flex' : 'hidden'">
<div class="bg-gray-900 max-w-7xl h-40 rounded-lg shadow-lg overflow-hidden p-6">
<!-- Barra de progreso -->
<div class="w-72 bg-gray-300 h-6 mb-4">
<div class="bg-blue-600 h-6 w-72"
:style="{ width: progress + '%' }">
</div>
</div>
<div class="flex justify-center">
<p :class="progress >= 100 ? 'hidden' : ''">Cargando pista...</p>
<!-- Mensaje al completar -->
<p v-if="progress >= 100">{{ message }}</p>
</div>
<div class="flex justify-center">
<button @click="showProgressBar" class="mt-4 p-2 bg-red-600 rounded"
:class="progress >= 100 ? '' : 'hidden' ">Cerrar
</button>
</div>
</div>
</div>
<!-- modal 4 poema original -->
<div class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center"
:class="isTextOrgVisible ? 'flex' : 'hidden'">
<div class="bg-gray-900 max-w-7xl rounded-lg shadow-lg overflow-hidden">
<div class="flex items-center justify-between bg-gray-800 px-4 py-2">
<h2 class="text-sm font-eater">Poema Original.txt</h2>
<button @click="showTextOrg" class="bg-red-600 hover:bg-red-500 px-2 py-1">×</button>
</div>
<div class="p-4 max-h-100 max-w-4xl overflow-y-auto">
<p class="font-amaticsc text-2xl">Una fosca media noche, cuando en tristes reflexiones,
sobre más de un raro infolio de olvidados cronicones
inclinaba soñoliento la cabeza, de repente
a mi puerta oí llamar:
como si alguien, suavemente, se pusiese con incierta
mano tímida a tocar:
«Es—me dije—una visita que llamando está a mi puerta:
eso es todo, ¡y nada más!»
¡Ah! Bien claro lo recuerdo: era el crudo mes del hielo,
y su espectro cada brasa moribunda enviaba al suelo.
Cuán ansioso el nuevo día deseaba, en la lectura
procurando en vano hallar
tregua a la honda desventura de la muerte de Leonora,
la radiante, la sin par
virgen pura a quien Leonora las querubes llaman hora
ya sin nombre… ¡nunca más!
Y el crujido triste, incierto, de las rojas colgaduras
me aterraba, me llenaba de fantásticas pavuras,
de tal modo, que el latido de mi pecho palpitante
procurando dominar,
«es, sin duda, un visitante—repetía con instancia—
que a mi alcoba quiere entrar;
un tardío visitante a las puertas de mi estancia…
eso es todo, ¡y nada más!»
Paso a paso, fuerza y bríos
fué mi espíritu cobrando:
«Caballero—dije—o dama:
mil perdones os demando;
mas, el caso es que dormía,
y con tanta gentileza
me vinisteis a llamar,
y con tal delicadeza
y tan tímida constancia
os pusisteis a tocar
que no oí»—dije—y las puertas
abrí al punto de mi estancia;
¡sombras sólo y…
nada más!
Mudo, trémulo, en la sombra por mirar haciendo empeños,
quedé allí, cual antes nadie los soñó, forjando sueños;
más profundo era el silencio, y la calma no acusaba
ruido alguno… Resonar
sólo un nombre se escuchaba que en voz baja a aquella hora
yo me puse a murmurar,
y que el eco repetía como un soplo: ¡Leonora!…
esto apenas, ¡nada más!
A mi alcoba retornando con el alma en turbulencia
pronto oí llamar de nuevo—esta vez con más violencia,
«De seguro—dije—es algo que se posa en mi persiana;
pues, veamos de encontrar
la razón abierta y llana de este caso raro y serio
y el enigma averiguar.
¡Corazón! Calma un instante y aclaremos el misterio…
—Es el viento—y nada más!»
La ventana abrí—y con rítmico aleteo y garbo extraño
entró un cuervo majestuoso de la sacra edad de antaño.
Sin pararse ni un instante ni señales dar de susto,
con aspecto señorial,
fué a posarse sobre un busto de Minerva que ornamenta
de mi puerta el cabezal;
sobre el busto que de Palas la figura representa,
fué y posose—¡y nada más!
Trocó entonces el negro pájaro en sonrisas mi tristeza
con su grave, torva y seria decorosa gentileza;
y le dije: «Aunque la cresta calva llevas, de seguro
no eres cuervo nocturnal,
viejo, infausto cuervo oscuro, vagabundo en la tiniebla…
Dime:—«¿Cuál tu nombre, cuál
en el reino plutoniano de la noche y de la niebla?…»
Dijo el cuervo: «¡Nunca más!»
Asombrado quedé oyendo así hablar al avechucho,
si bien su árida respuesta no expresaba poco o mucho;
pues preciso es convengamos en que nunca hubo criatura
que lograse contemplar
ave alguna en la moldura de su puerta encaramada,
ave o bruto reposar
sobre efigie en la cornisa de su puerta, cincelada,
con tal nombre: «¡Nunca más!»
Mas el cuervo, fijo, inmóvil, en la grave efigie aquella,
sólo dijo esa palabra, cual si su alma fuese en ella
vinculada—ni una pluma sacudía, ni un acento
se le oía pronunciar…
Dije entonces al momento: «Ya otros antes se han marchado,
y la aurora al despuntar,
él también se irá volando cual mis sueños han volado.»
Dijo el cuervo:»¡Nunca más!»
Por respuesta tan abrupta como justa sorprendido,
«no hay ya duda alguna—dije—lo que dice es aprendido;
aprendido de algún amo desdichoso a quien la suerte
persiguiera sin cesar,
persiguiera hasta la muerte, hasta el punto de, en su duelo,
sus canciones terminar,
y el clamor de la esperanza con el triste ritornelo
de jamás, ¡y nunca más!»
Mas el cuervo, provocando mi alma triste a la sonrisa
mi sillón rodé hasta el frente al ave, al busto, a la cornisa;
luego, hundiéndome en la seda, fantasía y fantasía
dime entonces a juntar,
por saber qué pretendía aquel pájaro ominoso
de un pasado inmemorial,
aquel hosco, torvo, infausto, cuervo lúgubre y odioso
al graznar: «¡Nunca jamás!»
Quedé aquesto, investigando frente al cuervo en honda calma,
cuyos ojos encendidos me abrasaban pecho y alma.
Esto y más—sobre cojines reclinado—con anhelo
me empeñaba en descifrar,
sobre el rojo terciopelo do imprimía viva huella
luminoso mi fanal—
terciopelo cuya púrpura ¡ay! jamás volverá ella
a oprimir—¡Ah! ¡Nunca más!
Pareciome el aire entonces,
por incógnito incensario
que un querube columpiase
de mi alcoba en el santuario,
perfumado—«Miserable sér—me dije—Dios te ha oído
y por medio angelical,
tregua, tregua y el olvido del recuerdo de Leonora
te ha venido hoy a brindar:
¡bebe! bebe ese nepente, y así todo olvida ahora.
Dijo el cuervo: «¡Nunca más!»
«Eh, profeta—dije—o duende,
mas profeta al fin, ya seas
ave o diablo—ya te envíe
la tormenta, ya te veas
por los ábregos barrido a esta playa,
desolado
pero intrépido a este hogar
por los males devastado,
dime, dime, te lo imploro:
¿Llegaré jamás a hallar
algún bálsamo o consuelo para el mal que triste lloro?»
Dijo el cuervo: «¡Nunca más!»
«Oh, profeta—dije—o diablo—Por ese ancho combo velo
de zafir que nos cobija, por el mismo Dios del Cielo
a quien ambos adoramos, dile a esta alma adolorida,
presa infausta del pesar,
si jamás en otra vida la doncella arrobadora
a mi seno he de estrechar,
la alma virgen a quien llaman los arcángeles Leonora!»
Dijo el cuervo: «¡Nunca más!»
«Esa voz,
oh, cuervo, sea
la señal
de la partida,
grité alzándome:—¡Retorna,
vuelve a tu hórrida guarida,
la plutónica ribera de la noche y de la bruma!…
de tu horrenda falsedad
en memoria, ni una pluma dejes, negra, ¡El busto deja!
¡Deja en paz mi soledad!
Quita el pico de mi pecho. De mi umbral tu forma aleja…»
Dijo el cuervo: «¡Nunca más!»
Y aun el cuervo inmóvil, fijo, sigue fijo en la escultura,
sobre el busto que ornamenta de mi puerta la moldura…
y sus ojos son los ojos de un demonio que, durmiendo,
las visiones ve del mal;
y la luz sobre él cayendo, sobre el suelo arroja, trunca
su ancha sombra funeral,
y mi alma de esa sombra que en el suelo flota… ¡nunca
se alzará… nunca jamás!</p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>|