33 lines
1.1 KiB
HTML
33 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="static/styles.css" />
|
|
<style>
|
|
body { margin: 0; height: 100vh; display: flex; }
|
|
.chat-pane { flex: 1; position: relative; background: #333; }
|
|
.chat-header { height: 48px; background: #222; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="chat-pane">
|
|
<div class="chat-header">Header</div>
|
|
<div id="video-grid" class="video-grid">
|
|
<div class="video-item" onclick="toggle(this)" style="display:flex; justify-content:center; align-items:center; color:white;">Click me</div>
|
|
<div class="video-item" style="color:white;">Another</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function toggle(el) {
|
|
const grid = document.getElementById('video-grid');
|
|
const isFullscreen = el.classList.contains('fullscreen');
|
|
document.querySelectorAll('.video-item').forEach(e => e.classList.remove('fullscreen'));
|
|
if (isFullscreen) {
|
|
grid.classList.remove('has-fullscreen');
|
|
} else {
|
|
el.classList.add('fullscreen');
|
|
grid.classList.add('has-fullscreen');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|