Yuri | DevOps - GeoTourism #46
Description
I'm the DevOps for the group, so I've been setting up the backend on my VPS in order to host our Databases and Scoring APIs. I'm temporarily using my own VPS (shinjuru), but will most likely switch to AWS. I've also worked a little bit on the frontend side of our project, I'm working on hovering animations.
<html>
<head>
<style>
/* Style for the side window */
.side-window {
position: absolute;
top: 0;
right: -250px; /* Initial position outside the viewport */
width: 250px;
height: 100vh;
background-color: #f0f0f0;
transition: right 0.3s ease-in-out;
}
/* Style for the trigger points */
.trigger-point {
position: relative;
display: inline-block;
cursor: pointer;
}
/* Content within the side window */
.side-window-content {
padding: 20px;
}
</style>
</head>
<body>
<!-- Trigger points -->
<span class="trigger-point">Hover over me 1</span>
<span class="trigger-point">Hover over me 2</span>
<!-- Side window -->
<div class="side-window">
<div class="side-window-content">
Content for the side window
</div>
</div>
<script>
// JavaScript to handle the hover effect
const triggerPoints = document.querySelectorAll('.trigger-point');
const sideWindow = document.querySelector('.side-window');
triggerPoints.forEach(triggerPoint => {
triggerPoint.addEventListener('mouseover', () => {
sideWindow.style.right = '0'; // Show the side window
});
triggerPoint.addEventListener('mouseout', () => {
sideWindow.style.right = '-250px'; // Hide the side window
});
});
</script>
</body>
</html>