<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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;
}
</style>
<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0/css/all.min.css" integrity="sha512-
9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnz
Feg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<div class="container">
<h1>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>
</section>
</div>
</main>
<footer>
<div class="container">
<p>© 2024 Multimedia Webpage</p>
</div>
</footer>
<script>
const videoUpload = document.getElementById('video-upload');
const uploadVideoButton = document.getElementById('upload-video-button');
const videoDisplayArea = document.getElementById('video-display-area');
const gifUpload = document.getElementById('gif-upload');
const uploadGifButton = document.getElementById('upload-gif-button');
const gifDisplayArea = document.getElementById('gif-display-area');
const addTextButton = document.getElementById('add-text-button');
const textDisplayArea = document.getElementById('text-display-area');
uploadVideoButton.addEventListener('click', () => {
videoUpload.click();
});
uploadGifButton.addEventListener('click', () => {
gifUpload.click();
});
addTextButton.addEventListener('click', () => {
const text = prompt("Enter the text you want to add:");
if (text) {
const p = document.createElement('p');
p.textContent = text;
textDisplayArea.appendChild(p);
}
});
videoUpload.addEventListener('change', (event) => {
const file = event.target.files[0];
const validVideoTypes = ['video/mp4', 'video/webm', 'video/ogg'];
if (file && validVideoTypes.includes(file.type)) {
const video = document.createElement('video');
video.controls = true;
video.src = URL.createObjectURL(file);
videoDisplayArea.appendChild(video);
} else if (file) {
alert("Invalid file type. Please upload a valid video file.");
videoUpload.value = ''; // Clear the invalid file
}
});
gifUpload.addEventListener('change', (event) => {
const file = event.target.files[0];
const validGifTypes = ['image/gif'];
if (file && validGifTypes.includes(file.type)) {
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
gifDisplayArea.appendChild(img);
} else if (file) {
alert("Invalid file type. Please upload a valid GIF file.");
gifUpload.value = '';
}
});
</script>
</body>
</html>
