Widget: Homepage
From LINKS Community Center
Revision as of 17:29, 29 April 2024 by <bdi>Eschmidt</bdi> (talk | contribs)
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--links-blue: #1980c3;
--links-cyan: #34b8b8;
--links-grey: #415262;
--links-orange: #ee7802;
--ccl-color: #B89F21;
}
#chat-button {
position: fixed;
right: 10px;
bottom: 10px;
border-radius: 5px;
border: 1px solid var(--links-grey);
user-select: none;
cursor: pointer;
background-color: #fff;
}
#chat-window {
position: fixed;
right: 10px;
bottom: 70px;
background-color: #f8f9fa;
width: 20vw;
height: 50vh;
border-radius: 15px;
border: 2px solid var(--links-blue);
overflow: hidden;
box-shadow: -5px 5px 5px 5px rgb(0 0 0 / 10%);
}
#chat-window-controls {
padding: 5px;
display: flex;
justify-content: space-between;
}
#chat-window-controls button {
font-size: 1.2rem;
border-radius: 2.5rem;
border: 1px solid var(--links-blue);
color: #fff;
background-color: var(--links-blue);
cursor: pointer;
}
.maximized-chat {
width: auto !important;
height: auto !important;
left: 10px;
top: 10px;
}
.closed-chat {
display: none;
pointer-events: none;
}
#chat-window.maximized-chat #resize-chat {
transform: rotate(180deg);
}
</style>
</head>
<body>
<button id="resize-chat" style="visibility:hidden">←</button>
<button id="close-chat">×</button>
<img src="https://synergiesproject.eu/wp-content/uploads/2024/04/synergies_project_logo-600x204.png" style="height: 3rem;">
If you want to know more about the evolution of the LINKS Community Center, have a closer look at SYNERGIES.
<a href="https://synergiesproject.eu/" target="_blank">synergiesproject.eu</a>
<script>
const chatWindow = document.getElementById('chat-window');
const chatContent = document.getElementById('chat-window-content');
const resizeBtn = document.getElementById('resize-chat');
const closeBtn = document.getElementById('close-chat');
const chatBtn = document.getElementById('chat-button');
chatBtn.addEventListener('click', () => {
chatWindow.classList.toggle('closed-chat');
});
resizeBtn.addEventListener('click', () => {
chatWindow.classList.toggle('maximized-chat');
});
closeBtn.addEventListener('click', () => {
chatWindow.classList.add('closed-chat');
});
const url = 'http://192.168.100.172:4200'; fetch(url, { method: 'HEAD' }) .then(response => { if (response.ok) { resizeBtn.style.visibility = 'visible'; chatContent.innerHTML = ` <iframe id="embedded-page" src="${url}" frameborder="0" style="width:100%;aspect-ratio:16/9;" ></iframe> `; } }) .catch(error => console.error('Error during URL check', error)); </script>
</body>
</html>