The following promtpt was used to generate HTML/CSS code for a live stream webpage:
Write an html page. Add a h1 element for the title. The title should be centered in the top of the screen. Add a videos grid at the left of the screen. The videos grid should cover 80% of the horizontal space of the screen. In the remaining 20% add a chat where each message is a p element. The chat height should be fixed and a scroll bar should be added when needed. Fixed at the bottom of the chat add a text input and a button that allows to add new messages.
When there is only one video in the videos grid, it should cover the whole grid. When there a two videos these should cover half of the grid each one, when there are three or more videos these should be rendered in a 3x3 grid.
Use a nice font with light gray background.
And here's what ChatGPT replied:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
.container {
display: flex;
flex-direction: row;
height: 100vh;
}
.videos {
width: 80%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
background-color: #ffffff;
overflow: hidden;
}
.videos video {
width: 100%;
height: 100%;
object-fit: cover;
}
.chat {
width: 20%;
height: 100%;
padding: 10px;
box-sizing: border-box;
background-color: #ffffff;
overflow-y: auto;
}
.chat p {
margin: 0;
padding: 5px;
border-radius: 5px;
background-color: #f2f2f2;
}
.chat input[type="text"] {
width: 80%;
padding: 10px;
border: none;
border-radius: 5px;
margin-right: 5px;
box-sizing: border-box;
}
.chat button {
width: 20%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>My Page Title</h1>
<div class="container">
<div class="videos">
<video controls>
<source src="video1.mp4" type="video/mp4">
</video>
</div>
<div class="chat">
<p>Chat Message 1</p>
<p>Chat Message 2</p>
<p>Chat Message 3</p>
<p>Chat Message 4</p>
<p>Chat Message 5</p>
<input type="text" placeholder="Type your message...">
<button>Send</button>
</div>
</div>
<script>
const videosGrid = document.querySelector('.videos');
const videos = videosGrid.querySelectorAll('video');
if (videos.length === 1) {
videos[0].style.gridRow: '1 / span 3';
videos[0].style.gridColumn: '1 / span 3';
} else if (videos.length === 2) {
videos[0].style.gridRow: '1 / span 2';
videos[0].style.gridColumn: '1 / span 2';
videos[1].style.gridRow: '3 / span 2';
videos[1].style.gridColumn: '1 / span 2';
} else if (videos.length >= 3) {
videos.forEach((video, index) => {
video.style.gridRow: `${Math.floor(index / 3) * 2 + 1} / span 2`;
video.style.gridColumn: `${(index % 3) * 2 + 1} / span 2`;
});
While not perfect, after some adjustments, it becomes something useful like this:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
.container {
display: flex;
flex-direction: row;
height: 90vh;
}
.videos {
width: 80%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
background-color: #ffffff;
overflow: hidden;
}
.videos video {
width: 100%;
height: 100%;
object-fit: cover;
}
.chat {
width: 20%;
height: 100%;
padding: 10px;
box-sizing: border-box;
background-color: #ffffff;
overflow-y: auto;
}
.chat p {
margin: 0;
padding: 5px;
border-radius: 5px;
background-color: #f2f2f2;
}
.chat input[type="text"] {
width: 80%;
padding: 10px;
border: none;
border-radius: 5px;
margin-right: 5px;
box-sizing: border-box;
}
.chat button {
width: 20%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>My Page Title</h1>
<div class="container">
<div class="videos">
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
</div>
<div class="chat">
<input type="text" placeholder="Type your message...">
<button>Send</button>
<p>Chat Message 1</p>
<p>Chat Message 2</p>
<p>Chat Message 3</p>
<p>Chat Message 4</p>
<p>Chat Message 5</p>
</div>
</div>
<script>
const videosGrid = document.querySelector('.videos');
const videos = videosGrid.querySelectorAll('video');
if (videos.length === 1) {
videos[0].style.gridRow = '1 / span 2';
videos[0].style.gridColumn = '1 / span 2';
} else if (videos.length === 2) {
videos[0].style.gridRow = '1 / span 2';
videos[0].style.gridColumn = '1 / span 1';
videos[1].style.gridRow = '1 / span 2';
videos[1].style.gridColumn = '2 / span 1';
} else if (videos.length >= 3) {
if (videos.length > 4) {
videosGrid.style.gridTemplateColumns = `repeat(${Math.ceil(videos.length / 2)}, 1fr)`;
}
videos.forEach((video, index) => {
video.style.gridRow = 'auto';
video.style.gridColumn = 'auto';
});
}
</script>
</body>