HTML CSS AND JAVASCRIPT CODE FOR VIDEO SHARING PLATFORM ► MacroNepal

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Sharing Platform</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: #333;
        }

        header {
            background: #333;
            color: #fff;
            padding: 1rem;
            text-align: center;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        main {
            padding: 5rem 2rem 2rem;
            max-width: 900px;
            margin: 0 auto;
        }

        .video-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin-bottom: 2rem;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .video-card:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }

        .video-card img {
            width: 100%;
            height: auto;
        }

        .video-card h3 {
            margin: 1rem;
        }

        .upload-form, .feedback-form {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        input[type="file"] {
            display: block;
            margin-bottom: 1rem;
        }

        button {
            background: #28a745;
            color: #fff;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.3s ease;
        }

        button:hover {
            background: #218838;
        }

        .rating {
            display: flex;
            gap: 0.2rem;
            font-size: 1.5rem;
            color: gold;
        }

        .rating input {
            display: none;
        }

        .rating label {
            cursor: pointer;
        }

        .rating input:checked ~ label {
            color: gold;
        }

        .feedback-content {
            margin-top: 1rem;
        }

        .feedback-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            padding: 1rem;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <header>
        <h1>Video Sharing Platform</h1>
    </header>
    <main>
        <section class="upload-form">
            <h2>Upload Video</h2>
            <form id="upload-form">
                <label for="video-file">Select Video:</label>
                <input type="file" id="video-file" accept="video/*" required>
                <label for="title">Title:</label>
                <input type="text" id="title" name="title" required>
                <label for="description">Description:</label>
                <textarea id="description" name="description" rows="4" required></textarea>
                <button type="button" onclick="uploadVideo()">Upload Video</button>
            </form>
        </section>

        <section id="video-gallery">
            <h2>Video Gallery</h2>
            <!-- Video cards will be added here dynamically -->
        </section>

        <section class="feedback-form">
            <h2>Feedback & Rating</h2>
            <form id="feedback-form">
                <div class="form-group">
                    <label for="feedback">Your Feedback:</label>
                    <textarea id="feedback" name="feedback" rows="4" required></textarea>
                </div>

                <div class="form-group">
                    <label>Rating:</label>
                    <div class="rating">
                        <input type="radio" id="star5" name="rating" value="5">
                        <label for="star5">★</label>
                        <input type="radio" id="star4" name="rating" value="4">
                        <label for="star4">★</label>
                        <input type="radio" id="star3" name="rating" value="3">
                        <label for="star3">★</label>
                        <input type="radio" id="star2" name="rating" value="2">
                        <label for="star2">★</label>
                        <input type="radio" id="star1" name="rating" value="1">
                        <label for="star1">★</label>
                    </div>
                </div>

                <button type="button" onclick="submitFeedback()">Submit Feedback</button>
            </form>
        </section>
    </main>

    <script>
        let videoGallery = document.getElementById('video-gallery');

        function uploadVideo() {
            const fileInput = document.getElementById('video-file');
            const title = document.getElementById('title').value;
            const description = document.getElementById('description').value;

            if (fileInput.files.length === 0) {
                alert('Please select a video file.');
                return;
            }

            const videoFile = URL.createObjectURL(fileInput.files[0]);

            const videoCard = document.createElement('div');
            videoCard.className = 'video-card';
            videoCard.innerHTML = `
                <video width="100%" controls>
                    <source src="${videoFile}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <h3>${title}</h3>
                <p>${description}</p>
            `;

            videoGallery.appendChild(videoCard);

            // Clear form fields
            fileInput.value = '';
            document.getElementById('title').value = '';
            document.getElementById('description').value = '';
        }

        function submitFeedback() {
            const feedback = document.getElementById('feedback').value;
            const rating = document.querySelector('input[name="rating"]:checked');
            const ratingValue = rating ? rating.value : 'No rating';

            if (feedback.trim() === '') {
                alert('Please provide your feedback.');
                return;
            }

            const feedbackCard = document.createElement('div');
            feedbackCard.className = 'feedback-card';
            feedbackCard.innerHTML = `
                <h3>Rating: ${ratingValue} stars</h3>
                <p>${feedback}</p>
            `;

            document.querySelector('.feedback-content').appendChild(feedbackCard);
            document.getElementById('feedback-form').reset();
        }
    </script>
</body>
</html>
HTML
Leave a Reply Cancel reply
