Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Vipul-Gejage/Disney-Hotstar-Clone/llms.txt

Use this file to discover all available pages before exploring further.

The project is made up of three pages you can explore immediately after setup: the main home page (Hotstar.html), the login page (login.html), and the OTP verification page (otp.html). Each page is a standalone HTML file — no server-side logic runs, and navigation between pages is handled by simple onclick redirects in the JavaScript.

​
Page Overview

Hotstar.html

The main home page. Features the auto-advancing hero carousel, franchise video cards, and two scrollable movie rows.

login.html

The login page. Enter a mobile number and click Generate OTP to navigate to the OTP page.

otp.html

The OTP verification page. Enter your OTP and click Submit OTP to return to the home page.

​
Walkthrough

1

Open Hotstar.html in your browser

Double-click Hotstar.html to open it directly, or navigate to it via your local server:
# Python local server (run from the project folder)
python3 -m http.server 8000
Then visit http://localhost:8000/Hotstar.html.The page loads with a fixed dark navbar at the top containing the Disney+ Hotstar logo, navigation links (TV, Movies, Sports, Premium), a search box, a Subscribe button, and a Login link.
2

Watch the hero carousel auto-advance

The hero carousel starts automatically as soon as the page loads. It cycles through five feature slides — Loki, The Falcon and the Winter Soldier, WandaVision, Raya, and Luca — advancing every 3 000 ms (3 seconds).The transition is a smooth horizontal translateX slide:
setInterval(showSlide, 3000); // Adjust the interval time as needed
When the last slide is reached, the carousel resets to the first slide without a visible jump by momentarily removing the CSS transition.
3

Hover over franchise cards to play preview videos

Below the carousel you’ll find five franchise cards: Disney, Pixar, Marvel, Star Wars, and Nat Geo. Each card shows a static logo image by default. Hovering your mouse over a card triggers the corresponding <video> element to play (muted, looping); moving your mouse away pauses it.
card.addEventListener('mouseenter', () => { video.play(); });
card.addEventListener('mouseleave', () => { video.pause(); });
The video files are disney.mp4, pixar.mp4, marvel.mp4, star-war.mp4, and geographic.mp4, all stored in the videos/ folder.
4

Scroll through Latest Releases and Recommended For You

Two horizontal movie rows sit below the franchise cards:
  • Latest Releases — ten titles including Mission Mangal, The Night Manager, IB71, and others.
  • Recommended For You — ten titles including Loki, Mulan, Avengers, Thor, and others.
Each row has Previous and Next arrow buttons on either side for horizontal scrolling.
5

Add a title to your watchlist

Every movie card has an Add to watchlist button. Clicking it calls showFullscreenAlert(), which dynamically creates a full-screen overlay with a fade-in effect:
function showFullscreenAlert() {
    const overlay = document.createElement('div');
    overlay.id = 'fullscreen-alert';
    overlay.innerHTML = `
        <div class="alert-content">
            <h2>Added Successfully!</h2>
            <p>The show has been added to your watchlist.</p>
            <button onclick="closeFullscreenAlert()">Close</button>
        </div>
    `;
    document.body.appendChild(overlay);
    setTimeout(() => { overlay.style.opacity = '1'; }, 10);
}
Click Close (or call closeFullscreenAlert()) to fade the overlay out and remove it from the DOM.
6

Navigate to the login page

Click the Login link in the top-right corner of the navbar. The anchor tag points directly to ./login.html:
<a href="./login.html" class="login-link">Login</a>
You can also open login.html directly in your browser.
7

Enter a mobile number and generate an OTP

On the login page, type any mobile number into the Mobile Number field and click Generate OTP. The button’s onclick handler immediately redirects to otp.html:
<button onclick="location.href='./otp.html'; return false;" type="submit">
  Generate OTP
</button>
8

Submit the OTP to return to the home page

On the OTP page, enter any value into the OTP field and click Submit OTP. The button redirects back to the home page:
<button onclick="location.href='./hotstar.html'; return false;" type="submit">
  Submit OTP
</button>
You are returned to Hotstar.html and the full browsing experience continues.

​
Browser Compatibility

BrowserSupported
Google Chrome✅
Mozilla Firefox✅
Microsoft Edge✅
Apple Safari✅
Internet Explorer❌
Internet Explorer is not supported. The project relies on ES6 features (arrow functions, template literals, const/let, document.createElement with modern DOM APIs) and CSS transitions such as transform, opacity, and transition that IE cannot handle correctly. Use any modern browser listed above.
Open your browser’s DevTools (press F12 or Cmd+Option+I on macOS) while browsing the clone for a closer look at how the project is built:
  • Elements panel — inspect the CSS custom properties set on body (e.g. background: #0c111b, the dark theme colour) and the .navbar, .carousel, .video-card, and .card component styles in Hotstar.css.
  • Sources panel — set breakpoints inside showSlide() in Hotstar.js to step through the carousel index logic, or inside showFullscreenAlert() to watch the overlay element be created and injected.
  • Network panel — verify that the images/ and videos/ assets are being served with HTTP 200 responses (especially useful when running via python3 -m http.server 8000 to confirm video files load correctly).

Build docs developers (and LLMs) love

Get started for freeTalk to us