<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collaborative Multimedia Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa; /* Light background */
}
header {
background-color: #343a40; /* Dark header */
color: white;
text-align: center;
padding: 1rem 0;
}
main {
padding: 20px;
text-align: center; /* Center align content by default */
}
section {
margin-bottom: 20px;
padding: 20px;
background-color: #ffffff; /* White section background */
border-radius: 8px; /* Rounded corners for sections */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
h2 {
color: #2c3e50; /* Dark heading color */
margin-bottom: 1rem;
text-align: center; /* Center align headings */
}
p {
color: #34495e; /* Darker paragraph color */
line-height: 1.6; /* Improved line height for readability */
text-align: center; /* Center align paragraphs */
}
video {
max-width: 80%; /* Responsive video width */
height: auto;
margin-bottom: 1rem;
border-radius: 8px; /* Rounded corners for videos */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
display: block; /* Ensure video is a block element */
margin-left: auto;
margin-right: auto;
}
img {
max-width: 80%; /* Responsive image width */
height: auto;
margin-bottom: 1rem;
border-radius: 8px; /* Rounded corners for images */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
display: block; /* Ensure image is a block element */
margin-left: auto;
margin-right: auto;
}
footer {
background-color: #343a40; /* Dark footer */
color: white;
text-align: center;
padding: 1rem 0;
margin-top: 20px;
border-top: 1px solid #495057; /* Add a border for separation */
}
.container {
max-width: 1000px; /* Increased max-width for larger screens */
margin: 0 auto; /* Center the main container */
}
/* Styles for the buttons */
.upload-button {
display: inline-flex; /* Use inline-flex for better alignment */
align-items: center; /* Vertically center icon and text */
padding: 0.75rem 1.5rem; /* Slightly increased padding */
background-color: #007bff; /* Bootstrap's primary button color */
color: white;
font-size: 1rem; /* Increased font size */
border: none;
border-radius: 0.375rem; /* Bootstrap's rounded corners */
cursor: pointer;
transition: background-color 0.3s ease; /* Smooth transition */
margin: 0.5rem; /* Add some margin around buttons */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow */
}
.upload-button:hover {
background-color: #0056b3; /* Darker shade on hover */
}
.upload-button i {
margin-right: 0.75rem; /* Space between icon and text */
font-size: 1.25rem; /* Increased icon size */
}
#video-display-area, #text-display-area, #gif-display-area {
margin-top: 1rem;
text-align: center;
border: 1px solid #ddd;
padding: 1rem;
border-radius: 8px;
background-color: #f8f9fa;
}
#video-display-area video {
max-width: 100%;
height: auto;
}
#gif-display-area img {
max-width: 100%;
height: auto;
}
#save-button {
display: block;
width: 200px;
margin: 20px auto;
padding: 10px 20px;
background-color: #28a745; /* Bootstrap success color */
color: white;
border: none;
border-radius: 0.375rem;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#save-button:hover {
background-color: #1e7e34;
}
</style>
<link href="[Link]
family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="[Link]
awesome/6.0.0/css/[Link]" integrity="sha512-
9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnz
Feg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<div class="container">
<h1>Collaborative Multimedia Webpage</h1>
<p>Add videos, text, and GIFs to the page.</p>
</div>
</header>
<main>
<div class="container">
<section>
<h2>Upload Content</h2>
<input type="file" id="video-upload" accept="video/*"
style="display: none;">
<button id="upload-video-button" class="upload-button">
<i class="fas fa-upload"></i> Upload Video
</button>
<input type="file" id="gif-upload" accept="image/gif"
style="display: none;">
<button id="upload-gif-button" class="upload-button">
<i class="fas fa-upload"></i> Upload GIF
</button>
<button id="add-text-button" class="upload-button">
<i class="fas fa-plus-circle"></i> Add Text
</button>
<div id="video-display-area">
<h3>Uploaded Videos</h3>
</div>
<div id="text-display-area">
<h3>Added Text</h3>
</div>
<div id="gif-display-area">
<h3>Uploaded GIFs</h3>
</div>
<button id="save-button">Save All Content</button>
</section>
</div>
</main>
<footer>
<div class="container">
<p>© 2025 Collaborative Multimedia Webpage</p>
</div>
</footer>
<script>
const videoUpload = [Link]('video-upload');
const uploadVideoButton = [Link]('upload-video-button');
const videoDisplayArea = [Link]('video-display-area');
const gifUpload = [Link]('gif-upload');
const uploadGifButton = [Link]('upload-gif-button');
const gifDisplayArea = [Link]('gif-display-area');
const addTextButton = [Link]('add-text-button');
const textDisplayArea = [Link]('text-display-area');
const saveButton = [Link]('save-button');
// Function to load saved content
function loadContent() {
fetch('/load')
.then(response => [Link]())
.then(data => {
if ([Link]) {
[Link](src => {
const video = [Link]('video');
[Link] = true;
[Link] = src;
[Link](video);
});
}
if ([Link]) {
[Link](src => {
const img = [Link]('img');
[Link] = src;
[Link](img);
});
}
if ([Link]) {
[Link](content => {
const p = [Link]('p');
[Link] = content;
[Link](p);
});
}
})
.catch(error => {
[Link]('Error loading content:', error);
});
}
// Call loadContent when the page loads
[Link] = loadContent;
[Link]('click', () => {
[Link]();
});
[Link]('click', () => {
[Link]();
});
[Link]('click', () => {
const text = prompt("Enter the text you want to add:");
if (text) {
const p = [Link]('p');
[Link] = text;
[Link](p);
}
});
[Link]('change', (event) => {
const file = [Link][0];
const validVideoTypes = ['video/mp4', 'video/webm', 'video/ogg'];
if (file && [Link]([Link])) {
const video = [Link]('video');
[Link] = true;
[Link] = [Link](file);
[Link](video);
} else if (file) {
alert("Invalid file type. Please upload a valid video file.");
[Link] = ''; // Clear the invalid file
}
});
[Link]('change', (event) => {
const file = [Link][0];
const validGifTypes = ['image/gif'];
if (file && [Link]([Link])) {
const img = [Link]('img');
[Link] = [Link](file);
[Link](img);
} else if (file) {
alert("Invalid file type. Please upload a valid GIF file.");
[Link] = '';
}
});
[Link]('click', () => {
let saveData = {
videos: [],
gifs: [],
text: []
};
// Save Videos
const videos = [Link]('video');
[Link](videoElement => {
[Link]([Link]);
});
// Save GIFs
const gifs = [Link]('img');
[Link](gifElement => {
[Link]([Link]);
});
// Save Text
const textElements = [Link]('p');
[Link](textElement => {
[Link]([Link]);
});
// Send the data to the server
fetch('/save', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: [Link](saveData)
})
.then(response => [Link]())
.then(data => {
alert(data); // Optionally show a success message
// You might want to reload the page here to see the updated
content
// [Link]();
})
.catch(error => {
[Link]('Error saving content:', error);
alert('Failed to save content.');
});
});
</script>
</body>
</html>
