Public
Edited
Nov 18, 2024
<div id="contenedor-panel"></div>
aventuraLibreria = import(await FileAttachment("aventura.js").url())
aventura = new aventuraLibreria.Aventura("es", {
// OPCIONES
velocidadMaquina: 0,
deslizarAImagen: false,
contenedorAventura: "contenedor-panel"
})
escenas = FileAttachment("escenas.json").json()
aventura.fijarEscenas(escenas).iniciarAventura("panel_inicio")
estilo = <style>
/* Contenedor general */
#storygeneraldiv {
box-sizing: border-box;
margin: auto;
max-width: 900px;
font-family: "Arial";
background: white;
}
/* Contenedor de la historia */
.storydiv {
border: solid black 1px;
width: 100%;
display: flex;
padding: 10px;
flex-direction: column;
box-sizing: border-box;
}
/* Párrafo de texto */
.storyp {
font-size: 18px;
min-height: 25px;
}
/* Botón de opciones */
.storybutton-container {
margin: auto;
}
.storybutton {
background: cyan;
box-shadow: none;
border: solid 1px;
margin: 0px 1em 0px 0px;
font-size: 20px;
font-family: 'Arial';
cursor: pointer;
}
.storybutton:hover {
color: white;
background: black;
}
/* Imagen */
.storyimage-container {
box-sizing: content-box;
position: relative;
width: 100%;
margin: auto;
}
.storyimage {
justify-content: center;
width: 100%;
margin: auto;
border-radius: 20px;
display: block;
}
/* Área clickeable en la imagen */
.storyimage-area {
position: absolute;
cursor: pointer;
text-align: center;
color: black;
border-radius: 4px;
padding: 10px;
border: solid 1px black;
}
.storyimage-area:hover {
background: #ffffff33;
}
/* Configuración para dispositivos pequeños */
@media screen and (max-device-width: 500px) {
#storygeneraldiv {
max-width:100%;
}
.storyp {
font-size: 7vw;
}
.storybutton {
font-size: 10vw;
}
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
