logoChat01.ai

Code a tube website for me where people can watch ...

Created on: February 8, 2025

Answered using O3 Mini High by Chat01

Question

Code a tube website for me where people can watch web series list some of the popular serious in it too and decide everything ur self

Thought

Clarifying website request

The user is asking for a "tube website," presumably a video streaming platform. They want it to list web series and include popular ones, but it's not clear which technologies or features they want.

It seems like I should figure out what tech stack to use. I’m also uncertain if the user wants just front-end code or a full back-end solution. Let me check with the user about these specifics before proceeding.

Deciding on code structure

I need to decide on the tech and structure for the “tube website.” HTML, CSS, and JavaScript stand out, possibly paired with Node.js or PHP for interactivity. Given the “tube” reference, I think a simple static website with embedded video players or links is a good approach. I can include dummy data, using "popular series" like "Stranger Things" or "Breaking Bad" while keeping content copyright-friendly. I'll lean toward using Bootstrap for styling and structure. I'll focus on building a basic site to list series and videos.

Planning website structure

For the "tube website," I’ll include popular series like "Stranger Things" and "Money Heist" with sample, placeholder data. To keep it simple, I'll produce a static website using HTML, CSS, and JavaScript, with a basic layout including a navigation bar and series thumbnails. Clicking a series link will open a modal or navigate to a details page with an embedded video player—either from YouTube or a sample mp4. I’ll use Bootstrap for styling, and I will avoid copyrighted content by using placeholders.

Building a simple tube website

For the website, I’ll have two main pages: one for the homepage (index.html) listing popular series and another for the series details page (series.html). I'll use Bootstrap for styling and include sample series like Stranger Things and Breaking Bad.

The homepage will display series thumbnails, descriptions, and a "Watch Now" button that links to the details page. The details page will display a video player and relevant episodes. I'll provide HTML, CSS, and JavaScript code with placeholders. For simplicity, I'll use free sample videos for demonstration.

Reasoned for 23 seconds

Answer

Below is one way to build a very simple “tube website” for streaming web series using only HTML, CSS, and JavaScript (with Bootstrap for styling). This example creates two pages:

  1. Home Page (index.html): Shows a grid of popular web series (with sample placeholder images, titles, and descriptions) and “Watch Now” buttons.
  2. Series Detail Page (series.html): Reads the series “slug” from the query string, displays a video player (using sample video URLs) and a list of episodes. Clicking an episode changes the video.

In a real production system you might use a back end with a database, proper user authentication, streaming infrastructure, and more robust design. But the following code is a self-contained starting point that you can run locally. (For testing, simply save the files and open index.html in your browser.)

File 1: index.html

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TubeSeries - Watch Web Series Online</title>
  <!-- Bootstrap CSS (v4.5) -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* Custom styling */
    .card-img-top {
      height: 200px;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">TubeSeries</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Popular</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Latest</a></li>
      </ul>
    </div>
  </nav>

  <!-- Main Content -->
  <div class="container mt-4">
    <h1 class="mb-4">Popular Web Series</h1>
    <div class="row">
      <!-- Series Card: Stranger Things -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=Stranger+Things" class="card-img-top" alt="Stranger Things">
          <div class="card-body">
            <h5 class="card-title">Stranger Things</h5>
            <p class="card-text">A group of kids uncover supernatural mysteries in their small town.</p>
            <a href="series.html?series=stranger-things" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
      <!-- Series Card: Breaking Bad -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=Breaking+Bad" class="card-img-top" alt="Breaking Bad">
          <div class="card-body">
            <h5 class="card-title">Breaking Bad</h5>
            <p class="card-text">A high school chemistry teacher turned methamphetamine producer.</p>
            <a href="series.html?series=breaking-bad" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
      <!-- Series Card: Money Heist -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=Money+Heist" class="card-img-top" alt="Money Heist">
          <div class="card-body">
            <h5 class="card-title">Money Heist</h5>
            <p class="card-text">A criminal mastermind plans the biggest heist in history.</p>
            <a href="series.html?series=money-heist" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
      <!-- Series Card: Game of Thrones -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=Game+of+Thrones" class="card-img-top" alt="Game of Thrones">
          <div class="card-body">
            <h5 class="card-title">Game of Thrones</h5>
            <p class="card-text">Noble families vie for control of the Iron Throne in a mythical land.</p>
            <a href="series.html?series=game-of-thrones" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
      <!-- Series Card: The Witcher -->
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="https://via.placeholder.com/350x200?text=The+Witcher" class="card-img-top" alt="The Witcher">
          <div class="card-body">
            <h5 class="card-title">The Witcher</h5>
            <p class="card-text">A monster hunter struggles to find his place in a turbulent world.</p>
            <a href="series.html?series=the-witcher" class="btn btn-primary">Watch Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-white text-center py-3">
    &copy; 2025 TubeSeries. All rights reserved.
  </footer>

  <!-- Bootstrap and dependencies (jQuery and Popper.js) -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

File 2: series.html

This page reads the URL parameter (for example, ?series=breaking-bad), loads the corresponding data from a hard-coded JavaScript object, and displays a video player along with a list of episodes. When you click an episode, the video changes accordingly.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Series Details - TubeSeries</title>
  <!-- Bootstrap CSS (v4.5) -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* Responsive video container */
    .video-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      padding-top: 25px;
      height: 0;
    }
    .video-container video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="index.html">TubeSeries</a>
  </nav>

  <!-- Main Content -->
  <div class="container mt-4" id="seriesContent">
    <!-- Content will be injected by JavaScript based on the series selected -->
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-white text-center py-3 mt-4">
    &copy; 2025 TubeSeries. All rights reserved.
  </footer>

  <script>
    // Helper: Parse URL query string into an object.
    function getQueryParams() {
      var params = {};
      window.location.search.substr(1).split("&").forEach(function(item) {
        var pair = item.split("=");
        params[pair[0]] = decodeURIComponent(pair[1]);
      });
      return params;
    }

    // Sample series data.
    var seriesData = {
      "stranger-things": {
        title: "Stranger Things",
        description: "A group of kids uncover supernatural mysteries in their small town.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        episodes: [
          { title: "Episode 1: The Vanishing of Will Byers", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" },
          { title: "Episode 2: The Weirdo on Maple Street", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" }
        ]
      },
      "breaking-bad": {
        title: "Breaking Bad",
        description: "A high school chemistry teacher turned methamphetamine producer.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
        episodes: [
          { title: "Episode 1: Pilot", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" },
          { title: "Episode 2: Cat's in the Bag...", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" }
        ]
      },
      "money-heist": {
        title: "Money Heist",
        description: "A criminal mastermind plans the biggest heist in history.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
        episodes: [
          { title: "Episode 1: The Heist Begins", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" },
          { title: "Episode 2: The Plan Unfolds", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" }
        ]
      },
      "game-of-thrones": {
        title: "Game of Thrones",
        description: "Noble families vie for control of the Iron Throne in a mythical land.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4",
        episodes: [
          { title: "Episode 1: Winter Is Coming", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" },
          { title: "Episode 2: The Kingsroad", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" }
        ]
      },
      "the-witcher": {
        title: "The Witcher",
        description: "A monster hunter struggles to find his place in a turbulent world.",
        video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
        episodes: [
          { title: "Episode 1: The End's Beginning", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" },
          { title: "Episode 2: Four Marks", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" }
        ]
      }
    };

    // Get the series key from the URL, e.g., ?series=breaking-bad.
    var params = getQueryParams();
    var seriesKey = params.series;

    if (seriesData[seriesKey]) {
      var series = seriesData[seriesKey];
      var content = '<h1>' + series.title + '</h1>';
      content += '<p>' + series.description + '</p>';
      content += '<div class="video-container mb-4">';
      content += '<video controls><source src="' + series.video + '" type="video/mp4">Your browser does not support the video tag.</video>';
      content += '</div>';
      content += '<h3>Episodes</h3>';
      content += '<div class="list-group">';
      series.episodes.forEach(function(ep, index) {
        content += '<a href="#" class="list-group-item list-group-item-action" onclick="playEpisode(\'' + seriesKey + '\', ' + index + '); return false;">' + ep.title + '</a>';
      });
      content += '</div>';
      document.getElementById('seriesContent').innerHTML = content;
    } else {
      document.getElementById('seriesContent').innerHTML = '<p>Series not found. <a href="index.html">Go back to Home</a></p>';
    }

    // Function to change the video source when an episode is selected.
    function playEpisode(seriesKey, episodeIndex) {
      var series = seriesData[seriesKey];
      var episode = series.episodes[episodeIndex];
      var videoContainer = document.querySelector('.video-container');
      videoContainer.innerHTML = '<video controls autoplay><source src="' + episode.video + '" type="video/mp4">Your browser does not support the video tag.</video>';
    }
  </script>
</body>
</html>

How to Use This Code

  1. File Structure:
    Place both files (index.html and series.html) in the same folder.

  2. Testing:
    Open index.html in your browser. You’ll see a grid of popular web series. Clicking “Watch Now” on a card will load series.html with the appropriate query parameter. The series detail page displays a video player (using a sample video URL) and a list of episodes. Clicking an episode will update the video player.

  3. Customization:
    • Replace the placeholder images (currently provided by via.placeholder.com) with actual thumbnails.
    • Update the video URLs with your own video sources or embeds.
    • Expand the design and functionality (e.g., add user authentication, search functionality, or a database-backed back end) as needed.

This sample is meant to serve as a starting point for a “tube website” where people can browse and watch web series. Enjoy coding and feel free to extend the functionality as you see fit!

Share this Q&A