-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (80 loc) · 3.12 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/LogoKamien.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kámien</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!-- Incluye la biblioteca de iconos de Material-UI -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<!-- Estilos para ocultar el icono SVG -->
<style>
#goToTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 0;
z-index: 99;
font-size: 50px;
padding: 10px 20px;
background-color: transparent;
color: var(--black);
border: none;
border-radius: 30%;
cursor: pointer;
filter: drop-shadow(0px 0px 10px rgb(245, 242, 242));
transition: background-color 0.3s ease;
/* Agrega una transición suave al cambio de color de fondo */
animation: animate__animated animate__bounce animate__slow 3s;
}
#goToTopBtn:hover {
background-color: var(--border);
}
</style>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4WTTEP2ZE9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-4WTTEP2ZE9');
</script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<div id="root"></div>
<!-- Botón de subir -->
<button id="goToTopBtn" onclick="goToTop()">
<svg viewBox="0 0 1024 1024" fill="currentColor" height="1em" width="1em" {...props} style="margin-bottom: -8px">
<path
d="M518.5 360.3a7.95 7.95 0 00-12.9 0l-178 246c-3.8 5.3 0 12.7 6.5 12.7H381c10.2 0 19.9-4.9 25.9-13.2L512 460.4l105.2 145.4c6 8.3 15.6 13.2 25.9 13.2H690c6.5 0 10.3-7.4 6.5-12.7l-178-246z" />
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" />
</svg>
</button>
<script>
// Función para mostrar u ocultar el botón según la posición de desplazamiento
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
var scrollToTopBtn = document.getElementById("goToTopBtn");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollToTopBtn.style.display = "block";
} else {
scrollToTopBtn.style.display = "none";
}
}
// Función para desplazarse hacia arriba
function goToTop() {
document.body.scrollTop = 0; // Para Safari
document.documentElement.scrollTop = 0; // Para otros navegadores
}
</script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>