-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (156 loc) · 7.06 KB
/
index.html
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lucky Pip Boy</title>
<!-- Incluir hojas de estilo de Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<!-- Estilos CSS personalizados -->
<style>
body, html {
height: 100%;
margin: 0;
overflow: hidden; /* Evitar barras de desplazamiento */
background-color: #213d1e; /* Verde oscuro para el fondo */
font-family: 'monospace', monospace; /* Fuente monoespaciada */
color: #36fe00; /* Color de texto (#36fe00) */
position: relative; /* Necesario para posicionar correctamente el bloc de notas */
}
#map {
position: absolute;
left: 0;
top: 0;
width: 1080px; /* Ancho de la imagen */
height: 1080px; /* Alto de la imagen */
background-color: #fff; /* Color de fondo opcional */
}
.note {
position: absolute;
right: 20px; /* Ajusta la posición desde el borde derecho */
bottom: 20px; /* Ajusta la posición desde el borde inferior */
background-color: #1c6608; /* Color de fondo (#1c6608) */
padding: 20px;
border: 2px solid #355e30; /* Verde más oscuro para el borde */
border-radius: 10px;
width: 300px; /* Ancho del bloc de notas */
padding-bottom: 40px; /* Espacio adicional para el contenido editable */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
z-index: 1000; /* Asegura que esté por encima del mapa */
overflow: auto; /* Añadir barra de desplazamiento si el contenido es largo */
color: #36fe00; /* Color de texto (#36fe00) */
}
.pipboy-info {
position: absolute;
left: 20px; /* Ajusta la posición desde el borde izquierdo */
top: 20px; /* Ajusta la posición desde el borde superior */
font-size: 1em; /* Tamaño de fuente */
padding: 10px; /* Añadir relleno */
background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
border-radius: 5px;
}
.pipboy-info span {
font-weight: bold;
}
.clock {
position: absolute;
top: 50px; /* Ajusta la posición desde el borde superior */
right: 20px; /* Ajusta la posición desde el borde derecho */
font-size: 1.5em; /* Tamaño de fuente más grande */
text-align: right;
padding: 15px; /* Añadir relleno para el fondo */
background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
border-radius: 5px;
}
.ip-info {
position: absolute;
top: 120px; /* Ajusta la posición debajo del reloj */
right: 20px; /* Ajusta la posición desde el borde derecho */
font-size: 1.2em; /* Tamaño de fuente más grande */
text-align: right;
padding: 15px; /* Añadir relleno para el fondo */
background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
border-radius: 5px;
}
.version-info {
position: absolute;
top: 190px; /* Ajusta la posición debajo de la IP */
right: 20px; /* Ajusta la posición desde el borde derecho */
font-size: 1.2em; /* Tamaño de fuente más grande */
text-align: right;
padding: 15px; /* Añadir relleno para el fondo */
background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
border-radius: 5px;
}
.download-button {
position: absolute;
top: 260px; /* Ajusta la posición debajo de la versión */
right: 20px; /* Ajusta la posición desde el borde derecho */
padding: 15px 30px; /* Ajusta el tamaño del botón */
font-size: 1.2em; /* Tamaño de fuente más grande */
background-color: #1c6608; /* Color de fondo (#1c6608) */
color: #36fe00; /* Color de texto (#36fe00) */
border: 2px solid #355e30; /* Borde */
border-radius: 5px;
text-decoration: none; /* Quita el subrayado del enlace */
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}
.download-button:hover {
background-color: #36fe00; /* Color de fondo al pasar el ratón */
color: #1c6608; /* Color de texto al pasar el ratón */
}
</style>
</head>
<body>
<!-- Contenedor del mapa -->
<div id="map"></div>
<!-- Texto "Lucky Pip Boy / v.1.0 - Cortesía de La Mafia" -->
<div class="pipboy-info">
<span>Lucky Pip Boy / v.1.0</span> - Cortesía de La Mafia
</div>
<!-- Bloc de notas -->
<div class="note">
<div class="note-header">Notas</div>
<div class="note-content" contenteditable="true">
<p>Aquí puedes escribir tus notas adicionales. Este bloc de notas ahora es editable directamente en la página.</p>
</div>
</div>
<!-- Reloj en tiempo real -->
<div class="clock" id="clock"></div>
<!-- Información de IP -->
<div class="ip-info">
IP: hours-brooks.gl.joinmc.link
</div>
<!-- Información de la versión -->
<div class="version-info">
Version: 1.18.2
</div>
<!-- Botón de Descargar Mods -->
<a href="https://drive.google.com/file/d/1OogTIisCq2QCMOF49rkbqouvzELbpL3S/view?usp=sharing" class="download-button">Descargar Mods</a>
<!-- Incluir scripts de Leaflet y tu script personalizado -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="script.js"></script>
<!-- Script para el reloj -->
<script>
function updateTime() {
const now = new Date();
const dayOfWeek = now.toLocaleDateString('es-ES', { weekday: 'long' });
const dayOfMonth = now.toLocaleDateString('es-ES', { day: 'numeric' });
const month = now.toLocaleDateString('es-ES', { month: 'long' });
const year = now.getFullYear();
const timeStr = now.toLocaleTimeString('es-ES', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
});
document.getElementById('clock').innerHTML = `${dayOfWeek.charAt(0).toUpperCase() + dayOfWeek.slice(1)} ${dayOfMonth} de ${month.charAt(0).toUpperCase() + month.slice(1)} - ${timeStr}`;
}
// Actualizar cada segundo
setInterval(updateTime, 1000);
// Llamar a la función inicialmente para evitar el retraso de un segundo
updateTime();
</script>
</body>
</html>