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 authentication flow is spread across two static HTML pages. login.html presents a mobile number input form, and on submission the browser navigates to otp.html where the user enters a one-time password. Submitting the OTP form navigates back to hotstar.html. Both pages share the same stylesheet (login.css) and use onclick="location.href=..." for page transitions — there is no real server-side authentication in this project.

​
Login Page (login.html)

login.html renders a centered white card (.container) on the same dark #0c111b background used across the project. The card holds a single form with a telephone input and a Generate OTP button.
  • The <input type="tel"> field collects the mobile number and is marked required
  • The form action attribute is set to generate-otp.php, but this PHP endpoint is not implemented
  • The Generate OTP button uses onclick="location.href='./otp.html'; return false;" to navigate to the OTP page directly in the browser without actually submitting the form to a server

​
Login Form HTML

<div class="container">
    <form action="generate-otp.php" method="post">
        <h2>Login</h2>
        <label for="mobile">Mobile Number:</label>
        <input type="tel" id="mobile" name="mobile" required>

        <button onclick="location.href='./otp.html'; return false;" type="submit">Generate OTP</button>
    </form>
</div>

​
OTP Page (otp.html)

otp.html is styled identically to login.html — it links to the same login.css and uses the same .container card layout. The form title changes to Enter OTP and the input label reads OTP:. The input field reuses type="tel" and the id="mobile" attribute. Clicking Submit OTP navigates back to hotstar.html via onclick="location.href='./hotstar.html'; return false;".

​
OTP Form HTML

<div class="container">
    <form action="generate-otp.php" method="post">
        <h2>Enter OTP</h2>
        <label for="mobile">OTP:</label>
        <input type="tel" id="mobile" name="mobile" required>

        <button onclick="location.href='./hotstar.html'; return false;" type="submit">Submit OTP</button>
    </form>
</div>

​
CSS (login.css)

Both pages use the same stylesheet. The body is a full-viewport flex container that centers .container both horizontally and vertically. The background color matches the rest of the project (#0c111b). The .container itself is a white card with rounded corners, a subtle box shadow, and a fixed width of 300px: 
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #0c111b;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

h2 {
    color: #333;
}

label {
    margin-top: 10px;
    font-weight: bold;
}

input {
    padding: 10px;
    margin: 5px 0 15px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #095ae5;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #062a99;
}

Hotstar.html  →  (click Login link)  →  login.html
login.html    →  (click Generate OTP) →  otp.html
otp.html      →  (click Submit OTP)   →  hotstar.html
There is no real authentication in this project. The OTP flow is purely front-end navigation — location.href redirects replace actual form submission. The generate-otp.php file referenced in both form action attributes does not exist in the repository. No mobile number is validated, no OTP is generated or verified, and no session or token is created.

​
Extending with a Real Backend

To connect the login flow to a real server:
  1. Implement generate-otp.php (or an equivalent endpoint in any backend language) to receive the mobile POST parameter, generate a random OTP, store it server-side (e.g., in a session or database), and send it via SMS using a provider like Twilio or MSG91.
  2. Update login.html — remove the onclick override from the button so the form submits normally to generate-otp.php. The server response can then redirect to otp.html.
  3. Create a verify-otp.php endpoint and set it as the action on the OTP form in otp.html. On successful verification, redirect to hotstar.html and issue a session cookie.
  4. Guard hotstar.html — move it behind a session check (server-rendered or via a JavaScript fetch to a /auth/status endpoint) so unauthenticated users are redirected back to login.html.

Build docs developers (and LLMs) love

Get started for freeTalk to us