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 Disney+ Hotstar Clone uses a completely flat file structure — all source files sit directly in the project root alongside two asset folders. There is no src/ directory, no dist/ output folder, no node_modules/, and no configuration files of any kind. Opening Hotstar.html in a browser is all that is needed to run the project; every resource is referenced by relative path.

​
Directory Tree

Disney-Hotstar-Clone/
├── Hotstar.html               # Main home page
├── Hotstar.css                # Main stylesheet
├── Hotstar.js                 # Carousel, video cards, and watchlist logic
├── login.html                 # Login form (mobile number entry)
├── login.css                  # Shared styles for login.html and otp.html
├── otp.html                   # OTP entry page
│
├── images/
│   ├── favicon.png            # Browser tab icon
│   ├── logo.png               # Disney+ Hotstar brand logo (navbar)
│   ├── slider 1.PNG           # Hero carousel – Loki
│   ├── slider 2.PNG           # Hero carousel – The Falcon and the Winter Soldier
│   ├── slider 3.PNG           # Hero carousel – WandaVision
│   ├── slider 4.PNG           # Hero carousel – Raya
│   ├── slider 5.PNG           # Hero carousel – Luca
│   ├── disney.PNG             # Franchise card logo – Disney
│   ├── pixar.PNG              # Franchise card logo – Pixar
│   ├── marvel.PNG             # Franchise card logo – Marvel
│   ├── star-wars.PNG          # Franchise card logo – Star Wars
│   ├── geographic.PNG         # Franchise card logo – National Geographic
│   ├── latest 1.png           # Latest Releases row – Mission Mangal
│   ├── latest 2.png           # Latest Releases row – Kerala
│   ├── latest 3.png           # Latest Releases row – The Night Manager
│   ├── latest 4.png           # Latest Releases row – Good Night
│   ├── latest 5.png           # Latest Releases row – IB71
│   ├── latest 6.png           # Latest Releases row – Janaki Jaane
│   ├── latest 7.png           # Latest Releases row – The Trial
│   ├── latest 8.png           # Latest Releases row – Aashikana
│   ├── latest 9.png           # Latest Releases row – Tezz
│   ├── latest 10.png          # Latest Releases row – Panga
│   ├── poster 1.png           # Recommended row – Loki
│   ├── poster 2.png           # Recommended row – Mulan
│   ├── poster 3.png           # Recommended row – The Falcon
│   ├── poster 4.png           # Recommended row – Avengers
│   ├── poster 5.png           # Recommended row – Thor
│   ├── poster 6.png           # Recommended row – Avengers
│   ├── poster 7.png           # Recommended row – Pirates
│   ├── poster 8.png           # Recommended row – Soul
│   ├── poster 9.png           # Recommended row – Raya
│   ├── poster 10.png          # Recommended row – Luca
│   ├── poster 11.png          # Recommended row (additional)
│   ├── poster 12.png          # Recommended row (additional)
│   ├── add.png                # Watchlist button icon (used as CSS background-image)
│   ├── play.png               # Play icon asset
│   ├── pre.png                # Previous arrow for movie row scroll buttons
│   └── nxt.png                # Next arrow for movie row scroll buttons
│
└── videos/
    ├── disney.mp4             # Franchise preview – Disney
    ├── pixar.mp4              # Franchise preview – Pixar
    ├── marvel.mp4             # Franchise preview – Marvel
    ├── star-war.mp4           # Franchise preview – Star Wars
    └── geographic.mp4         # Franchise preview – National Geographic

​
File Roles

​
Hotstar.html

The entry point of the application. It defines the full DOM structure for the fixed navbar (brand logo, navigation links, search box, Subscribe button, and Login link), the five-slide hero carousel, the five franchise video cards, and both movie rows. Each movie card’s “Add to Watchlist” button calls showFullscreenAlert() via an inline onclick attribute. The file links Hotstar.css for styles and Hotstar.js in the <head> for behavior.

​
Hotstar.css

The main stylesheet for Hotstar.html. It sets the global dark background (#0c111b), styles the fixed navbar with flexbox, defines the carousel container with overflow-x: hidden and CSS transform-based transitions, controls the franchise video card hover swap between <img> and <video>, and handles the horizontally scrollable movie rows with hidden scrollbars (::-webkit-scrollbar { display: none }). It also defines the #fullscreen-alert overlay and .alert-content modal used for watchlist feedback.

​
Hotstar.js

Contains three independent JavaScript blocks, all scoped behind DOMContentLoaded listeners or standalone functions:
  • Carousel — Queries .slider elements, clones them all and appends the clones to .carousel to enable seamless infinite looping, then advances the carousel every 3 000 ms using setInterval and a CSS translateX transform. When the index reaches the end of the original slides, the transition is briefly disabled and the position is reset to zero.
  • Video Cards — Queries all .video-card elements and attaches mouseenter/mouseleave listeners. On enter, video.play() is called; on leave, video.pause() is called. The CSS .video-card:hover rules handle showing/hiding the <img> versus <video> elements visually.
  • Watchlist Alert — The showFullscreenAlert() function dynamically creates a <div id="fullscreen-alert"> overlay, appends it to <body>, and fades it in by setting opacity to 1 after a 10 ms timeout. closeFullscreenAlert() fades it out and then removes the element from the DOM after 300 ms.

​
login.html

A standalone page with a centered login form. The form has a <label> and <input type="tel"> for a mobile number, and a submit button whose onclick handler overrides the default form submission with location.href='./otp.html'. The form action attribute references generate-otp.php, which is not present in the repository.

​
login.css

Shared stylesheet imported by both login.html and otp.html. It vertically and horizontally centers the .container card using display: flex on the <body>, applies a white card with border-radius and box-shadow over the same #0c111b dark background as the main page, and styles the input fields and the blue submit button (with a darker hover state).

​
otp.html

Structurally identical to login.html. It replaces the heading and label text with “Enter OTP”, and the submit button’s onclick navigates to ./hotstar.html (lowercase) instead of ./otp.html. It imports the same login.css.
otp.html navigates to ./hotstar.html (all lowercase) on submit. On case-sensitive file systems (Linux), this will result in a 404 because the actual file is named Hotstar.html with a capital H. If deploying to a Linux server, rename the file to hotstar.html or update the onclick to use the correct casing.

​
Page Flow

The three HTML pages form a linear navigation sequence that simulates a login gate in front of the main content.
1

Land on Hotstar.html

The user opens Hotstar.html directly in a browser. The auto-advancing hero carousel starts immediately, franchise video cards are ready for hover interaction, and both movie rows are browsable. The fixed navbar exposes a Login link in the top-right corner.
2

Navigate to login.html

Clicking the Login link in the navbar (<a href="./login.html">) navigates to login.html. The user is presented with a mobile number input and a “Generate OTP” button.
3

Navigate to otp.html

Clicking “Generate OTP” triggers the onclick handler, which calls location.href='./otp.html'. The user is taken to the OTP entry form. No actual OTP is sent or validated.
4

Return to Hotstar.html

Clicking “Submit OTP” on otp.html triggers its onclick handler, which calls location.href='./hotstar.html', navigating back to the main home page.
The navigation flow is entirely client-side. Both <form> elements (in login.html and otp.html) carry a method="post" attribute and an action pointing to a PHP file, but every button overrides the default form submission with a location.href redirect. No HTTP POST requests are ever made.

Build docs developers (and LLMs) love

Get started for freeTalk to us