LOGIN AND SIGNUP

LOGIN by VEDANT SOMANI 09/07/2026

0.0 (0)

FiberNet — Smart ISP Customer Portal

FiberNet

ISP NETWORK ONLINE

Your internet.
Your control.

Securely manage your FiberNet broadband account, verify your identity, pay bills, upgrade plans and stay connected.

✓

Fiber Network

Broadband services operational

● STABLE

CUSTOMER ACCESS

Welcome to FiberNet

REGISTERED MOBILE NUMBER

New FiberNet customer?

✓ Secure ISP authentication

ACCOUNT FOUND

Choose your login

Select how you want to securely access your FiberNet customer account.

Registered account —

Connection Fiber Broadband

PASSWORD LOGIN

Welcome back

Enter your FiberNet password to securely access your account.

EMAIL / MOBILE

ACCOUNT PASSWORD

OTP LOGIN

Verify your account

Enter the 6-digit OTP sent to your registered email or mobile number.

OTP sent to —

Resend OTP in 00:30

CREATE ACCOUNT

Create your FiberNet account

Enter your details. Your email address or mobile number will be verified with OTP.

FULL NAME

MOBILE NUMBER

VERIFY YOUR DETAILS

Confirm your identity

We sent a 6-digit verification code to your registered contact.

Verification code sent to —

Resend OTP in 00:30

DETAILS VERIFIED ✓

Finish your account

Your email/mobile has been successfully verified. Now choose how you want to protect your FiberNet account.

Name —

Verified contact —

Verification ✓ Verified

PASSWORD SETUP

Create your password

Your contact is verified. Create a strong password for your FiberNet account.

CREATE PASSWORD

CONFIRM PASSWORD

OTP ACCOUNT

Use OTP to sign in

Your account is verified. OTP authentication will be used for secure future logins.

Account —

Authentication OTP Enabled

ACCOUNT RECOVERY

Reset your password

Enter your registered email or mobile number. We will verify it with OTP.

EMAIL / MOBILE NUMBER

RECOVERY VERIFICATION

Verify recovery request

Enter the OTP sent to your registered email/mobile.

OTP sent to —

PASSWORD RECOVERY

Create new password

Your identity has been verified. Create a new password.

NEW PASSWORD

CONFIRM PASSWORD

AUTHENTICATED

Connecting your account

Preparing your secure FiberNet customer dashboard.

✓

CONNECTION VERIFIED

You're connected!

Your FiberNet account has been successfully authenticated.

Customer FiberNet Customer

Account —

Connection Fiber Broadband

Status ● Active

✓ Secure ISP session established

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>FiberNet — Smart ISP Customer Portal</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --blue:#159ee8;
    --blue2:#087bc6;
    --cyan:#46c9ef;
    --green:#3bd59b;
    --green2:#1eb87e;
    --dark:#123449;
    --muted:#7d96a6;
    --border:#dcecf3;
    --soft:#f4fbfe;
    --white:#fff;
    --red:#ee6d76;
    --shadow:0 35px 90px rgba(22,112,148,.15);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    min-height:100%;
}

body{
    font-family:Inter,sans-serif;
    color:var(--dark);
    background:
        radial-gradient(circle at 10% 20%,#e9faff,transparent 28%),
        radial-gradient(circle at 90% 80%,#eafff6,transparent 30%),
        #f6fcff;
    overflow-x:hidden;
}

button,input{
    font-family:inherit;
}

button{
    cursor:pointer;
}

.page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:28px;
}

.app{
    width:min(1180px,100%);
    min-height:720px;
    display:grid;
    grid-template-columns:46% 54%;
    background:#fff;
    border:1px solid #e1eff5;
    border-radius:34px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

/* =========================================================
   LEFT ISP AREA
========================================================= */

.network-area{
    position:relative;
    overflow:hidden;
    padding:45px;
    background:
        radial-gradient(circle at 15% 20%,rgba(70,201,239,.18),transparent 25%),
        radial-gradient(circle at 85% 75%,rgba(59,213,155,.14),transparent 28%),
        linear-gradient(145deg,#f1fbff,#f7fffb);
}

.circle{
    position:absolute;
    border:1px solid rgba(21,158,232,.11);
    border-radius:50%;
    pointer-events:none;
}

.circle.one{
    width:450px;
    height:450px;
    left:-280px;
    top:130px;
}

.circle.two{
    width:650px;
    height:650px;
    left:-400px;
    top:0;
}

.circle.three{
    width:850px;
    height:850px;
    left:-520px;
    top:-110px;
}

.brand{
    position:relative;
    z-index:10;
    display:flex;
    align-items:center;
    gap:12px;
}

.logo{
    width:46px;
    height:46px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:800;
    font-size:20px;
    background:linear-gradient(135deg,var(--blue),var(--green));
    box-shadow:0 14px 28px rgba(21,158,232,.2);
}

.brand-name{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.8px;
}

.brand-name span{
    color:var(--blue);
}

.network-content{
    position:relative;
    z-index:10;
    margin-top:100px;
}

.online{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border-radius:30px;
    border:1px solid #dceef4;
    background:rgba(255,255,255,.85);
    color:var(--green2);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.online-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(59,213,155,.12);
}

.network-content h1{
    margin-top:20px;
    font-size:43px;
    line-height:1.08;
    letter-spacing:-2.3px;
}

.network-content h1 span{
    color:var(--blue);
}

.network-content p{
    max-width:390px;
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}

/* NETWORK ANIMATION */

.network{
    position:relative;
    height:260px;
    margin-top:30px;
}

.node{
    position:absolute;
    width:43px;
    height:43px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    border:1px solid #d4ebf2;
    box-shadow:0 10px 25px rgba(33,124,154,.1);
    z-index:4;
}

.node:after{
    content:"";
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(59,213,155,.1);
}

.n1{
    left:4%;
    top:42px;
}

.n2{
    right:4%;
    top:25px;
}

.n3{
    left:18%;
    bottom:20px;
}

.n4{
    right:17%;
    bottom:7px;
}

.line{
    position:absolute;
    height:2px;
    transform-origin:left center;
    background:linear-gradient(
        90deg,
        rgba(21,158,232,.05),
        var(--blue),
        rgba(59,213,155,.15)
    );
}

.l1{
    width:245px;
    left:9%;
    top:95px;
    transform:rotate(8deg);
}

.l2{
    width:245px;
    left:51%;
    top:85px;
    transform:rotate(-13deg);
}

.l3{
    width:230px;
    left:20%;
    top:145px;
    transform:rotate(23deg);
}

.l4{
    width:220px;
    left:52%;
    top:145px;
    transform:rotate(25deg);
}

.packet{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(59,213,155,.1);
    animation:packet 3s linear infinite;
    z-index:8;
}

.p1{
    left:16%;
    top:91px;
}

.p2{
    left:63%;
    top:86px;
    animation-delay:1s;
}

.p3{
    left:30%;
    top:147px;
    animation-delay:1.7s;
}

@keyframes packet{
    0%{
        opacity:0;
        transform:scale(.4);
    }
    20%{
        opacity:1;
    }
    70%{
        opacity:1;
        transform:scale(1.25);
    }
    100%{
        opacity:0;
        transform:scale(.5);
    }
}

.router{
    position:absolute;
    width:108px;
    height:108px;
    left:50%;
    top:48%;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    border-radius:28px;
    background:#fff;
    border:1px solid #cdebf4;
    box-shadow:
        0 0 0 10px rgba(255,255,255,.7),
        0 20px 40px rgba(29,129,163,.15);
    z-index:7;
}

.router-body{
    width:55px;
    height:40px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    position:relative;
    box-shadow:0 10px 20px rgba(21,158,232,.25);
}

.router-body:before{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:8px;
    height:4px;
    border-radius:5px;
    background:rgba(255,255,255,.8);
}

.router-body:after{
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    right:10px;
    top:8px;
    background:var(--green);
}

.status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid #dceef3;
    background:rgba(255,255,255,.82);
}

.status-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.status-icon{
    width:33px;
    height:33px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#edfff7;
    color:var(--green2);
}

.status-title{
    font-size:11px;
    font-weight:800;
}

.status-sub{
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
}

.status-right{
    color:var(--green2);
    font-size:9px;
    font-weight:800;
}

/* =========================================================
   RIGHT AUTH AREA
========================================================= */

.auth-area{
    position:relative;
    padding:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}

.auth{
    width:100%;
    max-width:425px;
}

/* STEP BAR */

.steps{
    display:flex;
    align-items:center;
    margin-bottom:35px;
}

.step{
    display:flex;
    align-items:center;
    flex:1;
}

.step:last-child{
    flex:0;
}

.step-circle{
    width:30px;
    height:30px;
    min-width:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid #dcecf2;
    background:#f2f7f9;
    color:#9aadb7;
    font-size:10px;
    font-weight:800;
    transition:.35s;
}

.step-line{
    width:100%;
    height:2px;
    margin:0 7px;
    background:#e5eff3;
    transition:.4s;
}

.step.active .step-circle{
    color:#fff;
    background:var(--blue);
    border-color:var(--blue);
    box-shadow:0 0 0 5px rgba(21,158,232,.08);
}

.step.done .step-circle{
    color:#fff;
    background:var(--green);
    border-color:var(--green);
}

.step.done .step-line{
    background:linear-gradient(90deg,var(--blue),var(--green));
}

/* SCREENS */

.screen{
    display:none;
    animation:pageIn .45s cubic-bezier(.2,.8,.2,1);
}

.screen.active{
    display:block;
}

@keyframes pageIn{
    from{
        opacity:0;
        transform:translateX(35px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateX(0) scale(1);
    }
}

.back{
    border:0;
    background:none;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    margin-bottom:18px;
}

.back:hover{
    color:var(--blue2);
}

.kicker{
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

h2{
    margin-top:9px;
    font-size:31px;
    letter-spacing:-1.5px;
}

.description{
    margin-top:9px;
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
}

.field{
    margin-top:19px;
}

.field label{
    display:block;
    margin-bottom:8px;
    color:#527083;
    font-size:10px;
    font-weight:800;
}

.input{
    width:100%;
    height:53px;
    padding:0 17px;
    border:1px solid var(--border);
    border-radius:14px;
    outline:none;
    background:#fbfdfe;
    color:var(--dark);
    font-size:13px;
    transition:.25s;
}

.input:focus{
    background:#fff;
    border-color:#7dccec;
    box-shadow:0 0 0 4px rgba(21,158,232,.07);
}

/* SELECT TYPE */

.choice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:21px;
}

.choice{
    min-height:70px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fbfdfe;
    color:var(--muted);
    transition:.25s;
    text-align:left;
}

.choice:hover{
    transform:translateY(-2px);
}

.choice.selected{
    border-color:#8ed3ec;
    background:#effaff;
    color:var(--blue2);
}

.choice strong{
    display:block;
    color:var(--dark);
    font-size:11px;
}

.choice span{
    display:block;
    margin-top:6px;
    font-size:9px;
    color:var(--muted);
}

/* MAIN BUTTON */

.primary{
    width:100%;
    min-height:54px;
    margin-top:20px;
    border:0;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(100deg,var(--blue),#28b8dd,var(--green));
    box-shadow:0 14px 28px rgba(24,164,207,.2);
    font-size:11px;
    font-weight:800;
    letter-spacing:.3px;
    transition:.25s;
}

.primary:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 32px rgba(24,164,207,.25);
}

.secondary{
    width:100%;
    height:48px;
    margin-top:10px;
    border:1px solid var(--border);
    border-radius:13px;
    background:#fff;
    color:var(--blue2);
    font-size:10px;
    font-weight:800;
}

.link-row{
    display:flex;
    justify-content:center;
    gap:5px;
    margin-top:18px;
    color:var(--muted);
    font-size:10px;
}

.link{
    border:0;
    background:none;
    color:var(--blue2);
    font-size:10px;
    font-weight:800;
}

.security{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin-top:24px;
    color:#9aadb7;
    font-size:9px;
}

.lock{
    width:15px;
    height:15px;
    display:grid;
    place-items:center;
    border-radius:5px;
    background:#edfff7;
    color:var(--green2);
}

/* AUTH METHOD CARDS */

.auth-methods{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:25px;
}

.auth-card{
    min-height:135px;
    padding:17px;
    border:1px solid var(--border);
    border-radius:17px;
    background:#fbfdfe;
    text-align:left;
    transition:.3s;
}

.auth-card:hover{
    transform:translateY(-5px);
    border-color:#8dd4ec;
    box-shadow:0 15px 30px rgba(21,158,232,.1);
}

.auth-card-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#eaf8fe;
    font-size:17px;
}

.auth-card strong{
    display:block;
    margin-top:12px;
    color:var(--dark);
    font-size:11px;
}

.auth-card span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:9px;
    line-height:1.5;
}

/* PASSWORD */

.password{
    position:relative;
}

.password .input{
    padding-right:50px;
}

.eye{
    position:absolute;
    right:8px;
    top:8px;
    width:37px;
    height:37px;
    border:0;
    background:none;
    color:var(--muted);
}

/* OTP */

.otp-info{
    margin-top:20px;
    padding:12px;
    border:1px solid #e0f0f5;
    border-radius:12px;
    background:#f4fbfe;
    text-align:center;
    color:var(--muted);
    font-size:9px;
}

.otp-info strong{
    color:var(--dark);
}

.otp-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:7px;
    margin-top:17px;
}

.otp{
    width:100%;
    height:52px;
    border:1px solid var(--border);
    border-radius:12px;
    outline:none;
    background:#fbfdfe;
    text-align:center;
    font-size:18px;
    font-weight:800;
    color:var(--blue2);
}

.otp:focus{
    border-color:#76caea;
    box-shadow:0 0 0 4px rgba(21,158,232,.07);
}

.resend{
    margin-top:14px;
    text-align:center;
    color:var(--muted);
    font-size:9px;
}

.resend button{
    border:0;
    background:none;
    color:var(--blue2);
    font-weight:800;
}

/* VERIFY DETAILS */

.verify-box{
    margin-top:22px;
    padding:17px;
    border-radius:16px;
    border:1px solid #dceef4;
    background:#f7fcfe;
}

.verify-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px solid #e7f1f4;
}

.verify-row:last-child{
    border-bottom:0;
}

.verify-row span{
    color:var(--muted);
    font-size:10px;
}

.verify-row strong{
    font-size:10px;
}

/* SUCCESS */

.success{
    text-align:center;
}

.success-icon{
    width:96px;
    height:96px;
    display:grid;
    place-items:center;
    margin:0 auto 25px;
    border-radius:50%;
    background:#edfff7;
    border:1px solid #c5efdc;
    color:var(--green2);
    font-size:38px;
    animation:success .6s ease;
}

@keyframes success{
    0%{
        opacity:0;
        transform:scale(.4);
    }
    70%{
        transform:scale(1.08);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

.info-card{
    margin-top:23px;
    padding:16px;
    border-radius:15px;
    background:#f7fcfe;
    border:1px solid #e2eff4;
    text-align:left;
}

.info-row{
    display:flex;
    justify-content:space-between;
    padding:7px 0;
    font-size:10px;
}

.info-row span{
    color:var(--muted);
}

/* LOADING */

.loading{
    text-align:center;
}

.loader{
    width:100px;
    height:100px;
    margin:15px auto 25px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid #c8eaf5;
    background:#f0fbff;
    position:relative;
}

.loader:before,
.loader:after{
    content:"";
    position:absolute;
    border:1px solid rgba(21,158,232,.25);
    border-radius:50%;
    animation:ripple 2s infinite;
}

.loader:before{
    inset:-12px;
}

.loader:after{
    inset:-24px;
    animation-delay:.5s;
}

.loader-router{
    width:42px;
    height:30px;
    border-radius:8px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
}

@keyframes ripple{
    from{
        opacity:1;
        transform:scale(.85);
    }
    to{
        opacity:0;
        transform:scale(1.2);
    }
}

.progress-bar{
    width:100%;
    height:5px;
    margin-top:24px;
    overflow:hidden;
    border-radius:10px;
    background:#edf5f8;
}

.progress-fill{
    width:0;
    height:100%;
    border-radius:10px;
    background:linear-gradient(90deg,var(--blue),var(--green));
    transition:width 2.8s linear;
}

/* ERROR */

.error{
    display:none;
    margin-top:12px;
    padding:10px;
    border-radius:10px;
    background:#fff3f3;
    border:1px solid #ffd6d6;
    color:var(--red);
    font-size:9px;
}

.error.show{
    display:block;
}

/* SUCCESS MESSAGE */

.message{
    display:none;
    margin-top:12px;
    padding:11px;
    border-radius:11px;
    background:#edfff7;
    border:1px solid #c9f1df;
    color:var(--green2);
    font-size:9px;
    font-weight:700;
    text-align:center;
}

.message.show{
    display:block;
}

/* RESPONSIVE */

@media(max-width:900px){

    .page{
        padding:15px;
    }

    .app{
        grid-template-columns:1fr;
    }

    .network-area{
        min-height:500px;
    }

    .network-content{
        margin-top:70px;
    }
}

@media(max-width:520px){

    body{
        background:#fff;
    }

    .page{
        padding:0;
    }

    .app{
        min-height:100vh;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .network-area{
        min-height:445px;
        padding:25px 21px;
    }

    .network-content{
        margin-top:55px;
    }

    .network-content h1{
        font-size:34px;
    }

    .network{
        transform:scale(.78);
        transform-origin:left top;
        width:128%;
    }

    .status{
        margin-top:-35px;
    }

    .auth-area{
        padding:35px 22px 45px;
    }

    h2{
        font-size:28px;
    }

    .auth-methods{
        grid-template-columns:1fr;
    }

    .otp-grid{
        gap:5px;
    }

    .otp{
        height:48px;
    }
}
</style>
</head>

<body>

<div class="page">

<div class="app">

<!-- =====================================================
     ISP SIDE
===================================================== -->

<section class="network-area">

    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>

    <div class="brand">
        <div class="logo">F</div>
        <div class="brand-name">
            Fiber<span>Net</span>
        </div>
    </div>

    <div class="network-content">

        <div class="online">
            <span class="online-dot"></span>
            ISP NETWORK ONLINE
        </div>

        <h1>
            Your internet.<br>
            <span>Your control.</span>
        </h1>

        <p>
            Securely manage your FiberNet broadband account,
            verify your identity, pay bills, upgrade plans
            and stay connected.
        </p>

        <div class="network">

            <div class="line l1"></div>
            <div class="line l2"></div>
            <div class="line l3"></div>
            <div class="line l4"></div>

            <div class="packet p1"></div>
            <div class="packet p2"></div>
            <div class="packet p3"></div>

            <div class="node n1"></div>
            <div class="node n2"></div>
            <div class="node n3"></div>
            <div class="node n4"></div>

            <div class="router">
                <div class="router-body"></div>
            </div>

        </div>

        <div class="status">

            <div class="status-left">

                <div class="status-icon">✓</div>

                <div>
                    <div class="status-title">
                        Fiber Network
                    </div>

                    <div class="status-sub">
                        Broadband services operational
                    </div>
                </div>

            </div>

            <div class="status-right">
                ● STABLE
            </div>

        </div>

    </div>

</section>


<!-- =====================================================
     AUTH
===================================================== -->

<section class="auth-area">

<div class="auth">

<!-- STEPS -->

<div class="steps">

    <div class="step active" id="step1">
        <div class="step-circle">1</div>
        <div class="step-line"></div>
    </div>

    <div class="step" id="step2">
        <div class="step-circle">2</div>
        <div class="step-line"></div>
    </div>

    <div class="step" id="step3">
        <div class="step-circle">3</div>
        <div class="step-line"></div>
    </div>

    <div class="step" id="step4">
        <div class="step-circle">4</div>
    </div>

</div>


<!-- =====================================================
     SCREEN 1
     EMAIL / MOBILE
===================================================== -->

<div class="screen active" id="screen1">

    <div class="kicker">
        CUSTOMER ACCESS
    </div>

    <h2>
        Welcome to FiberNet
    </h2>

    <p class="description">
        Sign in using your registered email address,
        mobile number or customer ID.
    </p>

    <div class="choice-grid">

        <button
            class="choice selected"
            id="mobileChoice"
            onclick="chooseIdentifier('mobile')">

            <strong>📱 Mobile Number</strong>

            <span>
                Login using your registered mobile
            </span>

        </button>

        <button
            class="choice"
            id="emailChoice"
            onclick="chooseIdentifier('email')">

            <strong>✉ Email Address</strong>

            <span>
                Login using your registered email
            </span>

        </button>

    </div>

    <div class="field">

        <label id="identityLabel">
            REGISTERED MOBILE NUMBER
        </label>

        <input
            class="input"
            id="identityInput"
            type="tel"
            placeholder="+91 98765 43210">

    </div>

    <button
        class="primary"
        onclick="continueIdentity()">
        CONTINUE →
    </button>

    <div class="link-row">

        <span>New FiberNet customer?</span>

        <button
            class="link"
            onclick="startSignup()">
            Create Account
        </button>

    </div>

    <div class="link-row">

        <button
            class="link"
            onclick="startForgot()">
            Forgot Password?
        </button>

    </div>

    <div class="security">
        <span class="lock">✓</span>
        Secure ISP authentication
    </div>

</div>


<!-- =====================================================
     SCREEN 2
     LOGIN CHOICE
===================================================== -->

<div class="screen" id="screen2">

    <button
        class="back"
        onclick="showScreen(1)">
        ← Change email / mobile
    </button>

    <div class="kicker">
        ACCOUNT FOUND
    </div>

    <h2>
        Choose your login
    </h2>

    <p class="description">
        Select how you want to securely access your
        FiberNet customer account.
    </p>

    <div class="verify-box">

        <div class="verify-row">
            <span>Registered account</span>
            <strong id="displayIdentity">
                —
            </strong>
        </div>

        <div class="verify-row">
            <span>Connection</span>
            <strong>Fiber Broadband</strong>
        </div>

    </div>

    <div class="auth-methods">

        <button
            class="auth-card"
            onclick="openLoginPassword()">

            <div class="auth-card-icon">
                🔐
            </div>

            <strong>
                Login with Password
            </strong>

            <span>
                Use your existing FiberNet account
                password.
            </span>

        </button>

        <button
            class="auth-card"
            onclick="openLoginOTP()">

            <div class="auth-card-icon">
                📱
            </div>

            <strong>
                Login with OTP
            </strong>

            <span>
                Receive a secure one-time
                verification code.
            </span>

        </button>

    </div>

    <div class="link-row">

        <button
            class="link"
            onclick="startForgot()">
            Forgot password?
        </button>

    </div>

</div>


<!-- =====================================================
     SCREEN 3
     LOGIN PASSWORD
===================================================== -->

<div class="screen" id="screenLoginPassword">

    <button
        class="back"
        onclick="showScreen(2)">
        ← Back to login options
    </button>

    <div class="kicker">
        PASSWORD LOGIN
    </div>

    <h2>
        Welcome back
    </h2>

    <p class="description">
        Enter your FiberNet password to securely
        access your account.
    </p>

    <div class="field">

        <label>
            EMAIL / MOBILE
        </label>

        <input
            class="input"
            id="passwordIdentity"
            readonly>

    </div>

    <div class="field">

        <label>
            ACCOUNT PASSWORD
        </label>

        <div class="password">

            <input
                class="input"
                id="loginPassword"
                type="password"
                placeholder="Enter your password">

            <button
                class="eye"
                onclick="togglePassword('loginPassword',this)">
                ◉
            </button>

        </div>

    </div>

    <div
        class="error"
        id="passwordError">
    </div>

    <button
        class="primary"
        onclick="loginPassword()">
        LOGIN SECURELY →
    </button>

    <button
        class="secondary"
        onclick="openLoginOTP()">
        LOGIN WITH OTP INSTEAD
    </button>

    <div class="link-row">

        <button
            class="link"
            onclick="startForgot()">
            Forgot password?
        </button>

    </div>

</div>


<!-- =====================================================
     SCREEN 4
     LOGIN OTP
===================================================== -->

<div class="screen" id="screenLoginOTP">

    <button
        class="back"
        onclick="showScreen(2)">
        ← Back to login options
    </button>

    <div class="kicker">
        OTP LOGIN
    </div>

    <h2>
        Verify your account
    </h2>

    <p class="description">
        Enter the 6-digit OTP sent to your registered
        email or mobile number.
    </p>

    <div class="otp-info">
        OTP sent to
        <strong id="loginOTPDestination">
            —
        </strong>
    </div>

    <div class="otp-grid">

        <input class="otp">
        <input class="otp">
        <input class="otp">
        <input class="otp">
        <input class="otp">
        <input class="otp">

    </div>

    <div
        class="error"
        id="loginOTPError">
    </div>

    <button
        class="primary"
        onclick="verifyLoginOTP()">
        VERIFY OTP →
    </button>

    <div class="resend">

        <span id="loginTimer">
            Resend OTP in 00:30
        </span>

        <button
            id="loginResend"
            style="display:none"
            onclick="resendLoginOTP()">
            Resend OTP
        </button>

    </div>

</div>


<!-- =====================================================
     SCREEN SIGNUP DETAILS
===================================================== -->

<div class="screen" id="screenSignupDetails">

    <button
        class="back"
        onclick="showScreen(1)">
        ← Back to login
    </button>

    <div class="kicker">
        CREATE ACCOUNT
    </div>

    <h2>
        Create your FiberNet account
    </h2>

    <p class="description">
        Enter your details. Your email address or mobile
        number will be verified with OTP.
    </p>

    <div class="field">

        <label>
            FULL NAME
        </label>

        <input
            class="input"
            id="signupName"
            placeholder="Enter your full name">

    </div>

    <div class="choice-grid">

        <button
            class="choice selected"
            id="signupMobileChoice"
            onclick="chooseSignupIdentity('mobile')">

            <strong>📱 Mobile</strong>

            <span>
                Verify mobile with OTP
            </span>

        </button>

        <button
            class="choice"
            id="signupEmailChoice"
            onclick="chooseSignupIdentity('email')">

            <strong>✉ Email</strong>

            <span>
                Verify email with OTP
            </span>

        </button>

    </div>

    <div class="field">

        <label id="signupIdentityLabel">
            MOBILE NUMBER
        </label>

        <input
            class="input"
            id="signupIdentity"
            type="tel"
            placeholder="+91 98765 43210">

    </div>

    <div
        class="error"
        id="signupDetailsError">
    </div>

    <button
        class="primary"
        onclick="verifySignupDetails()">
        VERIFY DETAILS →
    </button>

</div>


<!-- =====================================================
     SCREEN SIGNUP OTP
===================================================== -->

<div class="screen" id="screenSignupOTP">

    <button
        class="back"
        onclick="showScreen('SignupDetails')">
        ← Change details
    </button>

    <div class="kicker">
        VERIFY YOUR DETAILS
    </div>

    <h2>
        Confirm your identity
    </h2>

    <p class="description">
        We sent a 6-digit verification code to
        your registered contact.
    </p>

    <div class="otp-info">
        Verification code sent to
        <strong id="signupOTPDestination">
            —
        </strong>
    </div>

    <div class="otp-grid signup-otp-grid">

        <input class="otp signupOtp">
        <input class="otp signupOtp">
        <input class="otp signupOtp">
        <input class="otp signupOtp">
        <input class="otp signupOtp">
        <input class="otp signupOtp">

    </div>

    <div
        class="error"
        id="signupOTPError">
    </div>

    <button
        class="primary"
        onclick="verifySignupOTP()">
        VERIFY & CONTINUE →
    </button>

    <div class="resend">

        <span id="signupTimer">
            Resend OTP in 00:30
        </span>

        <button
            id="signupResend"
            style="display:none"
            onclick="resendSignupOTP()">
            Resend OTP
        </button>

    </div>

</div>


<!-- =====================================================
     SCREEN SIGNUP METHOD
===================================================== -->

<div class="screen" id="screenSignupMethod">

    <button
        class="back"
        onclick="showScreen('SignupDetails')">
        ← Back
    </button>

    <div class="kicker">
        DETAILS VERIFIED ✓
    </div>

    <h2>
        Finish your account
    </h2>

    <p class="description">
        Your email/mobile has been successfully verified.
        Now choose how you want to protect your FiberNet account.
    </p>

    <div class="verify-box">

        <div class="verify-row">
            <span>Name</span>
            <strong id="verifiedName">—</strong>
        </div>

        <div class="verify-row">
            <span>Verified contact</span>
            <strong id="verifiedContact">—</strong>
        </div>

        <div class="verify-row">
            <span>Verification</span>
            <strong style="color:#1eb87e">
                ✓ Verified
            </strong>
        </div>

    </div>

    <div class="auth-methods">

        <button
            class="auth-card"
            onclick="openSignupPassword()">

            <div class="auth-card-icon">
                🔐
            </div>

            <strong>
                Signup with Password
            </strong>

            <span>
                Create a password for future
                account login.
            </span>

        </button>

        <button
            class="auth-card"
            onclick="openSignupOTP()">

            <div class="auth-card-icon">
                📱
            </div>

            <strong>
                Signup with OTP
            </strong>

            <span>
                Use OTP authentication whenever
                you access your account.
            </span>

        </button>

    </div>

</div>


<!-- =====================================================
     SCREEN SIGNUP PASSWORD
===================================================== -->

<div class="screen" id="screenSignupPassword">

    <button
        class="back"
        onclick="showScreen('SignupMethod')">
        ← Back
    </button>

    <div class="kicker">
        PASSWORD SETUP
    </div>

    <h2>
        Create your password
    </h2>

    <p class="description">
        Your contact is verified. Create a strong
        password for your FiberNet account.
    </p>

    <div class="field">

        <label>
            CREATE PASSWORD
        </label>

        <div class="password">

            <input
                class="input"
                id="signupPassword"
                type="password"
                placeholder="Minimum 6 characters">

            <button
                class="eye"
                onclick="togglePassword('signupPassword',this)">
                ◉
            </button>

        </div>

    </div>

    <div class="field">

        <label>
            CONFIRM PASSWORD
        </label>

        <div class="password">

            <input
                class="input"
                id="signupConfirm"
                type="password"
                placeholder="Confirm password">

            <button
                class="eye"
                onclick="togglePassword('signupConfirm',this)">
                ◉
            </button>

        </div>

    </div>

    <div
        class="error"
        id="signupPasswordError">
    </div>

    <button
        class="primary"
        onclick="createPasswordAccount()">
        CREATE ACCOUNT →
    </button>

</div>


<!-- =====================================================
     SCREEN SIGNUP OTP
===================================================== -->

<div class="screen" id="screenSignupOtpMethod">

    <button
        class="back"
        onclick="showScreen('SignupMethod')">
        ← Back
    </button>

    <div class="kicker">
        OTP ACCOUNT
    </div>

    <h2>
        Use OTP to sign in
    </h2>

    <p class="description">
        Your account is verified. OTP authentication
        will be used for secure future logins.
    </p>

    <div class="verify-box">

        <div class="verify-row">
            <span>Account</span>
            <strong id="otpSignupAccount">—</strong>
        </div>

        <div class="verify-row">
            <span>Authentication</span>
            <strong style="color:#1eb87e">
                OTP Enabled
            </strong>
        </div>

    </div>

    <button
        class="primary"
        onclick="completeSignupOTP()">
        COMPLETE ACCOUNT →
    </button>

</div>


<!-- =====================================================
     FORGOT PASSWORD
===================================================== -->

<div class="screen" id="screenForgot">

    <button
        class="back"
        onclick="showScreen(1)">
        ← Back
    </button>

    <div class="kicker">
        ACCOUNT RECOVERY
    </div>

    <h2>
        Reset your password
    </h2>

    <p class="description">
        Enter your registered email or mobile number.
        We will verify it with OTP.
    </p>

    <div class="field">

        <label>
            EMAIL / MOBILE NUMBER
        </label>

        <input
            class="input"
            id="forgotIdentity"
            placeholder="Email or mobile number">

    </div>

    <div
        class="error"
        id="forgotError">
    </div>

    <button
        class="primary"
        onclick="sendForgotOTP()">
        SEND RECOVERY OTP →
    </button>

</div>


<!-- =====================================================
     FORGOT OTP
===================================================== -->

<div class="screen" id="screenForgotOTP">

    <button
        class="back"
        onclick="showScreen('Forgot')">
        ← Back
    </button>

    <div class="kicker">
        RECOVERY VERIFICATION
    </div>

    <h2>
        Verify recovery request
    </h2>

    <p class="description">
        Enter the OTP sent to your registered
        email/mobile.
    </p>

    <div class="otp-info">
        OTP sent to
        <strong id="forgotDestination">
            —
        </strong>
    </div>

    <div class="otp-grid">

        <input class="otp forgotOtp">
        <input class="otp forgotOtp">
        <input class="otp forgotOtp">
        <input class="otp forgotOtp">
        <input class="otp forgotOtp">
        <input class="otp forgotOtp">

    </div>

    <div
        class="error"
        id="forgotOTPError">
    </div>

    <button
        class="primary"
        onclick="verifyForgotOTP()">
        VERIFY OTP →
    </button>

</div>


<!-- =====================================================
     NEW PASSWORD
===================================================== -->

<div class="screen" id="screenNewPassword">

    <button
        class="back"
        onclick="showScreen('ForgotOTP')">
        ← Back
    </button>

    <div class="kicker">
        PASSWORD RECOVERY
    </div>

    <h2>
        Create new password
    </h2>

    <p class="description">
        Your identity has been verified. Create
        a new password.
    </p>

    <div class="field">

        <label>
            NEW PASSWORD
        </label>

        <div class="password">

            <input
                class="input"
                id="newPassword"
                type="password"
                placeholder="New password">

            <button
                class="eye"
                onclick="togglePassword('newPassword',this)">
                ◉
            </button>

        </div>

    </div>

    <div class="field">

        <label>
            CONFIRM PASSWORD
        </label>

        <div class="password">

            <input
                class="input"
                id="newPasswordConfirm"
                type="password"
                placeholder="Confirm password">

            <button
                class="eye"
                onclick="togglePassword('newPasswordConfirm',this)">
                ◉
            </button>

        </div>

    </div>

    <div
        class="error"
        id="newPasswordError">
    </div>

    <button
        class="primary"
        onclick="saveNewPassword()">
        UPDATE PASSWORD →
    </button>

</div>


<!-- =====================================================
     CONNECTING
===================================================== -->

<div class="screen" id="screenConnecting">

    <div class="loading">

        <div class="loader">
            <div class="loader-router"></div>
        </div>

        <div class="kicker">
            AUTHENTICATED
        </div>

        <h2>
            Connecting your account
        </h2>

        <p class="description">
            Preparing your secure FiberNet customer
            dashboard.
        </p>

        <div class="progress-bar">
            <div
                class="progress-fill"
                id="progressFill">
            </div>
        </div>

    </div>

</div>


<!-- =====================================================
     SUCCESS
===================================================== -->

<div class="screen" id="screenSuccess">

    <div class="success">

        <div class="success-icon">
            ✓
        </div>

        <div class="kicker">
            CONNECTION VERIFIED
        </div>

        <h2>
            You're connected!
        </h2>

        <p class="description">
            Your FiberNet account has been
            successfully authenticated.
        </p>

        <div class="info-card">

            <div class="info-row">
                <span>Customer</span>
                <strong id="successName">
                    FiberNet Customer
                </strong>
            </div>

            <div class="info-row">
                <span>Account</span>
                <strong id="successAccount">
                    —
                </strong>
            </div>

            <div class="info-row">
                <span>Connection</span>
                <strong>
                    Fiber Broadband
                </strong>
            </div>

            <div class="info-row">
                <span>Status</span>
                <strong style="color:#1eb87e">
                    ● Active
                </strong>
            </div>

        </div>

        <button
            class="primary"
            onclick="openDashboard()">
            ENTER CUSTOMER DASHBOARD →
        </button>

        <div class="security">
            <span class="lock">✓</span>
            Secure ISP session established
        </div>

    </div>

</div>

</div>

</section>

</div>

</div>


<script>

/* =========================================================
   GLOBAL STATE
========================================================= */

let identifierType = "mobile";
let signupIdentifierType = "mobile";

let identifierValue = "";
let signupNameValue = "";
let signupIdentityValue = "";

let timer = null;
let timerSeconds = 30;


/* =========================================================
   HELPER
========================================================= */

function $(id){
    return document.getElementById(id);
}


/* =========================================================
   SCREEN SYSTEM
========================================================= */

function showScreen(name){

    document
        .querySelectorAll(".screen")
        .forEach(screen => {
            screen.classList.remove("active");
        });

    const screen = $("screen" + name);

    if(screen){
        screen.classList.add("active");
    }

    updateSteps(name);

    window.scrollTo({
        top:0,
        behavior:"smooth"
    });
}


/* =========================================================
   STEP INDICATOR
========================================================= */

function updateSteps(name){

    let current = 1;

    if(
        name === 2 ||
        name === "LoginPassword" ||
        name === "LoginOTP"
    ){
        current = 2;
    }

    if(
        name === "SignupDetails" ||
        name === "SignupOTP" ||
        name === "SignupMethod" ||
        name === "SignupPassword" ||
        name === "SignupOtpMethod"
    ){
        current = 2;
    }

    if(
        name === "Connecting" ||
        name === "Success"
    ){
        current = 4;
    }

    if(
        name === "Forgot" ||
        name === "ForgotOTP" ||
        name === "NewPassword"
    ){
        current = 2;
    }

    for(let i=1;i<=4;i++){

        const step = $("step" + i);

        step.classList.remove("active");
        step.classList.remove("done");

        if(i < current){
            step.classList.add("done");
        }

        if(i === current){
            step.classList.add("active");
        }
    }
}


/* =========================================================
   LOGIN EMAIL / MOBILE
========================================================= */

function chooseIdentifier(type){

    identifierType = type;

    $("mobileChoice").classList.toggle(
        "selected",
        type === "mobile"
    );

    $("emailChoice").classList.toggle(
        "selected",
        type === "email"
    );

    if(type === "mobile"){

        $("identityLabel").innerText =
            "REGISTERED MOBILE NUMBER";

        $("identityInput").type = "tel";

        $("identityInput").placeholder =
            "+91 98765 43210";

    }else{

        $("identityLabel").innerText =
            "REGISTERED EMAIL ADDRESS";

        $("identityInput").type = "email";

        $("identityInput").placeholder =
            "customer@example.com";

    }

    $("identityInput").focus();
}


function continueIdentity(){

    const value =
        $("identityInput").value.trim();

    if(!value){

        $("identityInput").focus();

        return;
    }

    identifierValue = value;

    $("displayIdentity").innerText =
        mask(identifierValue);

    showScreen(2);
}


/* =========================================================
   LOGIN PASSWORD
========================================================= */

function openLoginPassword(){

    $("passwordIdentity").value =
        identifierValue;

    $("loginPassword").value = "";

    $("passwordError").classList.remove("show");

    showScreen("LoginPassword");

    setTimeout(() => {
        $("loginPassword").focus();
    },300);
}


function loginPassword(){

    const password =
        $("loginPassword").value.trim();

    if(!password){

        showError(
            "passwordError",
            "Please enter your account password."
        );

        return;
    }

    startConnection();
}


/* =========================================================
   LOGIN OTP
========================================================= */

function openLoginOTP(){

    clearOTP(".screen#screenLoginOTP");

    $("loginOTPDestination").innerText =
        mask(identifierValue);

    showScreen("LoginOTP");

    startTimer(
        "loginTimer",
        "loginResend",
        resendLoginOTP
    );

    setTimeout(() => {

        const input =
            document.querySelector(
                "#screenLoginOTP .otp"
            );

        if(input){
            input.focus();
        }

    },300);
}


function verifyLoginOTP(){

    const otp =
        getOTP("#screenLoginOTP");

    if(otp.length !== 6){

        showError(
            "loginOTPError",
            "Please enter the complete 6-digit OTP."
        );

        return;
    }

    if(otp !== "123456"){

        showError(
            "loginOTPError",
            "Invalid OTP. For this demo use 123456."
        );

        return;
    }

    startConnection();
}


function resendLoginOTP(){

    clearOTP("#screenLoginOTP");

    startTimer(
        "loginTimer",
        "loginResend",
        resendLoginOTP
    );
}


/* =========================================================
   SIGNUP START
========================================================= */

function startSignup(){

    $("signupName").value = "";
    $("signupIdentity").value = "";

    chooseSignupIdentity("mobile");

    showScreen("SignupDetails");
}


function chooseSignupIdentity(type){

    signupIdentifierType = type;

    $("signupMobileChoice").classList.toggle(
        "selected",
        type === "mobile"
    );

    $("signupEmailChoice").classList.toggle(
        "selected",
        type === "email"
    );

    if(type === "mobile"){

        $("signupIdentityLabel").innerText =
            "MOBILE NUMBER";

        $("signupIdentity").type = "tel";

        $("signupIdentity").placeholder =
            "+91 98765 43210";

    }else{

        $("signupIdentityLabel").innerText =
            "EMAIL ADDRESS";

        $("signupIdentity").type = "email";

        $("signupIdentity").placeholder =
            "customer@example.com";

    }
}


/* =========================================================
   SIGNUP VERIFY DETAILS
========================================================= */

function verifySignupDetails(){

    const name =
        $("signupName").value.trim();

    const identity =
        $("signupIdentity").value.trim();

    if(!name){

        showError(
            "signupDetailsError",
            "Please enter your full name."
        );

        return;
    }

    if(!identity){

        showError(
            "signupDetailsError",
            "Please enter your email or mobile number."
        );

        return;
    }

    signupNameValue = name;
    signupIdentityValue = identity;

    $("signupOTPDestination").innerText =
        mask(identity);

    showScreen("SignupOTP");

    startTimer(
        "signupTimer",
        "signupResend",
        resendSignupOTP
    );

    setTimeout(() => {

        const input =
            document.querySelector(
                "#screenSignupOTP .otp"
            );

        if(input){
            input.focus();
        }

    },300);
}


/* =========================================================
   SIGNUP OTP
========================================================= */

function verifySignupOTP(){

    const otp =
        getOTP("#screenSignupOTP");

    if(otp.length !== 6){

        showError(
            "signupOTPError",
            "Please enter the complete 6-digit OTP."
        );

        return;
    }

    if(otp !== "123456"){

        showError(
            "signupOTPError",
            "Invalid OTP. For this demo use 123456."
        );

        return;
    }

    $("verifiedName").innerText =
        signupNameValue;

    $("verifiedContact").innerText =
        mask(signupIdentityValue);

    showScreen("SignupMethod");
}


function resendSignupOTP(){

    clearOTP("#screenSignupOTP");

    startTimer(
        "signupTimer",
        "signupResend",
        resendSignupOTP
    );
}


/* =========================================================
   SIGNUP PASSWORD
========================================================= */

function openSignupPassword(){

    $("signupPassword").value = "";
    $("signupConfirm").value = "";

    $("signupPasswordError").classList.remove("show");

    showScreen("SignupPassword");

    setTimeout(() => {
        $("signupPassword").focus();
    },300);
}


function createPasswordAccount(){

    const password =
        $("signupPassword").value;

    const confirm =
        $("signupConfirm").value;

    if(password.length < 6){

        showError(
            "signupPasswordError",
            "Password must contain at least 6 characters."
        );

        return;
    }

    if(password !== confirm){

        showError(
            "signupPasswordError",
            "Passwords do not match."
        );

        return;
    }

    startSignupSuccess();
}


/* =========================================================
   SIGNUP OTP METHOD
========================================================= */

function openSignupOTP(){

    $("otpSignupAccount").innerText =
        mask(signupIdentityValue);

    showScreen("SignupOtpMethod");
}


function completeSignupOTP(){

    startSignupSuccess();
}


/* =========================================================
   SIGNUP SUCCESS
========================================================= */

function startSignupSuccess(){

    $("successName").innerText =
        signupNameValue;

    $("successAccount").innerText =
        mask(signupIdentityValue);

    startConnection();
}


/* =========================================================
   FORGOT PASSWORD
========================================================= */

function startForgot(){

    $("forgotIdentity").value = "";

    $("forgotError").classList.remove("show");

    showScreen("Forgot");

    setTimeout(() => {
        $("forgotIdentity").focus();
    },300);
}


function sendForgotOTP(){

    const identity =
        $("forgotIdentity").value.trim();

    if(!identity){

        showError(
            "forgotError",
            "Please enter your registered email or mobile number."
        );

        return;
    }

    identifierValue = identity;

    $("forgotDestination").innerText =
        mask(identity);

    clearOTP("#screenForgotOTP");

    showScreen("ForgotOTP");
}


function verifyForgotOTP(){

    const otp =
        getOTP("#screenForgotOTP");

    if(otp.length !== 6){

        showError(
            "forgotOTPError",
            "Please enter the complete 6-digit OTP."
        );

        return;
    }

    if(otp !== "123456"){

        showError(
            "forgotOTPError",
            "Invalid OTP. For this demo use 123456."
        );

        return;
    }

    $("newPassword").value = "";
    $("newPasswordConfirm").value = "";

    showScreen("NewPassword");
}


function saveNewPassword(){

    const password =
        $("newPassword").value;

    const confirm =
        $("newPasswordConfirm").value;

    if(password.length < 6){

        showError(
            "newPasswordError",
            "Password must contain at least 6 characters."
        );

        return;
    }

    if(password !== confirm){

        showError(
            "newPasswordError",
            "Passwords do not match."
        );

        return;
    }

    showScreen(1);

    $("identityInput").value =
        identifierValue;

    alert("Password updated successfully.");
}


/* =========================================================
   CONNECTION
========================================================= */

function startConnection(){

    showScreen("Connecting");

    $("progressFill").style.width = "0%";

    setTimeout(() => {

        $("progressFill").style.width = "100%";

    },100);

    setTimeout(() => {

        showScreen("Success");

    },3000);
}


function openDashboard(){

    alert(
        "FiberNet Customer Dashboard\n\n" +
        "Connect this button to your Odoo 19 portal route."
    );

}


/* =========================================================
   OTP UTILITIES
========================================================= */

function getOTP(selector){

    let value = "";

    document
        .querySelectorAll(selector + " .otp")
        .forEach(input => {
            value += input.value;
        });

    return value;
}


function clearOTP(selector){

    document
        .querySelectorAll(selector + " .otp")
        .forEach(input => {
            input.value = "";
        });

    document
        .querySelectorAll(selector + " .error")
        .forEach(error => {
            error.classList.remove("show");
        });
}


function startTimer(
    textId,
    buttonId,
    resendFunction
){

    clearInterval(timer);

    timerSeconds = 30;

    $(textId).style.display = "inline";
    $(buttonId).style.display = "none";

    updateTimer(textId);

    timer = setInterval(() => {

        timerSeconds--;

        updateTimer(textId);

        if(timerSeconds <= 0){

            clearInterval(timer);

            $(textId).style.display = "none";
            $(buttonId).style.display = "inline";

        }

    },1000);
}


function updateTimer(id){

    $(id).innerText =
        "Resend OTP in 00:" +
        String(timerSeconds).padStart(2,"0");
}


/* =========================================================
   OTP INPUT BEHAVIOR
========================================================= */

document.addEventListener("input",function(e){

    if(!e.target.classList.contains("otp")){
        return;
    }

    e.target.value =
        e.target.value.replace(/\D/g,"").slice(0,1);

    if(
        e.target.value &&
        e.target.nextElementSibling &&
        e.target.nextElementSibling.classList.contains("otp")
    ){

        e.target.nextElementSibling.focus();

    }

});


document.addEventListener("keydown",function(e){

    if(!e.target.classList.contains("otp")){
        return;
    }

    if(
        e.key === "Backspace" &&
        !e.target.value
    ){

        const previous =
            e.target.previousElementSibling;

        if(
            previous &&
            previous.classList.contains("otp")
        ){

            previous.focus();

        }

    }

});


document.addEventListener("paste",function(e){

    if(!e.target.classList.contains("otp")){
        return;
    }

    e.preventDefault();

    const value =
        (e.clipboardData || window.clipboardData)
        .getData("text")
        .replace(/\D/g,"")
        .slice(0,6);

    const parent =
        e.target.parentElement;

    const inputs =
        parent.querySelectorAll(".otp");

    value.split("").forEach((digit,index) => {

        if(inputs[index]){
            inputs[index].value = digit;
        }

    });

    if(value.length === 6){
        inputs[5].focus();
    }

});


/* =========================================================
   PASSWORD VISIBILITY
========================================================= */

function togglePassword(id,button){

    const input = $(id);

    if(input.type === "password"){

        input.type = "text";

    }else{

        input.type = "password";

    }

}


/* =========================================================
   ERROR
========================================================= */

function showError(id,message){

    const error = $(id);

    error.innerText = message;

    error.classList.add("show");

}


/* =========================================================
   MASK EMAIL / MOBILE
========================================================= */

function mask(value){

    if(!value){
        return "—";
    }

    if(value.includes("@")){

        const parts =
            value.split("@");

        const name =
            parts[0];

        const masked =
            name.length > 2
            ? name.slice(0,2) + "•••"
            : "•••";

        return masked + "@" + parts[1];

    }

    const digits =
        value.replace(/\D/g,"");

    if(digits.length >= 10){

        return "+91 ••••• " +
            digits.slice(-4);

    }

    if(value.length > 4){

        return value.slice(0,2) +
            "•••" +
            value.slice(-2);

    }

    return "••••••";
}


/* =========================================================
   ENTER KEY
========================================================= */

document.addEventListener(
    "keydown",
    function(e){

        if(e.key !== "Enter"){
            return;
        }

        const active =
            document.querySelector(
                ".screen.active"
            );

        if(!active){
            return;
        }

        switch(active.id){

            case "screen1":
                continueIdentity();
                break;

            case "screenLoginPassword":
                loginPassword();
                break;

            case "screenLoginOTP":
                verifyLoginOTP();
                break;

            case "screenSignupDetails":
                verifySignupDetails();
                break;

            case "screenSignupOTP":
                verifySignupOTP();
                break;

            case "screenSignupPassword":
                createPasswordAccount();
                break;

            case "screenForgot":
                sendForgotOTP();
                break;

            case "screenForgotOTP":
                verifyForgotOTP();
                break;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#159ee8">

<title>FiberNet — ISP Customer Portal</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --blue:#159ee8;
    --blue2:#0b78c5;
    --cyan:#42c8ef;
    --green:#3bd59b;
    --green2:#1fb67d;

    --ink:#123449;
    --muted:#7b94a5;

    --border:#dcecf3;
    --soft:#f4fbfe;
    --white:#fff;

    --danger:#ef6b73;

    --shadow:0 35px 90px rgba(22,112,148,.14);
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    scrollbar-width:none;
}

*::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
}

html,
body{
    width:100%;
    min-height:100%;
    overflow:hidden;
}

body{
    font-family:Inter,sans-serif;
    color:var(--ink);
    background:#f6fcff;
}

button,
input{
    font-family:inherit;
}

button{
    cursor:pointer;
}

/* =========================================================
   PAGE
========================================================= */

.page{
    width:100%;
    height:100vh;
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;

    overflow:hidden;
}

.app{
    width:min(1180px,100%);
    height:min(720px,calc(100vh - 60px));

    background:#fff;

    border:1px solid #e2f0f5;
    border-radius:32px;

    overflow:hidden;

    box-shadow:var(--shadow);

    display:grid;
    grid-template-columns:46% 54%;
}

/* =========================================================
   LEFT ISP AREA
========================================================= */

.connection-area{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 20% 25%,
            rgba(66,200,239,.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(59,213,155,.13),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #f3fbff,
            #f8fffc
        );

    padding:45px;
}

.ring{
    position:absolute;
    border:1px solid rgba(21,158,232,.1);
    border-radius:50%;
    pointer-events:none;
}

.r1{
    width:500px;
    height:500px;
    left:-320px;
    top:100px;
}

.r2{
    width:700px;
    height:700px;
    left:-420px;
    top:0;
}

.r3{
    width:900px;
    height:900px;
    left:-520px;
    top:-100px;
}

/* =========================================================
   BRAND
========================================================= */

.brand{
    position:relative;
    z-index:5;

    display:flex;
    align-items:center;
    gap:12px;
}

.logo{
    width:45px;
    height:45px;

    border-radius:14px;

    display:grid;
    place-items:center;

    color:#fff;

    font-size:19px;
    font-weight:800;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

    box-shadow:
        0 12px 25px rgba(21,158,232,.2);
}

.brand-name{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.7px;
}

.brand-name span{
    color:var(--blue);
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.connection-content{
    position:relative;
    z-index:5;

    margin-top:90px;
}

.connection-label{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 13px;

    background:#fff;

    border:1px solid #dceef4;
    border-radius:30px;

    color:var(--green2);

    font-size:10px;
    font-weight:800;
    letter-spacing:.8px;
}

.live{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 0 5px rgba(59,213,155,.13);

    animation:livePulse 1.8s infinite;
}

@keyframes livePulse{
    0%,100%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(.7);
        opacity:.6;
    }
}

.connection-content h1{
    margin-top:20px;

    font-size:43px;
    line-height:1.08;

    letter-spacing:-2px;
}

.connection-content h1 span{
    color:var(--blue);
}

.connection-content p{
    margin-top:18px;

    max-width:390px;

    color:var(--muted);

    font-size:13px;
    line-height:1.8;
}

/* =========================================================
   NETWORK
========================================================= */

.network-machine{
    position:relative;

    height:225px;

    margin-top:15px;
}

.router{
    position:absolute;

    width:108px;
    height:108px;

    left:50%;
    top:48%;

    transform:translate(-50%,-50%);

    border-radius:28px;

    background:#fff;

    border:1px solid #cdebf4;

    box-shadow:
        0 0 0 10px rgba(255,255,255,.7),
        0 20px 40px rgba(29,129,163,.15);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:5;
}

.router-body{
    width:55px;
    height:40px;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    position:relative;

    box-shadow:
        0 10px 20px rgba(21,158,232,.25);
}

.router-body:before{
    content:"";

    position:absolute;

    left:12px;
    right:12px;
    bottom:8px;

    height:4px;

    border-radius:5px;

    background:rgba(255,255,255,.8);
}

.router-body:after{
    content:"";

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    top:8px;
    right:10px;

    background:var(--green);
}

.router-antenna{
    position:absolute;

    width:2px;
    height:27px;

    background:#74b8d1;

    top:-24px;
}

.a1{
    left:32px;
    transform:rotate(-15deg);
}

.a2{
    right:32px;
    transform:rotate(15deg);
}

.net-node{
    position:absolute;

    width:43px;
    height:43px;

    border-radius:50%;

    background:#fff;

    border:1px solid #d3ebf2;

    box-shadow:
        0 10px 25px rgba(33,124,154,.1);

    display:grid;
    place-items:center;

    z-index:4;
}

.net-node:after{
    content:"";

    width:11px;
    height:11px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 0 5px rgba(59,213,155,.1);
}

.node1{
    left:4%;
    top:45px;
}

.node2{
    right:4%;
    top:30px;
}

.node3{
    left:18%;
    bottom:15px;
}

.node4{
    right:17%;
    bottom:5px;
}

.fiber{
    position:absolute;

    height:2px;

    transform-origin:left center;

    background:
        linear-gradient(
            90deg,
            rgba(21,158,232,.08),
            var(--blue),
            rgba(59,213,155,.15)
        );

    z-index:2;
}

.f1{
    width:250px;
    left:9%;
    top:100px;
    transform:rotate(8deg);
}

.f2{
    width:250px;
    left:51%;
    top:90px;
    transform:rotate(-13deg);
}

.f3{
    width:230px;
    left:19%;
    top:145px;
    transform:rotate(24deg);
}

.f4{
    width:220px;
    left:52%;
    top:145px;
    transform:rotate(26deg);
}

.packet{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 0 5px rgba(59,213,155,.1);

    z-index:6;

    animation:packetMove 3s linear infinite;
}

.p1{
    top:97px;
    left:14%;
}

.p2{
    top:91px;
    left:63%;
    animation-delay:1s;
}

.p3{
    top:148px;
    left:29%;
    animation-delay:1.7s;
}

@keyframes packetMove{
    0%{
        opacity:0;
        transform:scale(.5);
    }

    20%{
        opacity:1;
    }

    70%{
        opacity:1;
        transform:scale(1.2);
    }

    100%{
        opacity:0;
        transform:scale(.5);
    }
}

/* =========================================================
   STATUS
========================================================= */

.network-status{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:14px 16px;

    border-radius:16px;

    background:rgba(255,255,255,.82);

    border:1px solid #dceef3;
}

.status-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.status-icon{
    width:33px;
    height:33px;

    border-radius:10px;

    background:#edfff7;

    display:grid;
    place-items:center;

    color:var(--green2);

    font-size:13px;
}

.status-title{
    font-size:11px;
    font-weight:800;
}

.status-sub{
    margin-top:3px;

    font-size:9px;

    color:var(--muted);
}

.status-right{
    font-size:10px;
    font-weight:800;
    color:var(--green2);
}

/* =========================================================
   AUTH AREA
========================================================= */

.auth-area{
    position:relative;

    padding:45px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;

    overflow:hidden;
}

.auth{
    width:100%;
    max-width:420px;
    max-height:100%;
}

/* =========================================================
   PROGRESS
========================================================= */

.progress{
    display:flex;
    align-items:center;

    margin-bottom:30px;
}

.progress-item{
    display:flex;
    align-items:center;
    flex:1;
}

.progress-item:last-child{
    flex:0;
}

.progress-circle{
    width:30px;
    height:30px;

    min-width:30px;

    border-radius:50%;

    display:grid;
    place-items:center;

    background:#f1f7fa;

    border:1px solid #dcecf2;

    color:#94a9b6;

    font-size:10px;
    font-weight:800;

    transition:.4s;
}

.progress-line{
    width:100%;
    height:2px;

    background:#e6f0f4;

    margin:0 7px;

    transition:.5s;
}

.progress-item.active .progress-circle{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;

    box-shadow:
        0 0 0 5px rgba(21,158,232,.08);
}

.progress-item.done .progress-circle{
    background:var(--green);
    border-color:var(--green);
    color:#fff;
}

.progress-item.done .progress-line{
    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );
}

/* =========================================================
   SCREENS
========================================================= */

.screen{
    display:none;

    animation:
        screenIn .4s ease;
}

.screen.active{
    display:block;
}

@keyframes screenIn{
    from{
        opacity:0;
        transform:translateX(15px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

.kicker{
    color:var(--blue);

    font-size:10px;
    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;
}

.auth h2{
    margin-top:9px;

    font-size:31px;

    letter-spacing:-1.4px;
}

.auth-description{
    margin-top:9px;

    color:var(--muted);

    font-size:12px;
    line-height:1.7;
}

/* =========================================================
   INPUTS
========================================================= */

.field{
    margin-top:18px;
}

.field label{
    display:block;

    margin-bottom:8px;

    font-size:10px;

    color:#527083;

    font-weight:800;

    letter-spacing:.3px;
}

.input{
    width:100%;
    height:53px;

    border:1px solid var(--border);

    border-radius:14px;

    outline:none;

    background:#fbfdfe;

    padding:0 17px;

    color:var(--ink);

    font-size:13px;

    transition:.25s;
}

.input:focus{
    background:#fff;

    border-color:#7dccec;

    box-shadow:
        0 0 0 4px rgba(21,158,232,.07);
}

/* =========================================================
   CUSTOMER TYPE / METHODS
========================================================= */

.customer-type,
.method-buttons{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:20px;
}

.customer-type button,
.method{
    min-height:65px;

    border:1px solid var(--border);

    background:#fbfdfe;

    border-radius:13px;

    font-size:10px;

    font-weight:700;

    color:var(--muted);

    transition:.2s;
}

.customer-type button:hover,
.method:hover{
    border-color:#91d4ee;
    transform:translateY(-1px);
}

.customer-type button.selected,
.method.selected{
    background:#effaff;

    border-color:#91d4ee;

    color:var(--blue2);
}

/* =========================================================
   BUTTONS
========================================================= */

.primary{
    width:100%;
    min-height:54px;

    margin-top:18px;

    border:0;

    border-radius:15px;

    color:#fff;

    background:
        linear-gradient(
            100deg,
            var(--blue),
            #27b8dd,
            var(--green)
        );

    font-size:11px;

    font-weight:800;

    letter-spacing:.3px;

    box-shadow:
        0 14px 28px rgba(24,164,207,.2);

    transition:.25s;
}

.primary:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 35px rgba(24,164,207,.25);
}

.secondary{
    width:100%;
    height:48px;

    margin-top:10px;

    border:1px solid var(--border);

    border-radius:13px;

    color:var(--blue2);

    background:#fff;

    font-size:10px;
    font-weight:800;
}

.link-row{
    display:flex;

    justify-content:center;
    align-items:center;

    gap:5px;

    margin-top:17px;

    font-size:10px;

    color:var(--muted);
}

.link{
    border:0;

    background:none;

    color:var(--blue2);

    font-size:10px;

    font-weight:800;
}

.security{
    display:flex;

    justify-content:center;
    align-items:center;

    gap:6px;

    margin-top:20px;

    color:#9aadb7;

    font-size:9px;
}

.lock{
    width:15px;
    height:15px;

    border-radius:5px;

    display:grid;
    place-items:center;

    color:var(--green2);

    background:#edfff7;
}

/* =========================================================
   METHOD CARDS
========================================================= */

.method{
    min-height:90px;

    text-align:left;

    padding:14px;
}

.method strong{
    display:block;

    font-size:11px;

    color:var(--ink);
}

.method span{
    display:block;

    margin-top:7px;

    font-size:9px;

    line-height:1.5;

    color:var(--muted);
}

/* =========================================================
   CONNECTING
========================================================= */

.connect-screen,
.success-screen{
    text-align:center;
}

.connect-screen{
    padding-top:15px;
}

.connect-icon{
    width:100px;
    height:100px;

    margin:0 auto 27px;

    border-radius:50%;

    display:grid;
    place-items:center;

    position:relative;

    background:#f0fbff;

    border:1px solid #c8eaf5;
}

.connect-icon:before,
.connect-icon:after{
    content:"";

    position:absolute;

    border:1px solid rgba(21,158,232,.25);

    border-radius:50%;

    animation:ripple 2s infinite;
}

.connect-icon:before{
    inset:-12px;
}

.connect-icon:after{
    inset:-24px;

    animation-delay:.5s;
}

@keyframes ripple{
    0%{
        opacity:1;
        transform:scale(.85);
    }

    100%{
        opacity:0;
        transform:scale(1.2);
    }
}

.connect-router{
    width:42px;
    height:30px;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    position:relative;
}

.connect-router:after{
    content:"";

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    top:7px;
    right:7px;
}

.loading-line{
    width:100%;
    height:5px;

    background:#edf5f8;

    border-radius:10px;

    overflow:hidden;

    margin-top:25px;
}

.loading-progress{
    height:100%;

    width:0;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );

    border-radius:10px;

    transition:
        width 2.8s linear;
}

/* =========================================================
   SUCCESS
========================================================= */

.success-circle{
    width:95px;
    height:95px;

    margin:0 auto 25px;

    border-radius:50%;

    display:grid;
    place-items:center;

    background:#edfff7;

    border:1px solid #bdeedb;

    color:var(--green2);

    font-size:37px;

    animation:
        successPop .6s ease;
}

@keyframes successPop{
    0%{
        transform:scale(.5);
        opacity:0;
    }

    70%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

.connection-card{
    margin-top:22px;

    padding:16px;

    border-radius:15px;

    background:#f7fcfe;

    border:1px solid #e2eff4;

    text-align:left;
}

.connection-row{
    display:flex;

    justify-content:space-between;

    padding:7px 0;

    font-size:10px;
}

.connection-row span{
    color:var(--muted);
}

.connection-row strong{
    color:var(--ink);
}

/* =========================================================
   MODAL
========================================================= */

.modal-overlay{
    position:fixed;

    inset:0;

    z-index:1000;

    display:none;

    align-items:center;
    justify-content:center;

    padding:20px;

    background:
        rgba(12,48,67,.38);

    backdrop-filter:blur(8px);

    overflow:hidden;
}

.modal-overlay.active{
    display:flex;
}

.modal{
    width:min(430px,100%);

    max-height:calc(100vh - 40px);

    overflow-y:auto;
    overflow-x:hidden;

    background:#fff;

    border:1px solid #dcecf3;

    border-radius:25px;

    padding:30px;

    box-shadow:
        0 35px 90px rgba(10,72,96,.25);

    animation:
        modalIn .35s cubic-bezier(.2,.8,.2,1);

    position:relative;
}

@keyframes modalIn{
    from{
        opacity:0;

        transform:
            translateY(25px)
            scale(.94);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}

.modal-close{
    position:absolute;

    right:17px;
    top:17px;

    width:34px;
    height:34px;

    border-radius:10px;

    border:1px solid var(--border);

    background:#f7fbfd;

    color:var(--muted);

    font-size:17px;
}

.modal-close:hover{
    background:#effaff;
    color:var(--blue2);
}

.modal-icon{
    width:54px;
    height:54px;

    border-radius:16px;

    display:grid;
    place-items:center;

    background:#eaf8fe;

    color:var(--blue2);

    font-size:22px;

    margin-bottom:18px;
}

.modal h3{
    font-size:24px;

    letter-spacing:-1px;
}

.modal p{
    margin-top:8px;

    color:var(--muted);

    font-size:11px;

    line-height:1.7;
}

.modal-step{
    margin-top:10px;

    font-size:9px;

    color:var(--blue2);

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;
}

/* =========================================================
   PASSWORD
========================================================= */

.password-wrap{
    position:relative;
}

.password-wrap .input{
    padding-right:50px;
}

.eye{
    position:absolute;

    right:10px;
    top:9px;

    width:35px;
    height:35px;

    border:0;

    background:transparent;

    color:var(--muted);
}

.modal-options{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:10px;

    margin-top:12px;
}

.remember{
    display:flex;

    align-items:center;

    gap:6px;

    color:var(--muted);

    font-size:9px;
}

.remember input{
    accent-color:var(--blue);
}

/* =========================================================
   OTP
========================================================= */

.otp-inputs{
    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:7px;

    margin-top:22px;
}

.otp{
    width:100%;
    height:52px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fbfdfe;

    outline:none;

    text-align:center;

    font-size:17px;

    font-weight:800;

    color:var(--blue2);
}

.otp:focus{
    border-color:#76caea;

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(21,158,232,.07);
}

.otp-info{
    margin-top:15px;

    padding:11px;

    border-radius:12px;

    background:#f4fbfe;

    border:1px solid #e0f0f5;

    text-align:center;

    font-size:9px;

    color:var(--muted);
}

.otp-info strong{
    color:var(--ink);
}

.resend{
    text-align:center;

    margin-top:13px;

    font-size:9px;

    color:var(--muted);
}

.resend button{
    border:0;

    background:none;

    color:var(--blue2);

    font-weight:800;
}

/* =========================================================
   ERRORS
========================================================= */

.modal-error{
    display:none;

    margin-top:13px;

    padding:10px;

    border-radius:10px;

    background:#fff3f3;

    border:1px solid #ffd5d5;

    color:var(--danger);

    font-size:9px;
}

.modal-error.show{
    display:block;
}

.modal-success{
    display:none;

    margin-top:15px;

    padding:12px;

    border-radius:12px;

    background:#edfff7;

    border:1px solid #c9f1df;

    color:var(--green2);

    font-size:10px;

    font-weight:700;

    text-align:center;
}

.modal-success.show{
    display:block;
}

.terms{
    display:flex;

    gap:8px;

    margin-top:15px;

    color:var(--muted);

    font-size:9px;

    line-height:1.5;
}

.terms input{
    margin-top:2px;

    accent-color:var(--blue);
}

/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    left:50%;
    bottom:25px;

    transform:
        translate(-50%,20px);

    z-index:2000;

    padding:13px 18px;

    border-radius:13px;

    background:#123449;

    color:#fff;

    font-size:10px;

    font-weight:700;

    opacity:0;

    pointer-events:none;

    transition:.3s;
}

.toast.show{
    opacity:1;

    transform:
        translate(-50%,0);
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

    .page{
        padding:20px;
    }

    .app{
        height:calc(100vh - 40px);

        grid-template-columns:44% 56%;

        border-radius:27px;
    }

    .connection-area{
        padding:32px;
    }

    .auth-area{
        padding:32px;
    }

    .connection-content{
        margin-top:70px;
    }

    .connection-content h1{
        font-size:36px;
    }

    .network-machine{
        transform:scale(.9);

        transform-origin:left center;

        width:111%;
    }
}

/* =========================================================
   MOBILE / TABLET PORTRAIT
========================================================= */

@media(max-width:900px){

    html,
    body{
        height:100%;
        overflow:hidden;
    }

    .page{
        height:100vh;
        min-height:100vh;

        padding:12px;

        align-items:stretch;

        overflow:hidden;
    }

    .app{
        width:100%;
        height:calc(100vh - 24px);

        min-height:0;

        grid-template-columns:1fr;

        grid-template-rows:
            minmax(330px,43%)
            1fr;

        border-radius:25px;
    }

    .connection-area{
        min-height:0;

        padding:27px 32px;

        overflow:hidden;
    }

    .connection-content{
        margin-top:40px;
    }

    .connection-content h1{
        font-size:34px;
    }

    .connection-content p{
        max-width:500px;
    }

    .network-machine{
        height:150px;

        margin-top:5px;

        transform:scale(.72);

        transform-origin:left top;

        width:138%;
    }

    .network-status{
        margin-top:-55px;
    }

    .auth-area{
        padding:30px 32px 35px;

        overflow:hidden;

        align-items:center;
    }

    .auth{
        max-height:100%;
    }

    .progress{
        margin-bottom:20px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:600px){

    body{
        background:#fff;
    }

    .page{
        padding:0;

        height:100dvh;
        min-height:100dvh;
    }

    .app{
        width:100%;

        height:100dvh;
        min-height:100dvh;

        border:0;

        border-radius:0;

        box-shadow:none;

        grid-template-rows:
            38% 62%;
    }

    .connection-area{
        padding:20px;

        min-height:0;
    }

    .brand{
        gap:9px;
    }

    .logo{
        width:38px;
        height:38px;

        border-radius:12px;

        font-size:16px;
    }

    .brand-name{
        font-size:17px;
    }

    .connection-content{
        margin-top:28px;
    }

    .connection-label{
        font-size:8px;

        padding:7px 10px;
    }

    .connection-content h1{
        margin-top:12px;

        font-size:27px;

        letter-spacing:-1.2px;
    }

    .connection-content p{
        margin-top:10px;

        font-size:10px;

        line-height:1.5;

        max-width:330px;
    }

    .network-machine{
        height:105px;

        margin-top:0;

        transform:scale(.55);

        transform-origin:left top;

        width:182%;
    }

    .network-status{
        margin-top:-75px;

        padding:9px 11px;

        border-radius:12px;
    }

    .status-icon{
        width:27px;
        height:27px;

        border-radius:8px;
    }

    .status-title{
        font-size:9px;
    }

    .status-sub{
        font-size:7px;
    }

    .status-right{
        font-size:8px;
    }

    .auth-area{
        padding:20px 20px 25px;

        align-items:flex-start;

        overflow:hidden;
    }

    .auth{
        max-width:100%;
    }

    .progress{
        margin-bottom:18px;
    }

    .progress-circle{
        width:26px;
        height:26px;
        min-width:26px;

        font-size:8px;
    }

    .progress-line{
        margin:0 4px;
    }

    .kicker{
        font-size:8px;

        letter-spacing:1px;
    }

    .auth h2{
        font-size:25px;

        letter-spacing:-1px;
    }

    .auth-description{
        font-size:10px;

        line-height:1.55;
    }

    .customer-type,
    .method-buttons{
        margin-top:14px;
    }

    .customer-type button{
        min-height:48px;

        font-size:9px;
    }

    .field{
        margin-top:13px;
    }

    .field label{
        font-size:8px;

        margin-bottom:6px;
    }

    .input{
        height:47px;

        border-radius:12px;

        font-size:11px;

        padding:0 13px;
    }

    .primary{
        min-height:48px;

        margin-top:14px;

        border-radius:12px;

        font-size:9px;
    }

    .link-row{
        margin-top:11px;

        font-size:8px;
    }

    .link{
        font-size:8px;
    }

    .security{
        margin-top:12px;

        font-size:7px;
    }

    /* Modal */

    .modal-overlay{
        padding:10px;
    }

    .modal{
        width:100%;

        max-height:
            calc(100dvh - 20px);

        border-radius:20px;

        padding:22px 18px;
    }

    .modal-close{
        width:31px;
        height:31px;

        right:12px;
        top:12px;
    }

    .modal-icon{
        width:47px;
        height:47px;

        border-radius:13px;

        font-size:19px;

        margin-bottom:13px;
    }

    .modal h3{
        font-size:21px;
    }

    .modal p{
        font-size:9px;
    }

    .modal-step{
        font-size:8px;
    }

    .method{
        min-height:75px;

        padding:10px;
    }

    .method strong{
        font-size:9px;
    }

    .method span{
        margin-top:5px;

        font-size:7px;
    }

    .otp-inputs{
        gap:4px;

        margin-top:16px;
    }

    .otp{
        height:44px;

        border-radius:9px;

        font-size:15px;
    }

    .otp-info{
        margin-top:11px;

        padding:9px;

        font-size:8px;
    }

    .terms{
        font-size:8px;
    }

    .remember{
        font-size:8px;
    }

    .modal-options{
        gap:5px;
    }

    .modal-options .link{
        font-size:8px;
    }

    .toast{
        bottom:15px;

        width:calc(100% - 30px);

        text-align:center;
    }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:380px){

    .app{
        grid-template-rows:
            36% 64%;
    }

    .connection-content h1{
        font-size:24px;
    }

    .connection-content p{
        font-size:9px;
    }

    .network-machine{
        transform:scale(.46);

        width:210%;
    }

    .network-status{
        margin-top:-82px;
    }

    .auth-area{
        padding:16px;
    }

    .auth h2{
        font-size:22px;
    }

    .auth-description{
        font-size:9px;
    }

    .progress{
        margin-bottom:13px;
    }

    .customer-type button{
        min-height:43px;
    }

    .input{
        height:44px;
    }

    .primary{
        min-height:45px;
    }
}

/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media(max-height:600px) and (orientation:landscape){

    .page{
        padding:8px;
    }

    .app{
        height:calc(100vh - 16px);

        grid-template-columns:
            42% 58%;

        grid-template-rows:1fr;
    }

    .connection-area{
        padding:18px;
    }

    .connection-content{
        margin-top:20px;
    }

    .connection-content h1{
        font-size:25px;
    }

    .connection-content p{
        font-size:9px;

        margin-top:8px;
    }

    .network-machine{
        height:100px;

        transform:scale(.55);

        width:180%;
    }

    .network-status{
        margin-top:-65px;
    }

    .auth-area{
        padding:18px 25px;

        align-items:center;
    }

    .progress{
        margin-bottom:12px;
    }

    .auth h2{
        font-size:23px;
    }

    .field{
        margin-top:9px;
    }

    .input{
        height:40px;
    }

    .primary{
        min-height:40px;

        margin-top:10px;
    }

    .link-row{
        margin-top:8px;
    }
}
</style>
</head>

<body>

<div class="page">

<div class="app">

<!-- =========================================================
     ISP CONNECTION SIDE
========================================================= -->

<section class="connection-area">

    <div class="ring r1"></div>
    <div class="ring r2"></div>
    <div class="ring r3"></div>

    <div class="brand">

        <div class="logo">
            F
        </div>

        <div class="brand-name">
            Fiber<span>Net</span>
        </div>

    </div>

    <div class="connection-content">

        <div class="connection-label">

            <span class="live"></span>

            ISP NETWORK ONLINE

        </div>

        <h1>
            Your internet.<br>
            <span>Your control.</span>
        </h1>

        <p>
            Securely access your FiberNet customer portal,
            manage your broadband connection, pay bills,
            upgrade plans and stay connected.
        </p>

        <div class="network-machine">

            <div class="fiber f1"></div>
            <div class="fiber f2"></div>
            <div class="fiber f3"></div>
            <div class="fiber f4"></div>

            <div class="packet p1"></div>
            <div class="packet p2"></div>
            <div class="packet p3"></div>

            <div class="net-node node1"></div>
            <div class="net-node node2"></div>
            <div class="net-node node3"></div>
            <div class="net-node node4"></div>

            <div class="router">

                <div class="router-antenna a1"></div>
                <div class="router-antenna a2"></div>

                <div class="router-body"></div>

            </div>

        </div>

        <div class="network-status">

            <div class="status-left">

                <div class="status-icon">
                    ✓
                </div>

                <div>

                    <div class="status-title">
                        Fiber Network
                    </div>

                    <div class="status-sub">
                        Broadband services operational
                    </div>

                </div>

            </div>

            <div class="status-right">
                ● STABLE
            </div>

        </div>

    </div>

</section>


<!-- =========================================================
     AUTH
========================================================= -->

<section class="auth-area">

<div class="auth">

<!-- PROGRESS -->

<div class="progress">

    <div class="progress-item active" id="step1">

        <div class="progress-circle">
            1
        </div>

        <div class="progress-line"></div>

    </div>

    <div class="progress-item" id="step2">

        <div class="progress-circle">
            2
        </div>

        <div class="progress-line"></div>

    </div>

    <div class="progress-item" id="step3">

        <div class="progress-circle">
            3
        </div>

        <div class="progress-line"></div>

    </div>

    <div class="progress-item" id="step4">

        <div class="progress-circle">
            4
        </div>

    </div>

</div>


<!-- =========================================================
     SCREEN 1
========================================================= -->

<div class="screen active" id="screen1">

    <div class="kicker">
        ISP CUSTOMER PORTAL
    </div>

    <h2>
        Welcome to FiberNet
    </h2>

    <p class="auth-description">
        Access your broadband account using your
        registered email, mobile number or customer ID.
    </p>

    <div class="customer-type">

        <button
            class="selected"
            data-type="mobile"
            onclick="selectIdentifier(this)">
            Mobile Number
        </button>

        <button
            data-type="email"
            onclick="selectIdentifier(this)">
            Email Address
        </button>

    </div>

    <div class="field">

        <label id="identifierLabel">
            REGISTERED MOBILE NUMBER
        </label>

        <input
            class="input"
            id="customerInput"
            type="tel"
            placeholder="+91 98765 43210"
            autocomplete="tel">

    </div>

    <button
        class="primary"
        onclick="findCustomer()">
        CONTINUE →
    </button>

    <div class="link-row">

        <span>
            New FiberNet customer?
        </span>

        <button
            class="link"
            onclick="openSignup()">
            Create Account
        </button>

    </div>

    <div class="link-row">

        <button
            class="link"
            onclick="openForgot()">
            Forgot Password?
        </button>

    </div>

    <div class="security">

        <span class="lock">
            ✓
        </span>

        Secure ISP customer authentication

    </div>

</div>


<!-- =========================================================
     SCREEN 2
========================================================= -->

<div class="screen" id="screen2">

    <div class="kicker">
        CUSTOMER VERIFIED
    </div>

    <h2>
        Choose your login
    </h2>

    <p class="auth-description">
        Your FiberNet account was found.
        Select how you want to authenticate.
    </p>

    <div class="method-buttons">

        <button
            class="method"
            onclick="openLoginOTP()">

            <strong>
                📱 Login with OTP
            </strong>

            <span>
                Receive a secure one-time
                verification code.
            </span>

        </button>

        <button
            class="method"
            onclick="openLoginPassword()">

            <strong>
                🔐 Login with Password
            </strong>

            <span>
                Use your existing FiberNet
                account password.
            </span>

        </button>

    </div>

    <button
        class="primary"
        onclick="openLoginOTP()">
        CONTINUE WITH OTP →
    </button>

    <div class="link-row">

        <button
            class="link"
            onclick="openForgot()">
            Forgot your password?
        </button>

    </div>

    <div class="security">

        <span class="lock">
            ✓
        </span>

        Protected ISP authentication

    </div>

</div>


<!-- =========================================================
     SCREEN 3
========================================================= -->

<div class="screen" id="screen3">

    <div class="connect-screen">

        <div class="connect-icon">

            <div class="connect-router"></div>

        </div>

        <div class="kicker">
            AUTHENTICATED
        </div>

        <h2>
            Connecting your account
        </h2>

        <p class="auth-description">
            We're securely preparing your
            FiberNet customer dashboard.
        </p>

        <div class="loading-line">

            <div
                class="loading-progress"
                id="loadingProgress">
            </div>

        </div>

    </div>

</div>


<!-- =========================================================
     SCREEN 4
========================================================= -->

<div class="screen" id="screen4">

    <div class="success-screen">

        <div class="success-circle">
            ✓
        </div>

        <div class="kicker">
            CONNECTION VERIFIED
        </div>

        <h2>
            You're connected!
        </h2>

        <p class="auth-description">
            Your FiberNet customer account has
            been successfully authenticated.
        </p>

        <div class="connection-card">

            <div class="connection-row">

                <span>
                    Customer
                </span>

                <strong id="successCustomer">
                    FiberNet Customer
                </strong>

            </div>

            <div class="connection-row">

                <span>
                    Connection
                </span>

                <strong>
                    Fiber Broadband
                </strong>

            </div>

            <div class="connection-row">

                <span>
                    Service
                </span>

                <strong style="color:#20b87b">
                    ● Active
                </strong>

            </div>

            <div class="connection-row">

                <span>
                    Authentication
                </span>

                <strong>
                    Verified
                </strong>

            </div>

        </div>

        <button
            class="primary"
            onclick="openDashboard()">
            ENTER CUSTOMER DASHBOARD →
        </button>

        <div class="security">

            <span class="lock">
                ✓
            </span>

            Secure ISP session established

        </div>

    </div>

</div>

</div>

</section>

</div>

</div>


<!-- =========================================================
     MODAL
========================================================= -->

<div
    class="modal-overlay"
    id="modalOverlay"
    onclick="overlayClose(event)">

    <div class="modal">

        <button
            class="modal-close"
            onclick="closeModal()">
            ×
        </button>


        <!-- =================================================
             LOGIN PASSWORD
        ================================================= -->

        <div
            id="loginPasswordModal"
            class="modal-content"
            style="display:none">

            <div class="modal-icon">
                🔐
            </div>

            <div class="modal-step">
                LOGIN • PASSWORD
            </div>

            <h3>
                Sign in securely
            </h3>

            <p>
                Enter your FiberNet account password
                to access your internet dashboard.
            </p>

            <div class="field">

                <label>
                    EMAIL / MOBILE
                </label>

                <input
                    class="input"
                    id="loginPasswordIdentity"
                    readonly>

            </div>

            <div class="field">

                <label>
                    ACCOUNT PASSWORD
                </label>

                <div class="password-wrap">

                    <input
                        class="input"
                        id="loginPassword"
                        type="password"
                        placeholder="Enter your password">

                    <button
                        class="eye"
                        onclick="togglePassword('loginPassword',this)">
                        ◉
                    </button>

                </div>

            </div>

            <div class="modal-options">

                <label class="remember">

                    <input type="checkbox">

                    Remember this device

                </label>

                <button
                    class="link"
                    onclick="closeModal();openForgot()">
                    Forgot password?
                </button>

            </div>

            <div
                class="modal-error"
                id="loginPasswordError">
            </div>

            <button
                class="primary"
                onclick="submitPasswordLogin()">
                LOGIN TO FIBERNET →
            </button>

        </div>


        <!-- =================================================
             OTP
        ================================================= -->

        <div
            id="otpModal"
            class="modal-content"
            style="display:none">

            <div class="modal-icon">
                📱
            </div>

            <div
                class="modal-step"
                id="otpStep">
                VERIFICATION
            </div>

            <h3 id="otpTitle">
                Verify your account
            </h3>

            <p id="otpDescription">
                Enter the 6-digit OTP sent to
                your registered contact.
            </p>

            <div class="otp-info">

                Code sent to

                <strong id="otpDestination">
                    +91 ••••• 43210
                </strong>

            </div>

            <div class="otp-inputs">

                <input
                    class="otp"
                    inputmode="numeric"
                    maxlength="1">

                <input
                    class="otp"
                    inputmode="numeric"
                    maxlength="1">

                <input
                    class="otp"
                    inputmode="numeric"
                    maxlength="1">

                <input
                    class="otp"
                    inputmode="numeric"
                    maxlength="1">

                <input
                    class="otp"
                    inputmode="numeric"
                    maxlength="1">

                <input
                    class="otp"
                    inputmode="numeric"
                    maxlength="1">

            </div>

            <div
                class="modal-error"
                id="otpError">
            </div>

            <div
                class="modal-success"
                id="otpSuccess">
                ✓ Verification successful
            </div>

            <button
                class="primary"
                onclick="verifyOTP()">
                VERIFY OTP →
            </button>

            <div class="resend">

                <span id="resendText">
                    Resend OTP in 00:30
                </span>

                <button
                    id="resendButton"
                    style="display:none"
                    onclick="resendOTP()">
                    Resend OTP
                </button>

            </div>

            <div class="link-row">

                <button
                    class="link"
                    onclick="changeIdentifier()">
                    Change Email / Mobile Number
                </button>

            </div>

        </div>


        <!-- =================================================
             SIGNUP METHOD
        ================================================= -->

        <div
            id="signupMethodModal"
            class="modal-content"
            style="display:none">

            <div class="modal-icon">
                ✨
            </div>

            <div class="modal-step">
                NEW CUSTOMER
            </div>

            <h3>
                Create your account
            </h3>

            <p>
                Choose how you want to create
                your FiberNet account.
            </p>

            <div class="method-buttons">

                <button
                    class="method"
                    onclick="openSignupPassword()">

                    <strong>
                        🔐 Signup with Password
                    </strong>

                    <span>
                        Create an account using your
                        email or mobile and password.
                    </span>

                </button>

                <button
                    class="method"
                    onclick="openSignupOTP()">

                    <strong>
                        📱 Signup with OTP
                    </strong>

                    <span>
                        Create your account using
                        one-time verification.
                    </span>

                </button>

            </div>

        </div>


        <!-- =================================================
             SIGNUP PASSWORD
        ================================================= -->

        <div
            id="signupPasswordModal"
            class="modal-content"
            style="display:none">

            <div class="modal-icon">
                👤
            </div>

            <div class="modal-step">
                SIGNUP • DETAILS
            </div>

            <h3>
                Create your FiberNet account
            </h3>

            <p>
                Enter your details and create a secure
                password. Your email/mobile will be
                verified before account creation.
            </p>

            <div class="field">

                <label>
                    FULL NAME
                </label>

                <input
                    class="input"
                    id="signupName"
                    placeholder="Enter your full name">

            </div>

            <div class="field">

                <label>
                    EMAIL OR MOBILE NUMBER
                </label>

                <input
                    class="input"
                    id="signupIdentity"
                    placeholder="Email or mobile number">

            </div>

            <div class="field">

                <label>
                    CREATE PASSWORD
                </label>

                <div class="password-wrap">

                    <input
                        class="input"
                        id="signupPassword"
                        type="password"
                        placeholder="Create password">

                    <button
                        class="eye"
                        onclick="togglePassword('signupPassword',this)">
                        ◉
                    </button>

                </div>

            </div>

            <div class="field">

                <label>
                    CONFIRM PASSWORD
                </label>

                <div class="password-wrap">

                    <input
                        class="input"
                        id="signupConfirm"
                        type="password"
                        placeholder="Confirm password">

                    <button
                        class="eye"
                        onclick="togglePassword('signupConfirm',this)">
                        ◉
                    </button>

                </div>

            </div>

            <label class="terms">

                <input
                    type="checkbox"
                    id="terms">

                <span>
                    I agree to the FiberNet Terms &
                    Conditions and Privacy Policy.
                </span>

            </label>

            <div
                class="modal-error"
                id="signupPasswordError">
            </div>

            <button
                class="primary"
                onclick="submitSignupPassword()">
                VERIFY DETAILS & SEND OTP →
            </button>

        </div>


        <!-- =================================================
             SIGNUP OTP
        ================================================= -->

        <div
            id="signupOTPModal"
            class="modal-content"
            style="display:none">

            <div class="modal-icon">
                📲
            </div>

            <div class="modal-step">
                SIGNUP • DETAILS
            </div>

            <h3>
                Create account with OTP
            </h3>

            <p>
                Enter your name and email or mobile
                number to receive a verification code.
            </p>

            <div class="field">

                <label>
                    FULL NAME
                </label>

                <input
                    class="input"
                    id="signupOTPName"
                    placeholder="Enter your full name">

            </div>

            <div class="field">

                <label>
                    EMAIL OR MOBILE NUMBER
                </label>

                <input
                    class="input"
                    id="signupOTPIdentity"
                    placeholder="Email or mobile number">

            </div>

            <div
                class="modal-error"
                id="signupOTPError">
            </div>

            <button
                class="primary"
                onclick="submitSignupOTP()">
                VERIFY DETAILS & SEND OTP →
            </button>

        </div>


        <!-- =================================================
             FORGOT PASSWORD
        ================================================= -->

        <div
            id="forgotModal"
            class="modal-content"
            style="display:none">

            <div class="modal-icon">
                🔑
            </div>

            <div class="modal-step">
                ACCOUNT RECOVERY
            </div>

            <h3>
                Reset your password
            </h3>

            <p>
                Enter your registered email or mobile
                number. We'll send you an OTP.
            </p>

            <div class="field">

                <label>
                    EMAIL OR MOBILE NUMBER
                </label>

                <input
                    class="input"
                    id="forgotIdentity"
                    placeholder="Email or mobile number">

            </div>

            <div
                class="modal-error"
                id="forgotError">
            </div>

            <button
                class="primary"
                onclick="submitForgot()">
                SEND RECOVERY OTP →
            </button>

        </div>


        <!-- =================================================
             NEW PASSWORD
        ================================================= -->

        <div
            id="newPasswordModal"
            class="modal-content"
            style="display:none">

            <div class="modal-icon">
                🔒
            </div>

            <div class="modal-step">
                RECOVERY • STEP 2 OF 2
            </div>

            <h3>
                Create a new password
            </h3>

            <p>
                Your account has been verified.
                Choose a new secure password.
            </p>

            <div class="field">

                <label>
                    NEW PASSWORD
                </label>

                <div class="password-wrap">

                    <input
                        class="input"
                        id="newPassword"
                        type="password"
                        placeholder="New password">

                    <button
                        class="eye"
                        onclick="togglePassword('newPassword',this)">
                        ◉
                    </button>

                </div>

            </div>

            <div class="field">

                <label>
                    CONFIRM NEW PASSWORD
                </label>

                <div class="password-wrap">

                    <input
                        class="input"
                        id="newPasswordConfirm"
                        type="password"
                        placeholder="Confirm new password">

                    <button
                        class="eye"
                        onclick="togglePassword('newPasswordConfirm',this)">
                        ◉
                    </button>

                </div>

            </div>

            <div
                class="modal-error"
                id="newPasswordError">
            </div>

            <div
                class="modal-success"
                id="newPasswordSuccess">
                ✓ Password changed successfully.
            </div>

            <button
                class="primary"
                id="resetPasswordButton"
                onclick="resetPassword()">
                RESET PASSWORD →
            </button>

        </div>

    </div>

</div>


<div
    class="toast"
    id="toast">
</div>


<script>

/* =========================================================
   STATE
========================================================= */

let identifierType = "mobile";

let identifierValue = "";

let authMethod = "";

let currentFlow = "";

let resendTimer = null;

let secondsLeft = 30;


/* =========================================================
   HELPER
========================================================= */

function $(id){
    return document.getElementById(id);
}


/* =========================================================
   TOAST
========================================================= */

function showToast(message){

    const toast = $("toast");

    toast.innerText = message;

    toast.classList.add("show");

    setTimeout(() => {

        toast.classList.remove("show");

    },2500);

}


/* =========================================================
   IDENTIFIER
========================================================= */

function selectIdentifier(button){

    document
        .querySelectorAll(".customer-type button")
        .forEach(btn => {

            btn.classList.remove("selected");

        });

    button.classList.add("selected");

    identifierType =
        button.dataset.type;

    const input =
        $("customerInput");

    const label =
        $("identifierLabel");

    if(identifierType === "email"){

        label.innerText =
            "REGISTERED EMAIL ADDRESS";

        input.type = "email";

        input.placeholder =
            "customer@example.com";

    }else{

        label.innerText =
            "REGISTERED MOBILE NUMBER";

        input.type = "tel";

        input.placeholder =
            "+91 98765 43210";

    }

}


/* =========================================================
   SCREEN
========================================================= */

function showScreen(number){

    document
        .querySelectorAll(".screen")
        .forEach(screen => {

            screen.classList.remove("active");

        });

    const target =
        $("screen" + number);

    if(target){
        target.classList.add("active");
    }

    updateProgress(number);

}


/* =========================================================
   PROGRESS
========================================================= */

function updateProgress(number){

    for(let i=1;i<=4;i++){

        const step =
            $("step" + i);

        step.classList.remove("active");
        step.classList.remove("done");

        if(i < number){
            step.classList.add("done");
        }

        if(i === number){
            step.classList.add("active");
        }

    }

}


/* =========================================================
   FIND CUSTOMER
========================================================= */

function findCustomer(){

    const value =
        $("customerInput")
        .value
        .trim();

    if(!value){

        showToast(
            "Please enter your email or mobile number."
        );

        $("customerInput").focus();

        return;
    }

    identifierValue = value;

    showScreen(2);

}


/* =========================================================
   MODAL
========================================================= */

function hideModalContents(){

    document
        .querySelectorAll(".modal-content")
        .forEach(content => {

            content.style.display = "none";

        });

}


function openModal(contentId){

    hideModalContents();

    $(contentId).style.display =
        "block";

    $("modalOverlay")
        .classList
        .add("active");

    document.body.style.overflow =
        "hidden";

}


function closeModal(){

    $("modalOverlay")
        .classList
        .remove("active");

    document.body.style.overflow =
        "hidden";

    hideModalContents();

    clearErrors();

}


function overlayClose(event){

    if(
        event.target ===
        $("modalOverlay")
    ){

        closeModal();

    }

}


function clearErrors(){

    document
        .querySelectorAll(".modal-error")
        .forEach(error => {

            error.classList.remove("show");

            error.innerText = "";

        });

}


/* =========================================================
   LOGIN OTP
========================================================= */

function openLoginOTP(){

    authMethod = "otp";

    currentFlow = "login";

    openModal("otpModal");

    $("otpTitle").innerText =
        "Verify your account";

    $("otpDescription").innerText =
        "Enter the 6-digit OTP sent to your registered contact.";

    $("otpStep").innerText =
        "LOGIN • STEP 2 OF 2";

    $("otpDestination").innerText =
        maskIdentifier(identifierValue);

    clearOTP();

    startResendTimer();

    focusFirstOTP();

}


/* =========================================================
   LOGIN PASSWORD
========================================================= */

function openLoginPassword(){

    authMethod = "password";

    currentFlow = "login";

    openModal(
        "loginPasswordModal"
    );

    $("loginPasswordIdentity").value =
        identifierValue;

    setTimeout(() => {

        $("loginPassword").focus();

    },250);

}


/* =========================================================
   PASSWORD LOGIN
========================================================= */

function submitPasswordLogin(){

    const password =
        $("loginPassword")
        .value
        .trim();

    if(!password){

        showError(
            "loginPasswordError",
            "Please enter your FiberNet account password."
        );

        return;

    }

    closeModal();

    startConnection();

}


/* =========================================================
   SIGNUP
========================================================= */

function openSignup(){

    currentFlow = "signup";

    openModal(
        "signupMethodModal"
    );

}


function openSignupPassword(){

    currentFlow =
        "signup-password";

    openModal(
        "signupPasswordModal"
    );

}


function openSignupOTP(){

    currentFlow =
        "signup-otp";

    openModal(
        "signupOTPModal"
    );

}


/* =========================================================
   SIGNUP PASSWORD
========================================================= */

function submitSignupPassword(){

    const name =
        $("signupName")
        .value
        .trim();

    const identity =
        $("signupIdentity")
        .value
        .trim();

    const password =
        $("signupPassword")
        .value;

    const confirm =
        $("signupConfirm")
        .value;

    const terms =
        $("terms")
        .checked;


    if(!name){

        showError(
            "signupPasswordError",
            "Please enter your full name."
        );

        return;
    }


    if(!identity){

        showError(
            "signupPasswordError",
            "Please enter your email or mobile number."
        );

        return;
    }


    if(!isValidIdentity(identity)){

        showError(
            "signupPasswordError",
            "Please enter a valid email or mobile number."
        );

        return;
    }


    if(password.length < 6){

        showError(
            "signupPasswordError",
            "Password must contain at least 6 characters."
        );

        return;
    }


    if(password !== confirm){

        showError(
            "signupPasswordError",
            "Passwords do not match."
        );

        return;
    }


    if(!terms){

        showError(
            "signupPasswordError",
            "Please accept the Terms & Conditions."
        );

        return;
    }


    identifierValue =
        identity;


    closeModal();


    setTimeout(() => {

        currentFlow =
            "signup-password";

        openOTPForFlow(

            "Verify your account",

            "We've sent a verification OTP to your email or mobile number."

        );

    },250);

}


/* =========================================================
   SIGNUP OTP
========================================================= */

function submitSignupOTP(){

    const name =
        $("signupOTPName")
        .value
        .trim();

    const identity =
        $("signupOTPIdentity")
        .value
        .trim();


    if(!name){

        showError(
            "signupOTPError",
            "Please enter your full name."
        );

        return;
    }


    if(!identity){

        showError(
            "signupOTPError",
            "Please enter your email or mobile number."
        );

        return;
    }


    if(!isValidIdentity(identity)){

        showError(
            "signupOTPError",
            "Please enter a valid email or mobile number."
        );

        return;
    }


    identifierValue =
        identity;


    closeModal();


    setTimeout(() => {

        currentFlow =
            "signup-otp";

        openOTPForFlow(

            "Verify your account",

            "We've sent a verification OTP to your email or mobile number."

        );

    },250);

}


/* =========================================================
   VALIDATE EMAIL / MOBILE
========================================================= */

function isValidIdentity(value){

    if(value.includes("@")){

        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/
            .test(value);

    }

    const digits =
        value.replace(/\D/g,"");

    return digits.length >= 10;

}


/* =========================================================
   FORGOT
========================================================= */

function openForgot(){

    currentFlow =
        "forgot";

    openModal(
        "forgotModal"
    );

    setTimeout(() => {

        $("forgotIdentity").focus();

    },200);

}


function submitForgot(){

    const identity =
        $("forgotIdentity")
        .value
        .trim();


    if(!identity){

        showError(
            "forgotError",
            "Please enter your registered email or mobile number."
        );

        return;
    }


    if(!isValidIdentity(identity)){

        showError(
            "forgotError",
            "Please enter a valid email or mobile number."
        );

        return;
    }


    identifierValue =
        identity;


    closeModal();


    setTimeout(() => {

        currentFlow =
            "forgot";

        openOTPForFlow(

            "Verify password recovery",

            "Enter the OTP sent to your registered contact to reset your password."

        );

    },250);

}


/* =========================================================
   OTP FLOW
========================================================= */

function openOTPForFlow(
    title,
    description
){

    openModal("otpModal");

    $("otpTitle").innerText =
        title;

    $("otpDescription").innerText =
        description;

    $("otpDestination").innerText =
        maskIdentifier(
            identifierValue
        );

    $("otpStep").innerText =
        "VERIFICATION • STEP 2 OF 2";

    clearOTP();

    startResendTimer();

    focusFirstOTP();

}


/* =========================================================
   OTP VERIFY
========================================================= */

function verifyOTP(){

    const inputs =
        document.querySelectorAll(".otp");

    let otp = "";

    inputs.forEach(input => {

        otp += input.value;

    });


    if(otp.length !== 6){

        showError(
            "otpError",
            "Please enter the complete 6-digit OTP."
        );

        return;
    }


    /*
       DEMO OTP

       123456

       Replace with Odoo RPC/API
       in production.
    */

    if(otp !== "123456"){

        showError(
            "otpError",
            "Wrong code. Please try again."
        );

        return;
    }


    $("otpError")
        .classList
        .remove("show");

    $("otpSuccess")
        .classList
        .add("show");


    setTimeout(() => {

        /* PASSWORD RECOVERY */

        if(currentFlow === "forgot"){

            closeModal();

            setTimeout(() => {

                openModal(
                    "newPasswordModal"
                );

            },250);

            return;
        }


        /* SIGNUP */

        if(
            currentFlow ===
            "signup-password" ||
            currentFlow ===
            "signup-otp"
        ){

            closeModal();

            showToast(
                "Account verified successfully!"
            );

            setTimeout(() => {

                startConnection();

            },300);

            return;
        }


        /* LOGIN */

        closeModal();

        startConnection();

    },700);

}


/* =========================================================
   OTP INPUT
========================================================= */

const otpInputs =
    document.querySelectorAll(".otp");


otpInputs.forEach(
    (input,index) => {

        input.addEventListener(
            "input",
            function(){

                this.value =
                    this.value
                    .replace(/\D/g,"");

                if(
                    this.value &&
                    index <
                    otpInputs.length - 1
                ){

                    otpInputs[
                        index + 1
                    ].focus();

                }

            }
        );


        input.addEventListener(
            "keydown",
            function(e){

                if(
                    e.key ===
                    "Backspace" &&
                    !this.value &&
                    index > 0
                ){

                    otpInputs[
                        index - 1
                    ].focus();

                }

            }
        );


        input.addEventListener(
            "paste",
            function(e){

                e.preventDefault();

                const pasted =
                    (
                        e.clipboardData ||
                        window.clipboardData
                    )
                    .getData("text")
                    .replace(/\D/g,"")
                    .slice(0,6);


                pasted
                    .split("")
                    .forEach(
                        (digit,i) => {

                            if(
                                otpInputs[i]
                            ){

                                otpInputs[i]
                                    .value =
                                    digit;

                            }

                        }
                    );


                if(
                    pasted.length === 6
                ){

                    otpInputs[5]
                        .focus();

                }

            }
        );

    }
);


function focusFirstOTP(){

    setTimeout(() => {

        const first =
            document.querySelector(
                ".otp"
            );

        if(first){
            first.focus();
        }

    },250);

}


function clearOTP(){

    document
        .querySelectorAll(".otp")
        .forEach(input => {

            input.value = "";

        });


    $("otpError")
        .classList
        .remove("show");

    $("otpSuccess")
        .classList
        .remove("show");

}


/* =========================================================
   RESEND
========================================================= */

function startResendTimer(){

    clearInterval(
        resendTimer
    );

    secondsLeft = 30;

    $("resendText")
        .style
        .display = "inline";

    $("resendButton")
        .style
        .display = "none";

    updateTimer();


    resendTimer =
        setInterval(() => {

            secondsLeft--;

            updateTimer();


            if(
                secondsLeft <= 0
            ){

                clearInterval(
                    resendTimer
                );

                $("resendText")
                    .style
                    .display = "none";

                $("resendButton")
                    .style
                    .display = "inline";

            }

        },1000);

}


function updateTimer(){

    const seconds =
        String(
            secondsLeft
        )
        .padStart(2,"0");

    $("resendText")
        .innerText =
        "Resend OTP in 00:" +
        seconds;

}


function resendOTP(){

    clearOTP();

    startResendTimer();

    showToast(
        "A new OTP has been sent."
    );

}


/* =========================================================
   CHANGE IDENTIFIER
========================================================= */

function changeIdentifier(){

    closeModal();

    showScreen(1);

    setTimeout(() => {

        $("customerInput")
            .focus();

    },250);

}


/* =========================================================
   PASSWORD RESET
========================================================= */

function resetPassword(){

    const password =
        $("newPassword")
        .value;

    const confirm =
        $("newPasswordConfirm")
        .value;


    if(password.length < 6){

        showError(
            "newPasswordError",
            "Password must contain at least 6 characters."
        );

        return;
    }


    if(password !== confirm){

        showError(
            "newPasswordError",
            "Passwords do not match."
        );

        return;
    }


    $("newPasswordError")
        .classList
        .remove("show");


    $("newPasswordSuccess")
        .classList
        .add("show");


    $("resetPasswordButton")
        .innerText =
        "PASSWORD UPDATED ✓";


    setTimeout(() => {

        closeModal();

        showScreen(1);

        $("customerInput")
            .value =
            identifierValue;

        showToast(
            "Password updated successfully."
        );

    },1200);

}


/* =========================================================
   PASSWORD VISIBILITY
========================================================= */

function togglePassword(
    id,
    button
){

    const input =
        $(id);

    if(
        input.type ===
        "password"
    ){

        input.type = "text";

        button.innerText =
            "◉";

    }else{

        input.type =
            "password";

        button.innerText =
            "◉";

    }

}


/* =========================================================
   ERROR
========================================================= */

function showError(
    id,
    message
){

    const element =
        $(id);

    element.innerText =
        message;

    element.classList
        .add("show");

}


/* =========================================================
   MASK
========================================================= */

function maskIdentifier(
    value
){

    if(!value){

        return "your registered contact";

    }


    if(
        value.includes("@")
    ){

        const parts =
            value.split("@");

        const name =
            parts[0];

        const masked =
            name.length > 2
            ? name.substring(0,2) +
              "•••"
            : "•••";

        return (
            masked +
            "@" +
            parts[1]
        );

    }


    const digits =
        value.replace(
            /\D/g,
            ""
        );


    if(
        digits.length >= 10
    ){

        return (
            "+91 ••••• " +
            digits.slice(-4)
        );

    }


    if(
        value.length > 4
    ){

        return (
            value.slice(0,3) +
            "•••" +
            value.slice(-2)
        );

    }


    return "••••••";

}


/* =========================================================
   CONNECTION
========================================================= */

function startConnection(){

    showScreen(3);

    $("loadingProgress")
        .style
        .width = "0%";


    setTimeout(() => {

        $("loadingProgress")
            .style
            .width = "100%";

    },100);


    setTimeout(() => {

        $("successCustomer")
            .innerText =
            identifierValue ||
            "FiberNet Customer";

        showScreen(4);

    },3000);

}


/* =========================================================
   DASHBOARD
========================================================= */

function openDashboard(){

    /*
       Odoo 19:

       Replace this with your actual
       customer portal route.

       Example:

       window.location.href =
           "/my/home";
    */

    showToast(
        "Opening FiberNet customer dashboard..."
    );

}


/* =========================================================
   ESCAPE
========================================================= */

document.addEventListener(
    "keydown",
    function(e){

        if(
            e.key ===
            "Escape"
        ){

            if(
                $("modalOverlay")
                .classList
                .contains("active")
            ){

                closeModal();

            }

        }

    }
);


/* =========================================================
   ENTER
========================================================= */

document.addEventListener(
    "keydown",
    function(e){

        if(
            e.key !== "Enter"
        ){

            return;

        }


        if(
            $("modalOverlay")
            .classList
            .contains("active")
        ){

            const visible =
                [
                    ...document
                    .querySelectorAll(
                        ".modal-content"
                    )
                ]
                .find(
                    el =>
                        el.style.display ===
                        "block"
                );


            if(!visible){

                return;

            }


            if(
                visible.id ===
                "loginPasswordModal"
            ){

                submitPasswordLogin();

            }

            else if(
                visible.id ===
                "otpModal"
            ){

                verifyOTP();

            }

            else if(
                visible.id ===
                "signupPasswordModal"
            ){

                submitSignupPassword();

            }

            else if(
                visible.id ===
                "signupOTPModal"
            ){

                submitSignupOTP();

            }

            else if(
                visible.id ===
                "forgotModal"
            ){

                submitForgot();

            }

            else if(
                visible.id ===
                "newPasswordModal"
            ){

                resetPassword();

            }

            return;

        }


        const active =
            document.querySelector(
                ".screen.active"
            );


        if(!active){

            return;

        }


        if(
            active.id ===
            "screen1"
        ){

            findCustomer();

        }

    }
);

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>FiberNet — Smart ISP Customer Portal</title>

:root{
    --blue:#159ee8;
    --blue2:#087bc6;
    --cyan:#46c9ef;
    --green:#3bd59b;
    --green2:#1eb87e;
    --dark:#123449;
    --muted:#7d96a6;
    --border:#dcecf3;
    --soft:#f4fbfe;
    --white:#fff;
    --red:#ee6d76;
    --shadow:0 35px 90px rgba(22,112,148,.15);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    min-height:100%;
}

body{
    font-family:Inter,sans-serif;
    color:var(--dark);
    background:
        radial-gradient(circle at 10% 20%,#e9faff,transparent 28%),
        radial-gradient(circle at 90% 80%,#eafff6,transparent 30%),
        #f6fcff;
    overflow-x:hidden;
}

button,input{
    font-family:inherit;
}

button{
    cursor:pointer;
}

.page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:28px;
}

.app{
    width:min(1180px,100%);
    min-height:720px;
    display:grid;
    grid-template-columns:46% 54%;
    background:#fff;
    border:1px solid #e1eff5;
    border-radius:34px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

/* =========================================================
   LEFT ISP AREA
========================================================= */

.network-area{
    position:relative;
    overflow:hidden;
    padding:45px;
    background:
        radial-gradient(circle at 15% 20%,rgba(70,201,239,.18),transparent 25%),
        radial-gradient(circle at 85% 75%,rgba(59,213,155,.14),transparent 28%),
        linear-gradient(145deg,#f1fbff,#f7fffb);
}

.circle{
    position:absolute;
    border:1px solid rgba(21,158,232,.11);
    border-radius:50%;
    pointer-events:none;
}

.circle.one{
    width:450px;
    height:450px;
    left:-280px;
    top:130px;
}

.circle.two{
    width:650px;
    height:650px;
    left:-400px;
    top:0;
}

.circle.three{
    width:850px;
    height:850px;
    left:-520px;
    top:-110px;
}

.brand{
    position:relative;
    z-index:10;
    display:flex;
    align-items:center;
    gap:12px;
}

.logo{
    width:46px;
    height:46px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:800;
    font-size:20px;
    background:linear-gradient(135deg,var(--blue),var(--green));
    box-shadow:0 14px 28px rgba(21,158,232,.2);
}

.brand-name{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.8px;
}

.brand-name span{
    color:var(--blue);
}

.network-content{
    position:relative;
    z-index:10;
    margin-top:100px;
}

.online{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border-radius:30px;
    border:1px solid #dceef4;
    background:rgba(255,255,255,.85);
    color:var(--green2);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.online-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(59,213,155,.12);
}

.network-content h1{
    margin-top:20px;
    font-size:43px;
    line-height:1.08;
    letter-spacing:-2.3px;
}

.network-content h1 span{
    color:var(--blue);
}

.network-content p{
    max-width:390px;
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}

/* NETWORK ANIMATION */

.network{
    position:relative;
    height:260px;
    margin-top:30px;
}

.node{
    position:absolute;
    width:43px;
    height:43px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    border:1px solid #d4ebf2;
    box-shadow:0 10px 25px rgba(33,124,154,.1);
    z-index:4;
}

.node:after{
    content:"";
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(59,213,155,.1);
}

.n1{
    left:4%;
    top:42px;
}

.n2{
    right:4%;
    top:25px;
}

.n3{
    left:18%;
    bottom:20px;
}

.n4{
    right:17%;
    bottom:7px;
}

.line{
    position:absolute;
    height:2px;
    transform-origin:left center;
    background:linear-gradient(
        90deg,
        rgba(21,158,232,.05),
        var(--blue),
        rgba(59,213,155,.15)
    );
}

.l1{
    width:245px;
    left:9%;
    top:95px;
    transform:rotate(8deg);
}

.l2{
    width:245px;
    left:51%;
    top:85px;
    transform:rotate(-13deg);
}

.l3{
    width:230px;
    left:20%;
    top:145px;
    transform:rotate(23deg);
}

.l4{
    width:220px;
    left:52%;
    top:145px;
    transform:rotate(25deg);
}

.packet{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(59,213,155,.1);
    animation:packet 3s linear infinite;
    z-index:8;
}

.p1{
    left:16%;
    top:91px;
}

.p2{
    left:63%;
    top:86px;
    animation-delay:1s;
}

.p3{
    left:30%;
    top:147px;
    animation-delay:1.7s;
}

@keyframes packet{
    0%{
        opacity:0;
        transform:scale(.4);
    }
    20%{
        opacity:1;
    }
    70%{
        opacity:1;
        transform:scale(1.25);
    }
    100%{
        opacity:0;
        transform:scale(.5);
    }
}

.router{
    position:absolute;
    width:108px;
    height:108px;
    left:50%;
    top:48%;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    border-radius:28px;
    background:#fff;
    border:1px solid #cdebf4;
    box-shadow:
        0 0 0 10px rgba(255,255,255,.7),
        0 20px 40px rgba(29,129,163,.15);
    z-index:7;
}

.router-body{
    width:55px;
    height:40px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    position:relative;
    box-shadow:0 10px 20px rgba(21,158,232,.25);
}

.router-body:before{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:8px;
    height:4px;
    border-radius:5px;
    background:rgba(255,255,255,.8);
}

.router-body:after{
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    right:10px;
    top:8px;
    background:var(--green);
}

.status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid #dceef3;
    background:rgba(255,255,255,.82);
}

.status-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.status-icon{
    width:33px;
    height:33px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#edfff7;
    color:var(--green2);
}

.status-title{
    font-size:11px;
    font-weight:800;
}

.status-sub{
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
}

.status-right{
    color:var(--green2);
    font-size:9px;
    font-weight:800;
}

/* =========================================================
   RIGHT AUTH AREA
========================================================= */

.auth-area{
    position:relative;
    padding:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}

.auth{
    width:100%;
    max-width:425px;
}

/* STEP BAR */

.steps{
    display:flex;
    align-items:center;
    margin-bottom:35px;
}

.step{
    display:flex;
    align-items:center;
    flex:1;
}

.step:last-child{
    flex:0;
}

.step-circle{
    width:30px;
    height:30px;
    min-width:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid #dcecf2;
    background:#f2f7f9;
    color:#9aadb7;
    font-size:10px;
    font-weight:800;
    transition:.35s;
}

.step-line{
    width:100%;
    height:2px;
    margin:0 7px;
    background:#e5eff3;
    transition:.4s;
}

.step.active .step-circle{
    color:#fff;
    background:var(--blue);
    border-color:var(--blue);
    box-shadow:0 0 0 5px rgba(21,158,232,.08);
}

.step.done .step-circle{
    color:#fff;
    background:var(--green);
    border-color:var(--green);
}

.step.done .step-line{
    background:linear-gradient(90deg,var(--blue),var(--green));
}

/* SCREENS */

.screen{
    display:none;
    animation:pageIn .45s cubic-bezier(.2,.8,.2,1);
}

.screen.active{
    display:block;
}

@keyframes pageIn{
    from{
        opacity:0;
        transform:translateX(35px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateX(0) scale(1);
    }
}

.back{
    border:0;
    background:none;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    margin-bottom:18px;
}

.back:hover{
    color:var(--blue2);
}

.kicker{
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

h2{
    margin-top:9px;
    font-size:31px;
    letter-spacing:-1.5px;
}

.description{
    margin-top:9px;
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
}

.field{
    margin-top:19px;
}

.field label{
    display:block;
    margin-bottom:8px;
    color:#527083;
    font-size:10px;
    font-weight:800;
}

.input{
    width:100%;
    height:53px;
    padding:0 17px;
    border:1px solid var(--border);
    border-radius:14px;
    outline:none;
    background:#fbfdfe;
    color:var(--dark);
    font-size:13px;
    transition:.25s;
}

.input:focus{
    background:#fff;
    border-color:#7dccec;
    box-shadow:0 0 0 4px rgba(21,158,232,.07);
}

/* SELECT TYPE */

.choice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:21px;
}

.choice{
    min-height:70px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fbfdfe;
    color:var(--muted);
    transition:.25s;
    text-align:left;
}

.choice:hover{
    transform:translateY(-2px);
}

.choice.selected{
    border-color:#8ed3ec;
    background:#effaff;
    color:var(--blue2);
}

.choice strong{
    display:block;
    color:var(--dark);
    font-size:11px;
}

.choice span{
    display:block;
    margin-top:6px;
    font-size:9px;
    color:var(--muted);
}

/* MAIN BUTTON */

.primary{
    width:100%;
    min-height:54px;
    margin-top:20px;
    border:0;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(100deg,var(--blue),#28b8dd,var(--green));
    box-shadow:0 14px 28px rgba(24,164,207,.2);
    font-size:11px;
    font-weight:800;
    letter-spacing:.3px;
    transition:.25s;
}

.primary:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 32px rgba(24,164,207,.25);
}

.secondary{
    width:100%;
    height:48px;
    margin-top:10px;
    border:1px solid var(--border);
    border-radius:13px;
    background:#fff;
    color:var(--blue2);
    font-size:10px;
    font-weight:800;
}

.link-row{
    display:flex;
    justify-content:center;
    gap:5px;
    margin-top:18px;
    color:var(--muted);
    font-size:10px;
}

.link{
    border:0;
    background:none;
    color:var(--blue2);
    font-size:10px;
    font-weight:800;
}

.security{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin-top:24px;
    color:#9aadb7;
    font-size:9px;
}

.lock{
    width:15px;
    height:15px;
    display:grid;
    place-items:center;
    border-radius:5px;
    background:#edfff7;
    color:var(--green2);
}

/* AUTH METHOD CARDS */

.auth-methods{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:25px;
}

.auth-card{
    min-height:135px;
    padding:17px;
    border:1px solid var(--border);
    border-radius:17px;
    background:#fbfdfe;
    text-align:left;
    transition:.3s;
}

.auth-card:hover{
    transform:translateY(-5px);
    border-color:#8dd4ec;
    box-shadow:0 15px 30px rgba(21,158,232,.1);
}

.auth-card-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#eaf8fe;
    font-size:17px;
}

.auth-card strong{
    display:block;
    margin-top:12px;
    color:var(--dark);
    font-size:11px;
}

.auth-card span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:9px;
    line-height:1.5;
}

/* PASSWORD */

.password{
    position:relative;
}

.password .input{
    padding-right:50px;
}

.eye{
    position:absolute;
    right:8px;
    top:8px;
    width:37px;
    height:37px;
    border:0;
    background:none;
    color:var(--muted);
}

/* OTP */

.otp-info{
    margin-top:20px;
    padding:12px;
    border:1px solid #e0f0f5;
    border-radius:12px;
    background:#f4fbfe;
    text-align:center;
    color:var(--muted);
    font-size:9px;
}

.otp-info strong{
    color:var(--dark);
}

.otp-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:7px;
    margin-top:17px;
}

.otp{
    width:100%;
    height:52px;
    border:1px solid var(--border);
    border-radius:12px;
    outline:none;
    background:#fbfdfe;
    text-align:center;
    font-size:18px;
    font-weight:800;
    color:var(--blue2);
}

.otp:focus{
    border-color:#76caea;
    box-shadow:0 0 0 4px rgba(21,158,232,.07);
}

.resend{
    margin-top:14px;
    text-align:center;
    color:var(--muted);
    font-size:9px;
}

.resend button{
    border:0;
    background:none;
    color:var(--blue2);
    font-weight:800;
}

/* VERIFY DETAILS */

.verify-box{
    margin-top:22px;
    padding:17px;
    border-radius:16px;
    border:1px solid #dceef4;
    background:#f7fcfe;
}

.verify-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px solid #e7f1f4;
}

.verify-row:last-child{
    border-bottom:0;
}

.verify-row span{
    color:var(--muted);
    font-size:10px;
}

.verify-row strong{
    font-size:10px;
}

/* SUCCESS */

.success{
    text-align:center;
}

.success-icon{
    width:96px;
    height:96px;
    display:grid;
    place-items:center;
    margin:0 auto 25px;
    border-radius:50%;
    background:#edfff7;
    border:1px solid #c5efdc;
    color:var(--green2);
    font-size:38px;
    animation:success .6s ease;
}

@keyframes success{
    0%{
        opacity:0;
        transform:scale(.4);
    }
    70%{
        transform:scale(1.08);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

.info-card{
    margin-top:23px;
    padding:16px;
    border-radius:15px;
    background:#f7fcfe;
    border:1px solid #e2eff4;
    text-align:left;
}

.info-row{
    display:flex;
    justify-content:space-between;
    padding:7px 0;
    font-size:10px;
}

.info-row span{
    color:var(--muted);
}

/* LOADING */

.loading{
    text-align:center;
}

.loader{
    width:100px;
    height:100px;
    margin:15px auto 25px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid #c8eaf5;
    background:#f0fbff;
    position:relative;
}

.loader:before,
.loader:after{
    content:"";
    position:absolute;
    border:1px solid rgba(21,158,232,.25);
    border-radius:50%;
    animation:ripple 2s infinite;
}

.loader:before{
    inset:-12px;
}

.loader:after{
    inset:-24px;
    animation-delay:.5s;
}

.loader-router{
    width:42px;
    height:30px;
    border-radius:8px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
}

@keyframes ripple{
    from{
        opacity:1;
        transform:scale(.85);
    }
    to{
        opacity:0;
        transform:scale(1.2);
    }
}

.progress-bar{
    width:100%;
    height:5px;
    margin-top:24px;
    overflow:hidden;
    border-radius:10px;
    background:#edf5f8;
}

.progress-fill{
    width:0;
    height:100%;
    border-radius:10px;
    background:linear-gradient(90deg,var(--blue),var(--green));
    transition:width 2.8s linear;
}

/* ERROR */

.error{
    display:none;
    margin-top:12px;
    padding:10px;
    border-radius:10px;
    background:#fff3f3;
    border:1px solid #ffd6d6;
    color:var(--red);
    font-size:9px;
}

.error.show{
    display:block;
}

/* SUCCESS MESSAGE */

.message{
    display:none;
    margin-top:12px;
    padding:11px;
    border-radius:11px;
    background:#edfff7;
    border:1px solid #c9f1df;
    color:var(--green2);
    font-size:9px;
    font-weight:700;
    text-align:center;
}

.message.show{
    display:block;
}

/* RESPONSIVE */

@media(max-width:900px){

.page{
        padding:15px;
    }

.app{
        grid-template-columns:1fr;
    }

.network-area{
        min-height:500px;
    }

.network-content{
        margin-top:70px;
    }
}

@media(max-width:520px){

body{
        background:#fff;
    }

.page{
        padding:0;
    }

.app{
        min-height:100vh;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

.network-area{
        min-height:445px;
        padding:25px 21px;
    }

.network-content{
        margin-top:55px;
    }

.network-content h1{
        font-size:34px;
    }

.network{
        transform:scale(.78);
        transform-origin:left top;
        width:128%;
    }

.status{
        margin-top:-35px;
    }

.auth-area{
        padding:35px 22px 45px;
    }

h2{
        font-size:28px;
    }

.auth-methods{
        grid-template-columns:1fr;
    }

.otp-grid{
        gap:5px;
    }

.otp{
        height:48px;
    }
}
</style>
</head>

<body>

<div class="brand">
        <div class="logo">F</div>
        <div class="brand-name">
            Fiber<span>Net</span>
        </div>
    </div>

<div class="online">
            <span class="online-dot"></span>
            ISP NETWORK ONLINE
        </div>

<h1>
            Your internet.<br>
            <span>Your control.</span>
        </h1>

<p>
            Securely manage your FiberNet broadband account,
            verify your identity, pay bills, upgrade plans
            and stay connected.
        </p>

</div>

<div>
                    <div class="status-title">
                        Fiber Network
                    </div>

<div class="status-sub">
                        Broadband services operational
                    </div>
                </div>

</div>

<div class="status-right">
                ● STABLE
            </div>

</div>

</section>

</div>

<div class="kicker">
        CUSTOMER ACCESS
    </div>

<h2>
        Welcome to FiberNet
    </h2>

<p class="description">
        Sign in using your registered email address,
        mobile number or customer ID.
    </p>

<strong>📱 Mobile Number</strong>

<span>
                Login using your registered mobile
            </span>

</button>

<strong>✉ Email Address</strong>

<span>
                Login using your registered email
            </span>

</button>

</div>

<label id="identityLabel">
            REGISTERED MOBILE NUMBER
        </label>

</div>

<button
        class="primary"
        onclick="continueIdentity()">
        CONTINUE →
    </button>

<span>New FiberNet customer?</span>

<button
            class="link"
            onclick="startSignup()">
            Create Account
        </button>

</div>

<button
            class="link"
            onclick="startForgot()">
            Forgot Password?
        </button>

</div>

<div class="security">
        <span class="lock">✓</span>
        Secure ISP authentication
    </div>

</div>

<button
        class="back"
        onclick="showScreen(1)">
        ← Change email / mobile
    </button>

<div class="kicker">
        ACCOUNT FOUND
    </div>

<h2>
        Choose your login
    </h2>

<p class="description">
        Select how you want to securely access your
        FiberNet customer account.
    </p>

<div class="verify-row">
            <span>Registered account</span>
            <strong id="displayIdentity">
                —
            </strong>
        </div>

<div class="verify-row">
            <span>Connection</span>
            <strong>Fiber Broadband</strong>
        </div>

</div>

<strong>
                Login with Password
            </strong>

<span>
                Use your existing FiberNet account
                password.
            </span>

</button>

<strong>
                Login with OTP
            </strong>

<span>
                Receive a secure one-time
                verification code.
            </span>

</button>

</div>

<button
            class="link"
            onclick="startForgot()">
            Forgot password?
        </button>

</div>

<button
        class="back"
        onclick="showScreen(2)">
        ← Back to login options
    </button>

<div class="kicker">
        PASSWORD LOGIN
    </div>

<h2>
        Welcome back
    </h2>

<p class="description">
        Enter your FiberNet password to securely
        access your account.
    </p>

<label>
            EMAIL / MOBILE
        </label>

</div>

<label>
            ACCOUNT PASSWORD
        </label>

</div>

<button
        class="primary"
        onclick="loginPassword()">
        LOGIN SECURELY →
    </button>

<button
        class="secondary"
        onclick="openLoginOTP()">
        LOGIN WITH OTP INSTEAD
    </button>

<button
            class="link"
            onclick="startForgot()">
            Forgot password?
        </button>

</div>

<button
        class="back"
        onclick="showScreen(2)">
        ← Back to login options
    </button>

<div class="kicker">
        OTP LOGIN
    </div>

<h2>
        Verify your account
    </h2>

<p class="description">
        Enter the 6-digit OTP sent to your registered
        email or mobile number.
    </p>

</div>

<button
        class="primary"
        onclick="verifyLoginOTP()">
        VERIFY OTP →
    </button>

<span id="loginTimer">
            Resend OTP in 00:30
        </span>

<button
            id="loginResend"
            style="display:none"
            onclick="resendLoginOTP()">
            Resend OTP
        </button>

</div>

<button
        class="back"
        onclick="showScreen(1)">
        ← Back to login
    </button>

<div class="kicker">
        CREATE ACCOUNT
    </div>

<h2>
        Create your FiberNet account
    </h2>

<p class="description">
        Enter your details. Your email address or mobile
        number will be verified with OTP.
    </p>

</div>

<strong>📱 Mobile</strong>

<span>
                Verify mobile with OTP
            </span>

</button>

<strong>✉ Email</strong>

<span>
                Verify email with OTP
            </span>

</button>

</div>

<label id="signupIdentityLabel">
            MOBILE NUMBER
        </label>

</div>

<button
        class="primary"
        onclick="verifySignupDetails()">
        VERIFY DETAILS →
    </button>

</div>

<button
        class="back"
        onclick="showScreen('SignupDetails')">
        ← Change details
    </button>

<div class="kicker">
        VERIFY YOUR DETAILS
    </div>

<h2>
        Confirm your identity
    </h2>

<p class="description">
        We sent a 6-digit verification code to
        your registered contact.
    </p>

<div class="otp-info">
        Verification code sent to
        <strong id="signupOTPDestination">
            —
        </strong>
    </div>

</div>

<button
        class="primary"
        onclick="verifySignupOTP()">
        VERIFY & CONTINUE →
    </button>

<span id="signupTimer">
            Resend OTP in 00:30
        </span>

<button
            id="signupResend"
            style="display:none"
            onclick="resendSignupOTP()">
            Resend OTP
        </button>

</div>

<div class="kicker">
        DETAILS VERIFIED ✓
    </div>

<h2>
        Finish your account
    </h2>

<p class="description">
        Your email/mobile has been successfully verified.
        Now choose how you want to protect your FiberNet account.
    </p>

<div class="verify-row">
            <span>Verified contact</span>
            <strong id="verifiedContact">—</strong>
        </div>

<div class="verify-row">
            <span>Verification</span>
            <strong style="color:#1eb87e">
                ✓ Verified
            </strong>
        </div>

</div>

<strong>
                Signup with Password
            </strong>

<span>
                Create a password for future
                account login.
            </span>

</button>

<strong>
                Signup with OTP
            </strong>

<span>
                Use OTP authentication whenever
                you access your account.
            </span>

</button>

</div>

<div class="kicker">
        PASSWORD SETUP
    </div>

<h2>
        Create your password
    </h2>

<p class="description">
        Your contact is verified. Create a strong
        password for your FiberNet account.
    </p>

<label>
            CREATE PASSWORD
        </label>

</div>

<label>
            CONFIRM PASSWORD
        </label>

</div>

<button
        class="primary"
        onclick="createPasswordAccount()">
        CREATE ACCOUNT →
    </button>

</div>

<div class="kicker">
        OTP ACCOUNT
    </div>

<p class="description">
        Your account is verified. OTP authentication
        will be used for secure future logins.
    </p>

<div class="verify-row">
            <span>Account</span>
            <strong id="otpSignupAccount">—</strong>
        </div>

<div class="verify-row">
            <span>Authentication</span>
            <strong style="color:#1eb87e">
                OTP Enabled
            </strong>
        </div>

</div>

<button
        class="primary"
        onclick="completeSignupOTP()">
        COMPLETE ACCOUNT →
    </button>

</div>

<div class="kicker">
        ACCOUNT RECOVERY
    </div>

<h2>
        Reset your password
    </h2>

<p class="description">
        Enter your registered email or mobile number.
        We will verify it with OTP.
    </p>

<label>
            EMAIL / MOBILE NUMBER
        </label>

</div>

<button
        class="primary"
        onclick="sendForgotOTP()">
        SEND RECOVERY OTP →
    </button>

</div>

<div class="kicker">
        RECOVERY VERIFICATION
    </div>

<h2>
        Verify recovery request
    </h2>

<p class="description">
        Enter the OTP sent to your registered
        email/mobile.
    </p>

</div>

<button
        class="primary"
        onclick="verifyForgotOTP()">
        VERIFY OTP →
    </button>

</div>

<div class="kicker">
        PASSWORD RECOVERY
    </div>

<h2>
        Create new password
    </h2>

<p class="description">
        Your identity has been verified. Create
        a new password.
    </p>

<label>
            NEW PASSWORD
        </label>

</div>

<label>
            CONFIRM PASSWORD
        </label>

</div>

<button
        class="primary"
        onclick="saveNewPassword()">
        UPDATE PASSWORD →
    </button>

</div>

<div class="kicker">
            AUTHENTICATED
        </div>

<h2>
            Connecting your account
        </h2>

<p class="description">
            Preparing your secure FiberNet customer
            dashboard.
        </p>

</div>

<div class="kicker">
            CONNECTION VERIFIED
        </div>

<h2>
            You're connected!
        </h2>

<p class="description">
            Your FiberNet account has been
            successfully authenticated.
        </p>

<div class="info-row">
                <span>Customer</span>
                <strong id="successName">
                    FiberNet Customer
                </strong>
            </div>

<div class="info-row">
                <span>Account</span>
                <strong id="successAccount">
                    —
                </strong>
            </div>

<div class="info-row">
                <span>Connection</span>
                <strong>
                    Fiber Broadband
                </strong>
            </div>

<div class="info-row">
                <span>Status</span>
                <strong style="color:#1eb87e">
                    ● Active
                </strong>
            </div>

</div>

<button
            class="primary"
            onclick="openDashboard()">
            ENTER CUSTOMER DASHBOARD →
        </button>

<div class="security">
            <span class="lock">✓</span>
            Secure ISP session established
        </div>

</div>

</section>

</div>

/* =========================================================
   GLOBAL STATE
========================================================= */

let identifierType = "mobile";
let signupIdentifierType = "mobile";

let identifierValue = "";
let signupNameValue = "";
let signupIdentityValue = "";

let timer = null;
let timerSeconds = 30;

/* =========================================================
   HELPER
========================================================= */

function $(id){
    return document.getElementById(id);
}

/* =========================================================
   SCREEN SYSTEM
========================================================= */

function showScreen(name){

document
        .querySelectorAll(".screen")
        .forEach(screen => {
            screen.classList.remove("active");
        });

const screen = $("screen" + name);

if(screen){
        screen.classList.add("active");
    }

updateSteps(name);

window.scrollTo({
        top:0,
        behavior:"smooth"
    });
}

/* =========================================================
   STEP INDICATOR
========================================================= */

function updateSteps(name){

let current = 1;

if(
        name === 2 ||
        name === "LoginPassword" ||
        name === "LoginOTP"
    ){
        current = 2;
    }

if(
        name === "SignupDetails" ||
        name === "SignupOTP" ||
        name === "SignupMethod" ||
        name === "SignupPassword" ||
        name === "SignupOtpMethod"
    ){
        current = 2;
    }

if(
        name === "Connecting" ||
        name === "Success"
    ){
        current = 4;
    }

if(
        name === "Forgot" ||
        name === "ForgotOTP" ||
        name === "NewPassword"
    ){
        current = 2;
    }

for(let i=1;i<=4;i++){

const step = $("step" + i);

step.classList.remove("active");
        step.classList.remove("done");

if(i < current){
            step.classList.add("done");
        }

if(i === current){
            step.classList.add("active");
        }
    }
}

/* =========================================================
   LOGIN EMAIL / MOBILE
========================================================= */

function chooseIdentifier(type){

identifierType = type;

$("mobileChoice").classList.toggle(
        "selected",
        type === "mobile"
    );

$("emailChoice").classList.toggle(
        "selected",
        type === "email"
    );

if(type === "mobile"){

$("identityLabel").innerText =
            "REGISTERED MOBILE NUMBER";

$("identityInput").type = "tel";

$("identityInput").placeholder =
            "+91 98765 43210";

}else{

$("identityLabel").innerText =
            "REGISTERED EMAIL ADDRESS";

$("identityInput").type = "email";

$("identityInput").placeholder =
            "customer@example.com";

}

$("identityInput").focus();
}

function continueIdentity(){

const value =
        $("identityInput").value.trim();

if(!value){

$("identityInput").focus();

return;
    }

identifierValue = value;

$("displayIdentity").innerText =
        mask(identifierValue);

showScreen(2);
}

/* =========================================================
   LOGIN PASSWORD
========================================================= */

function openLoginPassword(){

$("passwordIdentity").value =
        identifierValue;

$("loginPassword").value = "";

$("passwordError").classList.remove("show");

showScreen("LoginPassword");

setTimeout(() => {
        $("loginPassword").focus();
    },300);
}

function loginPassword(){

const password =
        $("loginPassword").value.trim();

if(!password){

showError(
            "passwordError",
            "Please enter your account password."
        );

return;
    }

startConnection();
}

/* =========================================================
   LOGIN OTP
========================================================= */

function openLoginOTP(){

clearOTP(".screen#screenLoginOTP");

$("loginOTPDestination").innerText =
        mask(identifierValue);

showScreen("LoginOTP");

startTimer(
        "loginTimer",
        "loginResend",
        resendLoginOTP
    );

setTimeout(() => {

const input =
            document.querySelector(
                "#screenLoginOTP .otp"
            );

if(input){
            input.focus();
        }

},300);
}

function verifyLoginOTP(){

const otp =
        getOTP("#screenLoginOTP");

if(otp.length !== 6){

showError(
            "loginOTPError",
            "Please enter the complete 6-digit OTP."
        );

return;
    }

if(otp !== "123456"){

showError(
            "loginOTPError",
            "Invalid OTP. For this demo use 123456."
        );

return;
    }

startConnection();
}

function resendLoginOTP(){

clearOTP("#screenLoginOTP");

startTimer(
        "loginTimer",
        "loginResend",
        resendLoginOTP
    );
}

/* =========================================================
   SIGNUP START
========================================================= */

function startSignup(){

$("signupName").value = "";
    $("signupIdentity").value = "";

chooseSignupIdentity("mobile");

showScreen("SignupDetails");
}

function chooseSignupIdentity(type){

signupIdentifierType = type;

$("signupMobileChoice").classList.toggle(
        "selected",
        type === "mobile"
    );

$("signupEmailChoice").classList.toggle(
        "selected",
        type === "email"
    );

if(type === "mobile"){

$("signupIdentityLabel").innerText =
            "MOBILE NUMBER";

$("signupIdentity").type = "tel";

$("signupIdentity").placeholder =
            "+91 98765 43210";

}else{

$("signupIdentityLabel").innerText =
            "EMAIL ADDRESS";

$("signupIdentity").type = "email";

$("signupIdentity").placeholder =
            "customer@example.com";

}
}

/* =========================================================
   SIGNUP VERIFY DETAILS
========================================================= */

function verifySignupDetails(){

const name =
        $("signupName").value.trim();

const identity =
        $("signupIdentity").value.trim();

if(!name){

showError(
            "signupDetailsError",
            "Please enter your full name."
        );

return;
    }

if(!identity){

showError(
            "signupDetailsError",
            "Please enter your email or mobile number."
        );

return;
    }

signupNameValue = name;
    signupIdentityValue = identity;

$("signupOTPDestination").innerText =
        mask(identity);

showScreen("SignupOTP");

startTimer(
        "signupTimer",
        "signupResend",
        resendSignupOTP
    );

setTimeout(() => {

const input =
            document.querySelector(
                "#screenSignupOTP .otp"
            );

if(input){
            input.focus();
        }

},300);
}

/* =========================================================
   SIGNUP OTP
========================================================= */

function verifySignupOTP(){

const otp =
        getOTP("#screenSignupOTP");

if(otp.length !== 6){

showError(
            "signupOTPError",
            "Please enter the complete 6-digit OTP."
        );

return;
    }

if(otp !== "123456"){

showError(
            "signupOTPError",
            "Invalid OTP. For this demo use 123456."
        );

return;
    }

$("verifiedName").innerText =
        signupNameValue;

$("verifiedContact").innerText =
        mask(signupIdentityValue);

showScreen("SignupMethod");
}

function resendSignupOTP(){

clearOTP("#screenSignupOTP");

startTimer(
        "signupTimer",
        "signupResend",
        resendSignupOTP
    );
}

/* =========================================================
   SIGNUP PASSWORD
========================================================= */

function openSignupPassword(){

$("signupPassword").value = "";
    $("signupConfirm").value = "";

$("signupPasswordError").classList.remove("show");

showScreen("SignupPassword");

setTimeout(() => {
        $("signupPassword").focus();
    },300);
}

function createPasswordAccount(){

const password =
        $("signupPassword").value;

const confirm =
        $("signupConfirm").value;

if(password.length < 6){

showError(
            "signupPasswordError",
            "Password must contain at least 6 characters."
        );

return;
    }

if(password !== confirm){

showError(
            "signupPasswordError",
            "Passwords do not match."
        );

return;
    }

startSignupSuccess();
}

/* =========================================================
   SIGNUP OTP METHOD
========================================================= */

function openSignupOTP(){

$("otpSignupAccount").innerText =
        mask(signupIdentityValue);

showScreen("SignupOtpMethod");
}

function completeSignupOTP(){

startSignupSuccess();
}

/* =========================================================
   SIGNUP SUCCESS
========================================================= */

function startSignupSuccess(){

$("successName").innerText =
        signupNameValue;

$("successAccount").innerText =
        mask(signupIdentityValue);

startConnection();
}

/* =========================================================
   FORGOT PASSWORD
========================================================= */

function startForgot(){

$("forgotIdentity").value = "";

$("forgotError").classList.remove("show");

showScreen("Forgot");

setTimeout(() => {
        $("forgotIdentity").focus();
    },300);
}

function sendForgotOTP(){

const identity =
        $("forgotIdentity").value.trim();

if(!identity){

showError(
            "forgotError",
            "Please enter your registered email or mobile number."
        );

return;
    }

identifierValue = identity;

$("forgotDestination").innerText =
        mask(identity);

clearOTP("#screenForgotOTP");

showScreen("ForgotOTP");
}

function verifyForgotOTP(){

const otp =
        getOTP("#screenForgotOTP");

if(otp.length !== 6){

showError(
            "forgotOTPError",
            "Please enter the complete 6-digit OTP."
        );

return;
    }

if(otp !== "123456"){

showError(
            "forgotOTPError",
            "Invalid OTP. For this demo use 123456."
        );

return;
    }

$("newPassword").value = "";
    $("newPasswordConfirm").value = "";

showScreen("NewPassword");
}

function saveNewPassword(){

const password =
        $("newPassword").value;

const confirm =
        $("newPasswordConfirm").value;

if(password.length < 6){

showError(
            "newPasswordError",
            "Password must contain at least 6 characters."
        );

return;
    }

if(password !== confirm){

showError(
            "newPasswordError",
            "Passwords do not match."
        );

return;
    }

showScreen(1);

$("identityInput").value =
        identifierValue;

alert("Password updated successfully.");
}

/* =========================================================
   CONNECTION
========================================================= */

function startConnection(){

showScreen("Connecting");

$("progressFill").style.width = "0%";

setTimeout(() => {

$("progressFill").style.width = "100%";

},100);

setTimeout(() => {

showScreen("Success");

},3000);
}

function openDashboard(){

alert(
        "FiberNet Customer Dashboard\n\n" +
        "Connect this button to your Odoo 19 portal route."
    );

}

/* =========================================================
   OTP UTILITIES
========================================================= */

function getOTP(selector){

let value = "";

document
        .querySelectorAll(selector + " .otp")
        .forEach(input => {
            value += input.value;
        });

return value;
}

function clearOTP(selector){

document
        .querySelectorAll(selector + " .otp")
        .forEach(input => {
            input.value = "";
        });

document
        .querySelectorAll(selector + " .error")
        .forEach(error => {
            error.classList.remove("show");
        });
}

function startTimer(
    textId,
    buttonId,
    resendFunction
){

clearInterval(timer);

timerSeconds = 30;

$(textId).style.display = "inline";
    $(buttonId).style.display = "none";

updateTimer(textId);

timer = setInterval(() => {

timerSeconds--;

updateTimer(textId);

if(timerSeconds <= 0){

clearInterval(timer);

$(textId).style.display = "none";
            $(buttonId).style.display = "inline";

}

},1000);
}

function updateTimer(id){

$(id).innerText =
        "Resend OTP in 00:" +
        String(timerSeconds).padStart(2,"0");
}

/* =========================================================
   OTP INPUT BEHAVIOR
========================================================= */

document.addEventListener("input",function(e){

if(!e.target.classList.contains("otp")){
        return;
    }

e.target.value =
        e.target.value.replace(/\D/g,"").slice(0,1);

if(
        e.target.value &&
        e.target.nextElementSibling &&
        e.target.nextElementSibling.classList.contains("otp")
    ){

e.target.nextElementSibling.focus();

}

});

document.addEventListener("keydown",function(e){

if(!e.target.classList.contains("otp")){
        return;
    }

if(
        e.key === "Backspace" &&
        !e.target.value
    ){

const previous =
            e.target.previousElementSibling;

if(
            previous &&
            previous.classList.contains("otp")
        ){

previous.focus();

}

});

document.addEventListener("paste",function(e){

if(!e.target.classList.contains("otp")){
        return;
    }

e.preventDefault();

const value =
        (e.clipboardData || window.clipboardData)
        .getData("text")
        .replace(/\D/g,"")
        .slice(0,6);

const parent =
        e.target.parentElement;

const inputs =
        parent.querySelectorAll(".otp");

value.split("").forEach((digit,index) => {

if(inputs[index]){
            inputs[index].value = digit;
        }

});

if(value.length === 6){
        inputs[5].focus();
    }

});

/* =========================================================
   PASSWORD VISIBILITY
========================================================= */

function togglePassword(id,button){

const input = $(id);

if(input.type === "password"){

input.type = "text";

}else{

input.type = "password";

}

/* =========================================================
   ERROR
========================================================= */

function showError(id,message){

const error = $(id);

error.innerText = message;

error.classList.add("show");

}

/* =========================================================
   MASK EMAIL / MOBILE
========================================================= */

function mask(value){

if(!value){
        return "—";
    }

if(value.includes("@")){

const parts =
            value.split("@");

const name =
            parts[0];

const masked =
            name.length > 2
            ? name.slice(0,2) + "•••"
            : "•••";

return masked + "@" + parts[1];

}

const digits =
        value.replace(/\D/g,"");

if(digits.length >= 10){

return "+91 ••••• " +
            digits.slice(-4);

}

if(value.length > 4){

return value.slice(0,2) +
            "•••" +
            value.slice(-2);

}

return "••••••";
}

/* =========================================================
   ENTER KEY
========================================================= */

document.addEventListener(
    "keydown",
    function(e){

if(e.key !== "Enter"){
            return;
        }

const active =
            document.querySelector(
                ".screen.active"
            );

if(!active){
            return;
        }

switch(active.id){

case "screen1":
                continueIdentity();
                break;

case "screenLoginPassword":
                loginPassword();
                break;

case "screenLoginOTP":
                verifyLoginOTP();
                break;

case "screenSignupDetails":
                verifySignupDetails();
                break;

case "screenSignupOTP":
                verifySignupOTP();
                break;

case "screenSignupPassword":
                createPasswordAccount();
                break;

case "screenForgot":
                sendForgotOTP();
                break;

case "screenForgotOTP":
                verifyForgotOTP();
                break;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#159ee8">

<title>FiberNet — ISP Customer Portal</title>

:root{
    --blue:#159ee8;
    --blue2:#0b78c5;
    --cyan:#42c8ef;
    --green:#3bd59b;
    --green2:#1fb67d;

--ink:#123449;
    --muted:#7b94a5;

--border:#dcecf3;
    --soft:#f4fbfe;
    --white:#fff;

--danger:#ef6b73;

--shadow:0 35px 90px rgba(22,112,148,.14);
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    scrollbar-width:none;
}

*::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
}

html,
body{
    width:100%;
    min-height:100%;
    overflow:hidden;
}

body{
    font-family:Inter,sans-serif;
    color:var(--ink);
    background:#f6fcff;
}

button,
input{
    font-family:inherit;
}

button{
    cursor:pointer;
}

/* =========================================================
   PAGE
========================================================= */

.page{
    width:100%;
    height:100vh;
    min-height:100vh;

display:flex;
    align-items:center;
    justify-content:center;

padding:30px;

overflow:hidden;
}

.app{
    width:min(1180px,100%);
    height:min(720px,calc(100vh - 60px));

background:#fff;

border:1px solid #e2f0f5;
    border-radius:32px;

overflow:hidden;

box-shadow:var(--shadow);

display:grid;
    grid-template-columns:46% 54%;
}

/* =========================================================
   LEFT ISP AREA
========================================================= */

.connection-area{
    position:relative;
    overflow:hidden;

background:
        radial-gradient(
            circle at 20% 25%,
            rgba(66,200,239,.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(59,213,155,.13),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #f3fbff,
            #f8fffc
        );

padding:45px;
}

.ring{
    position:absolute;
    border:1px solid rgba(21,158,232,.1);
    border-radius:50%;
    pointer-events:none;
}

.r1{
    width:500px;
    height:500px;
    left:-320px;
    top:100px;
}

.r2{
    width:700px;
    height:700px;
    left:-420px;
    top:0;
}

.r3{
    width:900px;
    height:900px;
    left:-520px;
    top:-100px;
}

/* =========================================================
   BRAND
========================================================= */

.brand{
    position:relative;
    z-index:5;

display:flex;
    align-items:center;
    gap:12px;
}

.logo{
    width:45px;
    height:45px;

border-radius:14px;

display:grid;
    place-items:center;

color:#fff;

font-size:19px;
    font-weight:800;

background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

box-shadow:
        0 12px 25px rgba(21,158,232,.2);
}

.brand-name{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.7px;
}

.brand-name span{
    color:var(--blue);
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.connection-content{
    position:relative;
    z-index:5;

margin-top:90px;
}

.connection-label{
    display:inline-flex;
    align-items:center;
    gap:8px;

padding:8px 13px;

background:#fff;

border:1px solid #dceef4;
    border-radius:30px;

color:var(--green2);

font-size:10px;
    font-weight:800;
    letter-spacing:.8px;
}

.live{
    width:7px;
    height:7px;

border-radius:50%;

background:var(--green);

box-shadow:
        0 0 0 5px rgba(59,213,155,.13);

animation:livePulse 1.8s infinite;
}

@keyframes livePulse{
    0%,100%{
        transform:scale(1);
        opacity:1;
    }

50%{
        transform:scale(.7);
        opacity:.6;
    }
}

.connection-content h1{
    margin-top:20px;

font-size:43px;
    line-height:1.08;

letter-spacing:-2px;
}

.connection-content h1 span{
    color:var(--blue);
}

.connection-content p{
    margin-top:18px;

max-width:390px;

color:var(--muted);

font-size:13px;
    line-height:1.8;
}

/* =========================================================
   NETWORK
========================================================= */

.network-machine{
    position:relative;

height:225px;

margin-top:15px;
}

.router{
    position:absolute;

width:108px;
    height:108px;

left:50%;
    top:48%;

transform:translate(-50%,-50%);

border-radius:28px;

background:#fff;

border:1px solid #cdebf4;

box-shadow:
        0 0 0 10px rgba(255,255,255,.7),
        0 20px 40px rgba(29,129,163,.15);

display:flex;
    align-items:center;
    justify-content:center;

z-index:5;
}

.router-body{
    width:55px;
    height:40px;

border-radius:10px;

background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

position:relative;

box-shadow:
        0 10px 20px rgba(21,158,232,.25);
}

.router-body:before{
    content:"";

position:absolute;

left:12px;
    right:12px;
    bottom:8px;

height:4px;

border-radius:5px;

background:rgba(255,255,255,.8);
}

.router-body:after{
    content:"";

position:absolute;

width:6px;
    height:6px;

border-radius:50%;

top:8px;
    right:10px;

background:var(--green);
}

.router-antenna{
    position:absolute;

width:2px;
    height:27px;

background:#74b8d1;

top:-24px;
}

.a1{
    left:32px;
    transform:rotate(-15deg);
}

.a2{
    right:32px;
    transform:rotate(15deg);
}

.net-node{
    position:absolute;

width:43px;
    height:43px;

border-radius:50%;

background:#fff;

border:1px solid #d3ebf2;

box-shadow:
        0 10px 25px rgba(33,124,154,.1);

display:grid;
    place-items:center;

z-index:4;
}

.net-node:after{
    content:"";

width:11px;
    height:11px;

border-radius:50%;

background:var(--green);

box-shadow:
        0 0 0 5px rgba(59,213,155,.1);
}

.node1{
    left:4%;
    top:45px;
}

.node2{
    right:4%;
    top:30px;
}

.node3{
    left:18%;
    bottom:15px;
}

.node4{
    right:17%;
    bottom:5px;
}

.fiber{
    position:absolute;

height:2px;

transform-origin:left center;

background:
        linear-gradient(
            90deg,
            rgba(21,158,232,.08),
            var(--blue),
            rgba(59,213,155,.15)
        );

z-index:2;
}

.f1{
    width:250px;
    left:9%;
    top:100px;
    transform:rotate(8deg);
}

.f2{
    width:250px;
    left:51%;
    top:90px;
    transform:rotate(-13deg);
}

.f3{
    width:230px;
    left:19%;
    top:145px;
    transform:rotate(24deg);
}

.f4{
    width:220px;
    left:52%;
    top:145px;
    transform:rotate(26deg);
}

.packet{
    position:absolute;

width:8px;
    height:8px;

border-radius:50%;

background:var(--green);

box-shadow:
        0 0 0 5px rgba(59,213,155,.1);

z-index:6;

animation:packetMove 3s linear infinite;
}

.p1{
    top:97px;
    left:14%;
}

.p2{
    top:91px;
    left:63%;
    animation-delay:1s;
}

.p3{
    top:148px;
    left:29%;
    animation-delay:1.7s;
}

@keyframes packetMove{
    0%{
        opacity:0;
        transform:scale(.5);
    }

20%{
        opacity:1;
    }

70%{
        opacity:1;
        transform:scale(1.2);
    }

100%{
        opacity:0;
        transform:scale(.5);
    }
}

/* =========================================================
   STATUS
========================================================= */

.network-status{
    position:relative;

display:flex;
    align-items:center;
    justify-content:space-between;

padding:14px 16px;

border-radius:16px;

background:rgba(255,255,255,.82);

border:1px solid #dceef3;
}

.status-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.status-icon{
    width:33px;
    height:33px;

border-radius:10px;

background:#edfff7;

display:grid;
    place-items:center;

color:var(--green2);

font-size:13px;
}

.status-title{
    font-size:11px;
    font-weight:800;
}

.status-sub{
    margin-top:3px;

font-size:9px;

color:var(--muted);
}

.status-right{
    font-size:10px;
    font-weight:800;
    color:var(--green2);
}

/* =========================================================
   AUTH AREA
========================================================= */

.auth-area{
    position:relative;

padding:45px;

display:flex;
    align-items:center;
    justify-content:center;

background:#fff;

overflow:hidden;
}

.auth{
    width:100%;
    max-width:420px;
    max-height:100%;
}

/* =========================================================
   PROGRESS
========================================================= */

.progress{
    display:flex;
    align-items:center;

margin-bottom:30px;
}

.progress-item{
    display:flex;
    align-items:center;
    flex:1;
}

.progress-item:last-child{
    flex:0;
}

.progress-circle{
    width:30px;
    height:30px;

min-width:30px;

border-radius:50%;

display:grid;
    place-items:center;

background:#f1f7fa;

border:1px solid #dcecf2;

color:#94a9b6;

font-size:10px;
    font-weight:800;

transition:.4s;
}

.progress-line{
    width:100%;
    height:2px;

background:#e6f0f4;

margin:0 7px;

transition:.5s;
}

.progress-item.active .progress-circle{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;

box-shadow:
        0 0 0 5px rgba(21,158,232,.08);
}

.progress-item.done .progress-circle{
    background:var(--green);
    border-color:var(--green);
    color:#fff;
}

.progress-item.done .progress-line{
    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );
}

/* =========================================================
   SCREENS
========================================================= */

.screen{
    display:none;

animation:
        screenIn .4s ease;
}

.screen.active{
    display:block;
}

@keyframes screenIn{
    from{
        opacity:0;
        transform:translateX(15px);
    }

to{
        opacity:1;
        transform:translateX(0);
    }
}

.kicker{
    color:var(--blue);

font-size:10px;
    font-weight:800;

letter-spacing:1.4px;

text-transform:uppercase;
}

.auth h2{
    margin-top:9px;

font-size:31px;

letter-spacing:-1.4px;
}

.auth-description{
    margin-top:9px;

color:var(--muted);

font-size:12px;
    line-height:1.7;
}

/* =========================================================
   INPUTS
========================================================= */

.field{
    margin-top:18px;
}

.field label{
    display:block;

margin-bottom:8px;

font-size:10px;

color:#527083;

font-weight:800;

letter-spacing:.3px;
}

.input{
    width:100%;
    height:53px;

border:1px solid var(--border);

border-radius:14px;

outline:none;

background:#fbfdfe;

padding:0 17px;

color:var(--ink);

font-size:13px;

transition:.25s;
}

.input:focus{
    background:#fff;

border-color:#7dccec;

box-shadow:
        0 0 0 4px rgba(21,158,232,.07);
}

/* =========================================================
   CUSTOMER TYPE / METHODS
========================================================= */

.customer-type,
.method-buttons{
    display:grid;

grid-template-columns:1fr 1fr;

gap:8px;

margin-top:20px;
}

.customer-type button,
.method{
    min-height:65px;

border:1px solid var(--border);

background:#fbfdfe;

border-radius:13px;

font-size:10px;

font-weight:700;

color:var(--muted);

transition:.2s;
}

.customer-type button:hover,
.method:hover{
    border-color:#91d4ee;
    transform:translateY(-1px);
}

.customer-type button.selected,
.method.selected{
    background:#effaff;

border-color:#91d4ee;

color:var(--blue2);
}

/* =========================================================
   BUTTONS
========================================================= */

.primary{
    width:100%;
    min-height:54px;

margin-top:18px;

border:0;

border-radius:15px;

color:#fff;

background:
        linear-gradient(
            100deg,
            var(--blue),
            #27b8dd,
            var(--green)
        );

font-size:11px;

font-weight:800;

letter-spacing:.3px;

box-shadow:
        0 14px 28px rgba(24,164,207,.2);

transition:.25s;
}

.primary:hover{
    transform:translateY(-2px);

box-shadow:
        0 18px 35px rgba(24,164,207,.25);
}

.secondary{
    width:100%;
    height:48px;

margin-top:10px;

border:1px solid var(--border);

border-radius:13px;

color:var(--blue2);

background:#fff;

font-size:10px;
    font-weight:800;
}

.link-row{
    display:flex;

justify-content:center;
    align-items:center;

gap:5px;

margin-top:17px;

font-size:10px;

color:var(--muted);
}

.link{
    border:0;

background:none;

color:var(--blue2);

font-size:10px;

font-weight:800;
}

.security{
    display:flex;

justify-content:center;
    align-items:center;

gap:6px;

margin-top:20px;

color:#9aadb7;

font-size:9px;
}

.lock{
    width:15px;
    height:15px;

border-radius:5px;

display:grid;
    place-items:center;

color:var(--green2);

background:#edfff7;
}

/* =========================================================
   METHOD CARDS
========================================================= */

.method{
    min-height:90px;

text-align:left;

padding:14px;
}

.method strong{
    display:block;

font-size:11px;

color:var(--ink);
}

.method span{
    display:block;

margin-top:7px;

font-size:9px;

line-height:1.5;

color:var(--muted);
}

/* =========================================================
   CONNECTING
========================================================= */

.connect-screen,
.success-screen{
    text-align:center;
}

.connect-screen{
    padding-top:15px;
}

.connect-icon{
    width:100px;
    height:100px;

margin:0 auto 27px;

border-radius:50%;

display:grid;
    place-items:center;

position:relative;

background:#f0fbff;

border:1px solid #c8eaf5;
}

.connect-icon:before,
.connect-icon:after{
    content:"";

position:absolute;

border:1px solid rgba(21,158,232,.25);

border-radius:50%;

animation:ripple 2s infinite;
}

.connect-icon:before{
    inset:-12px;
}

.connect-icon:after{
    inset:-24px;

animation-delay:.5s;
}

@keyframes ripple{
    0%{
        opacity:1;
        transform:scale(.85);
    }

100%{
        opacity:0;
        transform:scale(1.2);
    }
}

.connect-router{
    width:42px;
    height:30px;

border-radius:8px;

background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

position:relative;
}

.connect-router:after{
    content:"";

position:absolute;

width:5px;
    height:5px;

border-radius:50%;

background:var(--green);

top:7px;
    right:7px;
}

.loading-line{
    width:100%;
    height:5px;

background:#edf5f8;

border-radius:10px;

overflow:hidden;

margin-top:25px;
}

.loading-progress{
    height:100%;

width:0;

background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );

border-radius:10px;

transition:
        width 2.8s linear;
}

/* =========================================================
   SUCCESS
========================================================= */

.success-circle{
    width:95px;
    height:95px;

margin:0 auto 25px;

border-radius:50%;

display:grid;
    place-items:center;

background:#edfff7;

border:1px solid #bdeedb;

color:var(--green2);

font-size:37px;

animation:
        successPop .6s ease;
}

@keyframes successPop{
    0%{
        transform:scale(.5);
        opacity:0;
    }

70%{
        transform:scale(1.08);
    }

100%{
        transform:scale(1);
        opacity:1;
    }
}

.connection-card{
    margin-top:22px;

padding:16px;

border-radius:15px;

background:#f7fcfe;

border:1px solid #e2eff4;

text-align:left;
}

.connection-row{
    display:flex;

justify-content:space-between;

padding:7px 0;

font-size:10px;
}

.connection-row span{
    color:var(--muted);
}

.connection-row strong{
    color:var(--ink);
}

/* =========================================================
   MODAL
========================================================= */

.modal-overlay{
    position:fixed;

inset:0;

z-index:1000;

display:none;

align-items:center;
    justify-content:center;

padding:20px;

background:
        rgba(12,48,67,.38);

backdrop-filter:blur(8px);

overflow:hidden;
}

.modal-overlay.active{
    display:flex;
}

.modal{
    width:min(430px,100%);

max-height:calc(100vh - 40px);

overflow-y:auto;
    overflow-x:hidden;

background:#fff;

border:1px solid #dcecf3;

border-radius:25px;

padding:30px;

box-shadow:
        0 35px 90px rgba(10,72,96,.25);

animation:
        modalIn .35s cubic-bezier(.2,.8,.2,1);

position:relative;
}

@keyframes modalIn{
    from{
        opacity:0;

transform:
            translateY(25px)
            scale(.94);
    }

to{
        opacity:1;

transform:
            translateY(0)
            scale(1);
    }
}

.modal-close{
    position:absolute;

right:17px;
    top:17px;

width:34px;
    height:34px;

border-radius:10px;

border:1px solid var(--border);

background:#f7fbfd;

color:var(--muted);

font-size:17px;
}

.modal-close:hover{
    background:#effaff;
    color:var(--blue2);
}

.modal-icon{
    width:54px;
    height:54px;

border-radius:16px;

display:grid;
    place-items:center;

background:#eaf8fe;

color:var(--blue2);

font-size:22px;

margin-bottom:18px;
}

.modal h3{
    font-size:24px;

letter-spacing:-1px;
}

.modal p{
    margin-top:8px;

color:var(--muted);

font-size:11px;

line-height:1.7;
}

.modal-step{
    margin-top:10px;

font-size:9px;

color:var(--blue2);

font-weight:800;

text-transform:uppercase;

letter-spacing:1px;
}

/* =========================================================
   PASSWORD
========================================================= */

.password-wrap{
    position:relative;
}

.password-wrap .input{
    padding-right:50px;
}

.eye{
    position:absolute;

right:10px;
    top:9px;

width:35px;
    height:35px;

border:0;

background:transparent;

color:var(--muted);
}

.modal-options{
    display:flex;

justify-content:space-between;
    align-items:center;

gap:10px;

margin-top:12px;
}

.remember{
    display:flex;

align-items:center;

gap:6px;

color:var(--muted);

font-size:9px;
}

.remember input{
    accent-color:var(--blue);
}

/* =========================================================
   OTP
========================================================= */

.otp-inputs{
    display:grid;

grid-template-columns:
        repeat(6,1fr);

gap:7px;

margin-top:22px;
}

.otp{
    width:100%;
    height:52px;

border:1px solid var(--border);

border-radius:12px;

background:#fbfdfe;

outline:none;

text-align:center;

font-size:17px;

font-weight:800;

color:var(--blue2);
}

.otp:focus{
    border-color:#76caea;

background:#fff;

box-shadow:
        0 0 0 4px rgba(21,158,232,.07);
}

.otp-info{
    margin-top:15px;

padding:11px;

border-radius:12px;

background:#f4fbfe;

border:1px solid #e0f0f5;

text-align:center;

font-size:9px;

color:var(--muted);
}

.otp-info strong{
    color:var(--ink);
}

.resend{
    text-align:center;

margin-top:13px;

font-size:9px;

color:var(--muted);
}

.resend button{
    border:0;

background:none;

color:var(--blue2);

font-weight:800;
}

/* =========================================================
   ERRORS
========================================================= */

.modal-error{
    display:none;

margin-top:13px;

padding:10px;

border-radius:10px;

background:#fff3f3;

border:1px solid #ffd5d5;

color:var(--danger);

font-size:9px;
}

.modal-error.show{
    display:block;
}

.modal-success{
    display:none;

margin-top:15px;

padding:12px;

border-radius:12px;

background:#edfff7;

border:1px solid #c9f1df;

color:var(--green2);

font-size:10px;

font-weight:700;

text-align:center;
}

.modal-success.show{
    display:block;
}

.terms{
    display:flex;

gap:8px;

margin-top:15px;

color:var(--muted);

font-size:9px;

line-height:1.5;
}

.terms input{
    margin-top:2px;

accent-color:var(--blue);
}

/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

left:50%;
    bottom:25px;

transform:
        translate(-50%,20px);

z-index:2000;

padding:13px 18px;

border-radius:13px;

background:#123449;

color:#fff;

font-size:10px;

font-weight:700;

opacity:0;

pointer-events:none;

transition:.3s;
}

.toast.show{
    opacity:1;

transform:
        translate(-50%,0);
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

.page{
        padding:20px;
    }

.app{
        height:calc(100vh - 40px);

grid-template-columns:44% 56%;

border-radius:27px;
    }

.connection-area{
        padding:32px;
    }

.auth-area{
        padding:32px;
    }

.connection-content{
        margin-top:70px;
    }

.connection-content h1{
        font-size:36px;
    }

.network-machine{
        transform:scale(.9);

transform-origin:left center;

width:111%;
    }
}

/* =========================================================
   MOBILE / TABLET PORTRAIT
========================================================= */

@media(max-width:900px){

html,
    body{
        height:100%;
        overflow:hidden;
    }

.page{
        height:100vh;
        min-height:100vh;

padding:12px;

align-items:stretch;

overflow:hidden;
    }

.app{
        width:100%;
        height:calc(100vh - 24px);

min-height:0;

grid-template-columns:1fr;

grid-template-rows:
            minmax(330px,43%)
            1fr;

border-radius:25px;
    }

.connection-area{
        min-height:0;

padding:27px 32px;

overflow:hidden;
    }

.connection-content{
        margin-top:40px;
    }

.connection-content h1{
        font-size:34px;
    }

.connection-content p{
        max-width:500px;
    }

.network-machine{
        height:150px;

margin-top:5px;

transform:scale(.72);

transform-origin:left top;

width:138%;
    }

.network-status{
        margin-top:-55px;
    }

.auth-area{
        padding:30px 32px 35px;

overflow:hidden;

align-items:center;
    }

.auth{
        max-height:100%;
    }

.progress{
        margin-bottom:20px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:600px){

body{
        background:#fff;
    }

.page{
        padding:0;

height:100dvh;
        min-height:100dvh;
    }

.app{
        width:100%;

height:100dvh;
        min-height:100dvh;

border:0;

border-radius:0;

box-shadow:none;

grid-template-rows:
            38% 62%;
    }

.connection-area{
        padding:20px;

min-height:0;
    }

.brand{
        gap:9px;
    }

.logo{
        width:38px;
        height:38px;

border-radius:12px;

font-size:16px;
    }

.brand-name{
        font-size:17px;
    }

.connection-content{
        margin-top:28px;
    }

.connection-label{
        font-size:8px;

padding:7px 10px;
    }

.connection-content h1{
        margin-top:12px;

font-size:27px;

letter-spacing:-1.2px;
    }

.connection-content p{
        margin-top:10px;

font-size:10px;

line-height:1.5;

max-width:330px;
    }

.network-machine{
        height:105px;

margin-top:0;

transform:scale(.55);

transform-origin:left top;

width:182%;
    }

.network-status{
        margin-top:-75px;

padding:9px 11px;

border-radius:12px;
    }

.status-icon{
        width:27px;
        height:27px;

border-radius:8px;
    }

.status-title{
        font-size:9px;
    }

.status-sub{
        font-size:7px;
    }

.status-right{
        font-size:8px;
    }

.auth-area{
        padding:20px 20px 25px;

align-items:flex-start;

overflow:hidden;
    }

.auth{
        max-width:100%;
    }

.progress{
        margin-bottom:18px;
    }

.progress-circle{
        width:26px;
        height:26px;
        min-width:26px;

font-size:8px;
    }

.progress-line{
        margin:0 4px;
    }

.kicker{
        font-size:8px;

letter-spacing:1px;
    }

.auth h2{
        font-size:25px;

letter-spacing:-1px;
    }

.auth-description{
        font-size:10px;

line-height:1.55;
    }

.customer-type,
    .method-buttons{
        margin-top:14px;
    }

.customer-type button{
        min-height:48px;

font-size:9px;
    }

.field{
        margin-top:13px;
    }

.field label{
        font-size:8px;

margin-bottom:6px;
    }

.input{
        height:47px;

border-radius:12px;

font-size:11px;

padding:0 13px;
    }

.primary{
        min-height:48px;

margin-top:14px;

border-radius:12px;

font-size:9px;
    }

.link-row{
        margin-top:11px;

font-size:8px;
    }

.link{
        font-size:8px;
    }

.security{
        margin-top:12px;

font-size:7px;
    }

/* Modal */

.modal-overlay{
        padding:10px;
    }

.modal{
        width:100%;

max-height:
            calc(100dvh - 20px);

border-radius:20px;

padding:22px 18px;
    }

.modal-close{
        width:31px;
        height:31px;

right:12px;
        top:12px;
    }

.modal-icon{
        width:47px;
        height:47px;

border-radius:13px;

font-size:19px;

margin-bottom:13px;
    }

.modal h3{
        font-size:21px;
    }

.modal p{
        font-size:9px;
    }

.modal-step{
        font-size:8px;
    }

.method{
        min-height:75px;

padding:10px;
    }

.method strong{
        font-size:9px;
    }

.method span{
        margin-top:5px;

font-size:7px;
    }

.otp-inputs{
        gap:4px;

margin-top:16px;
    }

.otp{
        height:44px;

border-radius:9px;

font-size:15px;
    }

.otp-info{
        margin-top:11px;

padding:9px;

font-size:8px;
    }

.terms{
        font-size:8px;
    }

.remember{
        font-size:8px;
    }

.modal-options{
        gap:5px;
    }

.modal-options .link{
        font-size:8px;
    }

.toast{
        bottom:15px;

width:calc(100% - 30px);

text-align:center;
    }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:380px){

.app{
        grid-template-rows:
            36% 64%;
    }

.connection-content h1{
        font-size:24px;
    }

.connection-content p{
        font-size:9px;
    }

.network-machine{
        transform:scale(.46);

width:210%;
    }

.network-status{
        margin-top:-82px;
    }

.auth-area{
        padding:16px;
    }

.auth h2{
        font-size:22px;
    }

.auth-description{
        font-size:9px;
    }

.progress{
        margin-bottom:13px;
    }

.customer-type button{
        min-height:43px;
    }

.input{
        height:44px;
    }

.primary{
        min-height:45px;
    }
}

/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media(max-height:600px) and (orientation:landscape){

.page{
        padding:8px;
    }

.app{
        height:calc(100vh - 16px);

grid-template-columns:
            42% 58%;

grid-template-rows:1fr;
    }

.connection-area{
        padding:18px;
    }

.connection-content{
        margin-top:20px;
    }

.connection-content h1{
        font-size:25px;
    }

.connection-content p{
        font-size:9px;

margin-top:8px;
    }

.network-machine{
        height:100px;

transform:scale(.55);

width:180%;
    }

.network-status{
        margin-top:-65px;
    }

.auth-area{
        padding:18px 25px;

align-items:center;
    }

.progress{
        margin-bottom:12px;
    }

.auth h2{
        font-size:23px;
    }

.field{
        margin-top:9px;
    }

.input{
        height:40px;
    }

.primary{
        min-height:40px;

margin-top:10px;
    }

.link-row{
        margin-top:8px;
    }
}
</style>
</head>

<body>

<div class="brand-name">
            Fiber<span>Net</span>
        </div>

</div>

ISP NETWORK ONLINE

</div>

<h1>
            Your internet.<br>
            <span>Your control.</span>
        </h1>

<p>
            Securely access your FiberNet customer portal,
            manage your broadband connection, pay bills,
            upgrade plans and stay connected.
        </p>

</div>

<div>

<div class="status-title">
                        Fiber Network
                    </div>

<div class="status-sub">
                        Broadband services operational
                    </div>

</div>

<div class="status-right">
                ● STABLE
            </div>

</div>

</section>

</div>

</div>

</div>

</div>

<div class="kicker">
        ISP CUSTOMER PORTAL
    </div>

<h2>
        Welcome to FiberNet
    </h2>

<p class="auth-description">
        Access your broadband account using your
        registered email, mobile number or customer ID.
    </p>

<button
            class="selected"
            data-type="mobile"
            onclick="selectIdentifier(this)">
            Mobile Number
        </button>

<button
            data-type="email"
            onclick="selectIdentifier(this)">
            Email Address
        </button>

</div>

<label id="identifierLabel">
            REGISTERED MOBILE NUMBER
        </label>

</div>

<button
        class="primary"
        onclick="findCustomer()">
        CONTINUE →
    </button>

<span>
            New FiberNet customer?
        </span>

<button
            class="link"
            onclick="openSignup()">
            Create Account
        </button>

</div>

<button
            class="link"
            onclick="openForgot()">
            Forgot Password?
        </button>

</div>

Secure ISP customer authentication

</div>

<div class="kicker">
        CUSTOMER VERIFIED
    </div>

<h2>
        Choose your login
    </h2>

<p class="auth-description">
        Your FiberNet account was found.
        Select how you want to authenticate.
    </p>

<strong>
                📱 Login with OTP
            </strong>

<span>
                Receive a secure one-time
                verification code.
            </span>

</button>

<strong>
                🔐 Login with Password
            </strong>

<span>
                Use your existing FiberNet
                account password.
            </span>

</button>

</div>

<button
        class="primary"
        onclick="openLoginOTP()">
        CONTINUE WITH OTP →
    </button>

<button
            class="link"
            onclick="openForgot()">
            Forgot your password?
        </button>

</div>

Protected ISP authentication

</div>

</div>

<div class="kicker">
            AUTHENTICATED
        </div>

<h2>
            Connecting your account
        </h2>

<p class="auth-description">
            We're securely preparing your
            FiberNet customer dashboard.
        </p>

</div>

<div class="kicker">
            CONNECTION VERIFIED
        </div>

<h2>
            You're connected!
        </h2>

<p class="auth-description">
            Your FiberNet customer account has
            been successfully authenticated.
        </p>

<span>
                    Customer
                </span>

<strong id="successCustomer">
                    FiberNet Customer
                </strong>

</div>

<span>
                    Connection
                </span>

<strong>
                    Fiber Broadband
                </strong>

</div>

<span>
                    Service
                </span>

<strong style="color:#20b87b">
                    ● Active
                </strong>

</div>

<span>
                    Authentication
                </span>

<strong>
                    Verified
                </strong>

</div>

<button
            class="primary"
            onclick="openDashboard()">
            ENTER CUSTOMER DASHBOARD →
        </button>

Secure ISP session established

</div>

</section>

</div>

<div class="modal-step">
                LOGIN • PASSWORD
            </div>

<h3>
                Sign in securely
            </h3>

<p>
                Enter your FiberNet account password
                to access your internet dashboard.
            </p>

<label>
                    EMAIL / MOBILE
                </label>

</div>

<label>
                    ACCOUNT PASSWORD
                </label>

</div>

Remember this device

</label>

<button
                    class="link"
                    onclick="closeModal();openForgot()">
                    Forgot password?
                </button>

</div>

<button
                class="primary"
                onclick="submitPasswordLogin()">
                LOGIN TO FIBERNET →
            </button>

</div>

<div
                class="modal-step"
                id="otpStep">
                VERIFICATION
            </div>

<h3 id="otpTitle">
                Verify your account
            </h3>

<p id="otpDescription">
                Enter the 6-digit OTP sent to
                your registered contact.
            </p>

Code sent to

</div>

</div>

<div
                class="modal-success"
                id="otpSuccess">
                ✓ Verification successful
            </div>

<button
                class="primary"
                onclick="verifyOTP()">
                VERIFY OTP →
            </button>

<span id="resendText">
                    Resend OTP in 00:30
                </span>

<button
                    id="resendButton"
                    style="display:none"
                    onclick="resendOTP()">
                    Resend OTP
                </button>

</div>

<button
                    class="link"
                    onclick="changeIdentifier()">
                    Change Email / Mobile Number
                </button>

</div>

<div class="modal-step">
                NEW CUSTOMER
            </div>

<h3>
                Create your account
            </h3>

<p>
                Choose how you want to create
                your FiberNet account.
            </p>

<strong>
                        🔐 Signup with Password
                    </strong>

<span>
                        Create an account using your
                        email or mobile and password.
                    </span>

</button>

<strong>
                        📱 Signup with OTP
                    </strong>

<span>
                        Create your account using
                        one-time verification.
                    </span>

</button>

</div>

<div class="modal-step">
                SIGNUP • DETAILS
            </div>

<h3>
                Create your FiberNet account
            </h3>

<p>
                Enter your details and create a secure
                password. Your email/mobile will be
                verified before account creation.
            </p>

</div>

<label>
                    EMAIL OR MOBILE NUMBER
                </label>

</div>

<label>
                    CREATE PASSWORD
                </label>

</div>

<label>
                    CONFIRM PASSWORD
                </label>

</div>

<span>
                    I agree to the FiberNet Terms &
                    Conditions and Privacy Policy.
                </span>

</label>

<button
                class="primary"
                onclick="submitSignupPassword()">
                VERIFY DETAILS & SEND OTP →
            </button>

</div>

<div class="modal-step">
                SIGNUP • DETAILS
            </div>

<h3>
                Create account with OTP
            </h3>

<p>
                Enter your name and email or mobile
                number to receive a verification code.
            </p>

</div>

<label>
                    EMAIL OR MOBILE NUMBER
                </label>

</div>

<button
                class="primary"
                onclick="submitSignupOTP()">
                VERIFY DETAILS & SEND OTP →
            </button>

</div>

<div class="modal-step">
                ACCOUNT RECOVERY
            </div>

<h3>
                Reset your password
            </h3>

<p>
                Enter your registered email or mobile
                number. We'll send you an OTP.
            </p>

<label>
                    EMAIL OR MOBILE NUMBER
                </label>

</div>

<button
                class="primary"
                onclick="submitForgot()">
                SEND RECOVERY OTP →
            </button>

</div>

<div class="modal-step">
                RECOVERY • STEP 2 OF 2
            </div>

<h3>
                Create a new password
            </h3>

<p>
                Your account has been verified.
                Choose a new secure password.
            </p>

<label>
                    NEW PASSWORD
                </label>

</div>

<label>
                    CONFIRM NEW PASSWORD
                </label>

</div>

<div
                class="modal-success"
                id="newPasswordSuccess">
                ✓ Password changed successfully.
            </div>

<button
                class="primary"
                id="resetPasswordButton"
                onclick="resetPassword()">
                RESET PASSWORD →
            </button>

</div>

/* =========================================================
   STATE
========================================================= */

let identifierType = "mobile";

let identifierValue = "";

let authMethod = "";

let currentFlow = "";

let resendTimer = null;

let secondsLeft = 30;

/* =========================================================
   HELPER
========================================================= */

function $(id){
    return document.getElementById(id);
}

/* =========================================================
   TOAST
========================================================= */

function showToast(message){

const toast = $("toast");

toast.innerText = message;

toast.classList.add("show");

setTimeout(() => {

toast.classList.remove("show");

},2500);

}

/* =========================================================
   IDENTIFIER
========================================================= */

function selectIdentifier(button){

document
        .querySelectorAll(".customer-type button")
        .forEach(btn => {

btn.classList.remove("selected");

});

button.classList.add("selected");

identifierType =
        button.dataset.type;

const input =
        $("customerInput");

const label =
        $("identifierLabel");

if(identifierType === "email"){

label.innerText =
            "REGISTERED EMAIL ADDRESS";

input.type = "email";

input.placeholder =
            "customer@example.com";

}else{

label.innerText =
            "REGISTERED MOBILE NUMBER";

input.type = "tel";

input.placeholder =
            "+91 98765 43210";

}

/* =========================================================
   SCREEN
========================================================= */

function showScreen(number){

document
        .querySelectorAll(".screen")
        .forEach(screen => {

screen.classList.remove("active");

});

const target =
        $("screen" + number);

if(target){
        target.classList.add("active");
    }

updateProgress(number);

}

/* =========================================================
   PROGRESS
========================================================= */

function updateProgress(number){

for(let i=1;i<=4;i++){

const step =
            $("step" + i);

step.classList.remove("active");
        step.classList.remove("done");

if(i < number){
            step.classList.add("done");
        }

if(i === number){
            step.classList.add("active");
        }

}

/* =========================================================
   FIND CUSTOMER
========================================================= */

function findCustomer(){

const value =
        $("customerInput")
        .value
        .trim();

if(!value){

showToast(
            "Please enter your email or mobile number."
        );

$("customerInput").focus();

return;
    }

identifierValue = value;

showScreen(2);

}

/* =========================================================
   MODAL
========================================================= */

function hideModalContents(){

document
        .querySelectorAll(".modal-content")
        .forEach(content => {

content.style.display = "none";

});

}

function openModal(contentId){

hideModalContents();

$(contentId).style.display =
        "block";

$("modalOverlay")
        .classList
        .add("active");

document.body.style.overflow =
        "hidden";

}

function closeModal(){

$("modalOverlay")
        .classList
        .remove("active");

document.body.style.overflow =
        "hidden";

hideModalContents();

clearErrors();

}

function overlayClose(event){

if(
        event.target ===
        $("modalOverlay")
    ){

closeModal();

}

function clearErrors(){

document
        .querySelectorAll(".modal-error")
        .forEach(error => {

error.classList.remove("show");

error.innerText = "";

});

}

/* =========================================================
   LOGIN OTP
========================================================= */

function openLoginOTP(){

authMethod = "otp";

currentFlow = "login";

openModal("otpModal");

$("otpTitle").innerText =
        "Verify your account";

$("otpDescription").innerText =
        "Enter the 6-digit OTP sent to your registered contact.";

$("otpStep").innerText =
        "LOGIN • STEP 2 OF 2";

$("otpDestination").innerText =
        maskIdentifier(identifierValue);

clearOTP();

startResendTimer();

focusFirstOTP();

}

/* =========================================================
   LOGIN PASSWORD
========================================================= */

function openLoginPassword(){

authMethod = "password";

currentFlow = "login";

openModal(
        "loginPasswordModal"
    );

$("loginPasswordIdentity").value =
        identifierValue;

setTimeout(() => {

$("loginPassword").focus();

},250);

}

/* =========================================================
   PASSWORD LOGIN
========================================================= */

function submitPasswordLogin(){

const password =
        $("loginPassword")
        .value
        .trim();

if(!password){

showError(
            "loginPasswordError",
            "Please enter your FiberNet account password."
        );

return;

}

closeModal();

startConnection();

}

/* =========================================================
   SIGNUP
========================================================= */

function openSignup(){

currentFlow = "signup";

openModal(
        "signupMethodModal"
    );

}

function openSignupPassword(){

currentFlow =
        "signup-password";

openModal(
        "signupPasswordModal"
    );

}

function openSignupOTP(){

currentFlow =
        "signup-otp";

openModal(
        "signupOTPModal"
    );

}

/* =========================================================
   SIGNUP PASSWORD
========================================================= */

function submitSignupPassword(){

const name =
        $("signupName")
        .value
        .trim();

const identity =
        $("signupIdentity")
        .value
        .trim();

const password =
        $("signupPassword")
        .value;

const confirm =
        $("signupConfirm")
        .value;

const terms =
        $("terms")
        .checked;

if(!name){

showError(
            "signupPasswordError",
            "Please enter your full name."
        );

return;
    }

if(!identity){

showError(
            "signupPasswordError",
            "Please enter your email or mobile number."
        );

return;
    }

if(!isValidIdentity(identity)){

showError(
            "signupPasswordError",
            "Please enter a valid email or mobile number."
        );

return;
    }

if(password.length < 6){

showError(
            "signupPasswordError",
            "Password must contain at least 6 characters."
        );

return;
    }

if(password !== confirm){

showError(
            "signupPasswordError",
            "Passwords do not match."
        );

return;
    }

if(!terms){

showError(
            "signupPasswordError",
            "Please accept the Terms & Conditions."
        );

return;
    }

identifierValue =
        identity;

closeModal();

setTimeout(() => {

currentFlow =
            "signup-password";

openOTPForFlow(

"Verify your account",

"We've sent a verification OTP to your email or mobile number."

);

},250);

}

/* =========================================================
   SIGNUP OTP
========================================================= */

function submitSignupOTP(){

const name =
        $("signupOTPName")
        .value
        .trim();

const identity =
        $("signupOTPIdentity")
        .value
        .trim();

if(!name){

showError(
            "signupOTPError",
            "Please enter your full name."
        );

return;
    }

if(!identity){

showError(
            "signupOTPError",
            "Please enter your email or mobile number."
        );

return;
    }

if(!isValidIdentity(identity)){

showError(
            "signupOTPError",
            "Please enter a valid email or mobile number."
        );

return;
    }

identifierValue =
        identity;

closeModal();

setTimeout(() => {

currentFlow =
            "signup-otp";

openOTPForFlow(

"Verify your account",

"We've sent a verification OTP to your email or mobile number."

);

},250);

}

/* =========================================================
   VALIDATE EMAIL / MOBILE
========================================================= */

function isValidIdentity(value){

if(value.includes("@")){

return /^[^\s@]+@[^\s@]+\.[^\s@]+$/
            .test(value);

}

const digits =
        value.replace(/\D/g,"");

return digits.length >= 10;

}

/* =========================================================
   FORGOT
========================================================= */

function openForgot(){

currentFlow =
        "forgot";

openModal(
        "forgotModal"
    );

setTimeout(() => {

$("forgotIdentity").focus();

},200);

}

function submitForgot(){

const identity =
        $("forgotIdentity")
        .value
        .trim();

if(!identity){

showError(
            "forgotError",
            "Please enter your registered email or mobile number."
        );

return;
    }

if(!isValidIdentity(identity)){

showError(
            "forgotError",
            "Please enter a valid email or mobile number."
        );

return;
    }

identifierValue =
        identity;

closeModal();

setTimeout(() => {

currentFlow =
            "forgot";

openOTPForFlow(

"Verify password recovery",

"Enter the OTP sent to your registered contact to reset your password."

);

},250);

}

/* =========================================================
   OTP FLOW
========================================================= */

function openOTPForFlow(
    title,
    description
){

openModal("otpModal");

$("otpTitle").innerText =
        title;

$("otpDescription").innerText =
        description;

$("otpDestination").innerText =
        maskIdentifier(
            identifierValue
        );

$("otpStep").innerText =
        "VERIFICATION • STEP 2 OF 2";

clearOTP();

startResendTimer();

focusFirstOTP();

}

/* =========================================================
   OTP VERIFY
========================================================= */

function verifyOTP(){

const inputs =
        document.querySelectorAll(".otp");

let otp = "";

inputs.forEach(input => {

otp += input.value;

});

if(otp.length !== 6){

showError(
            "otpError",
            "Please enter the complete 6-digit OTP."
        );

return;
    }

/*
       DEMO OTP

123456

Replace with Odoo RPC/API
       in production.
    */

if(otp !== "123456"){

showError(
            "otpError",
            "Wrong code. Please try again."
        );

return;
    }

$("otpError")
        .classList
        .remove("show");

$("otpSuccess")
        .classList
        .add("show");

setTimeout(() => {

/* PASSWORD RECOVERY */

if(currentFlow === "forgot"){

closeModal();

setTimeout(() => {

openModal(
                    "newPasswordModal"
                );

},250);

return;
        }

/* SIGNUP */

if(
            currentFlow ===
            "signup-password" ||
            currentFlow ===
            "signup-otp"
        ){

closeModal();

showToast(
                "Account verified successfully!"
            );

setTimeout(() => {

startConnection();

},300);

return;
        }

/* LOGIN */

closeModal();

startConnection();

},700);

}

/* =========================================================
   OTP INPUT
========================================================= */

const otpInputs =
    document.querySelectorAll(".otp");

otpInputs.forEach(
    (input,index) => {

input.addEventListener(
            "input",
            function(){

this.value =
                    this.value
                    .replace(/\D/g,"");

if(
                    this.value &&
                    index <
                    otpInputs.length - 1
                ){

otpInputs[
                        index + 1
                    ].focus();

}

}
        );

input.addEventListener(
            "keydown",
            function(e){

if(
                    e.key ===
                    "Backspace" &&
                    !this.value &&
                    index > 0
                ){

otpInputs[
                        index - 1
                    ].focus();

}

}
        );

input.addEventListener(
            "paste",
            function(e){

e.preventDefault();

const pasted =
                    (
                        e.clipboardData ||
                        window.clipboardData
                    )
                    .getData("text")
                    .replace(/\D/g,"")
                    .slice(0,6);

pasted
                    .split("")
                    .forEach(
                        (digit,i) => {

if(
                                otpInputs[i]
                            ){

otpInputs[i]
                                    .value =
                                    digit;

}

}
                    );

if(
                    pasted.length === 6
                ){

otpInputs[5]
                        .focus();

}

}
        );

}
);

function focusFirstOTP(){

setTimeout(() => {

const first =
            document.querySelector(
                ".otp"
            );

if(first){
            first.focus();
        }

},250);

}

function clearOTP(){

document
        .querySelectorAll(".otp")
        .forEach(input => {

input.value = "";

});

$("otpError")
        .classList
        .remove("show");

$("otpSuccess")
        .classList
        .remove("show");

}

/* =========================================================
   RESEND
========================================================= */

function startResendTimer(){

clearInterval(
        resendTimer
    );

secondsLeft = 30;

$("resendText")
        .style
        .display = "inline";

$("resendButton")
        .style
        .display = "none";

updateTimer();

resendTimer =
        setInterval(() => {

secondsLeft--;

updateTimer();

if(
                secondsLeft <= 0
            ){

clearInterval(
                    resendTimer
                );

$("resendText")
                    .style
                    .display = "none";

$("resendButton")
                    .style
                    .display = "inline";

}

},1000);

}

function updateTimer(){

const seconds =
        String(
            secondsLeft
        )
        .padStart(2,"0");

$("resendText")
        .innerText =
        "Resend OTP in 00:" +
        seconds;

}

function resendOTP(){

clearOTP();

startResendTimer();

showToast(
        "A new OTP has been sent."
    );

}

/* =========================================================
   CHANGE IDENTIFIER
========================================================= */

function changeIdentifier(){

closeModal();

showScreen(1);

setTimeout(() => {

$("customerInput")
            .focus();

},250);

}

/* =========================================================
   PASSWORD RESET
========================================================= */

function resetPassword(){

const password =
        $("newPassword")
        .value;

const confirm =
        $("newPasswordConfirm")
        .value;

if(password.length < 6){

showError(
            "newPasswordError",
            "Password must contain at least 6 characters."
        );

return;
    }

if(password !== confirm){

showError(
            "newPasswordError",
            "Passwords do not match."
        );

return;
    }

$("newPasswordError")
        .classList
        .remove("show");

$("newPasswordSuccess")
        .classList
        .add("show");

$("resetPasswordButton")
        .innerText =
        "PASSWORD UPDATED ✓";

setTimeout(() => {

closeModal();

showScreen(1);

$("customerInput")
            .value =
            identifierValue;

showToast(
            "Password updated successfully."
        );

},1200);

}

/* =========================================================
   PASSWORD VISIBILITY
========================================================= */

function togglePassword(
    id,
    button
){

const input =
        $(id);

if(
        input.type ===
        "password"
    ){

input.type = "text";

button.innerText =
            "◉";

}else{

input.type =
            "password";

button.innerText =
            "◉";

}

/* =========================================================
   ERROR
========================================================= */

function showError(
    id,
    message
){

const element =
        $(id);

element.innerText =
        message;

element.classList
        .add("show");

}

/* =========================================================
   MASK
========================================================= */

function maskIdentifier(
    value
){

if(!value){

return "your registered contact";

}

if(
        value.includes("@")
    ){

const parts =
            value.split("@");

const name =
            parts[0];

const masked =
            name.length > 2
            ? name.substring(0,2) +
              "•••"
            : "•••";

return (
            masked +
            "@" +
            parts[1]
        );

}

const digits =
        value.replace(
            /\D/g,
            ""
        );

if(
        digits.length >= 10
    ){

return (
            "+91 ••••• " +
            digits.slice(-4)
        );

}

if(
        value.length > 4
    ){

return (
            value.slice(0,3) +
            "•••" +
            value.slice(-2)
        );

}

return "••••••";

}

/* =========================================================
   CONNECTION
========================================================= */

function startConnection(){

showScreen(3);

$("loadingProgress")
        .style
        .width = "0%";

setTimeout(() => {

$("loadingProgress")
            .style
            .width = "100%";

},100);

setTimeout(() => {

$("successCustomer")
            .innerText =
            identifierValue ||
            "FiberNet Customer";

showScreen(4);

},3000);

}

/* =========================================================
   DASHBOARD
========================================================= */

function openDashboard(){

/*
       Odoo 19:

Replace this with your actual
       customer portal route.

Example:

window.location.href =
           "/my/home";
    */

showToast(
        "Opening FiberNet customer dashboard..."
    );

}

/* =========================================================
   ESCAPE
========================================================= */

document.addEventListener(
    "keydown",
    function(e){

if(
            e.key ===
            "Escape"
        ){

if(
                $("modalOverlay")
                .classList
                .contains("active")
            ){

closeModal();

}

}
);

/* =========================================================
   ENTER
========================================================= */

document.addEventListener(
    "keydown",
    function(e){

if(
            e.key !== "Enter"
        ){

return;

}

if(
            $("modalOverlay")
            .classList
            .contains("active")
        ){

const visible =
                [
                    ...document
                    .querySelectorAll(
                        ".modal-content"
                    )
                ]
                .find(
                    el =>
                        el.style.display ===
                        "block"
                );

if(!visible){

return;

}

if(
                visible.id ===
                "loginPasswordModal"
            ){

submitPasswordLogin();

}

else if(
                visible.id ===
                "otpModal"
            ){

verifyOTP();

}

else if(
                visible.id ===
                "signupPasswordModal"
            ){

submitSignupPassword();

}

else if(
                visible.id ===
                "signupOTPModal"
            ){

submitSignupOTP();

}

else if(
                visible.id ===
                "forgotModal"
            ){

submitForgot();

}

else if(
                visible.id ===
                "newPasswordModal"
            ){

resetPassword();

}

return;

}

const active =
            document.querySelector(
                ".screen.active"
            );

if(!active){

return;

}

if(
            active.id ===
            "screen1"
        ){

findCustomer();

}

}
);

</script>

</body>
</html>

Rate this design:

LOGIN2 by VEDANT SOMANI 09/07/2026

0.0 (0)

FiberNet — Customer Access

FiberNet

NETWORK ONLINE

Your connection.
Your control.

Securely access your FiberNet account, manage your broadband connection, pay bills, upgrade plans and get support.

1 Gbps Fiber Speed

99.9% Uptime

24/7 Support

✓

Fiber Network

All services operational

● STABLE

✓

Secure access

FiberNet ISP

CUSTOMER ACCESS

Welcome to FiberNet

Enter your registered email address or mobile number to continue.

EMAIL OR MOBILE NUMBER

New to FiberNet?

EXISTING CUSTOMER

Welcome back 👋

Your FiberNet account was found. Choose how you want to sign in.

ACCOUNT IDENTIFIER

—

PASSWORD LOGIN

Sign in securely

Enter your FiberNet account password.

SIGNING IN AS

—

ACCOUNT PASSWORD

•

Verify your account

Enter the verification code sent to your registered contact.

Code sent to —

Resend OTP in 00:30

NEW CUSTOMER

Create your FiberNet account

Enter your details. We'll verify your email or mobile number before creating your account.

FULL NAME

EMAIL ADDRESS

MOBILE NUMBER

ACCOUNT SECURITY

How do you want to create it?

Choose password signup or a passwordless OTP account.

VERIFY CONTACT

Verify your details

We need to verify the contact information associated with your new FiberNet account.

SIGNUP • OTP

Verify your contact

Enter the OTP sent to your registered email or mobile number.

Verification code sent to —

Resend OTP in 00:30

ACCOUNT SECURITY

Secure your account

Your contact details are verified. Now create a password for your FiberNet account.

CREATE PASSWORD

Enter a password

CONFIRM PASSWORD

I agree to the FiberNet Terms & Conditions and Privacy Policy.

ACCOUNT RECOVERY

Forgot your password?

Enter your registered email or mobile number. We'll send you a verification OTP.

EMAIL OR MOBILE NUMBER

RECOVERY • OTP

Verify your account

Enter the OTP sent to your registered contact.

Code sent to —

ACCOUNT RECOVERY

Create a new password

Your identity has been verified. Create a new password to secure your account.

NEW PASSWORD

CONFIRM NEW PASSWORD

◌

SECURE CONNECTION

Preparing your account

We're securely connecting you to the FiberNet customer portal.

✓

AUTHENTICATION COMPLETE

You're connected!

Your FiberNet account has been successfully authenticated.

Customer FiberNet Customer

Customer ID FN-10248

Connection Fiber Broadband

Status ● Active

CUSTOMER HUB

What would you like to do?

Manage your FiberNet connection from one place.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>FiberNet — Customer Access</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --blue:#159fe7;
    --blue-dark:#0879c4;
    --cyan:#4bcdf0;
    --green:#32d39a;
    --green-dark:#1cae78;

    --dark:#102f40;
    --muted:#78909f;

    --line:#dceef4;
    --soft:#f5fbfd;
    --white:#ffffff;

    --shadow:0 30px 100px rgba(20,110,145,.15);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{
    font-family:Inter,sans-serif;
    background:
        radial-gradient(circle at 10% 10%,rgba(75,205,240,.15),transparent 28%),
        radial-gradient(circle at 90% 90%,rgba(50,211,154,.12),transparent 30%),
        #f5fcff;
    color:var(--dark);
    overflow-x:hidden;
}

button,
input{
    font-family:inherit;
}

button{
    cursor:pointer;
}

button:focus-visible,
input:focus-visible{
    outline:3px solid rgba(21,159,231,.15);
}

/* =========================================================
   MAIN
========================================================= */

.page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.shell{
    position:relative;
    width:min(1240px,100%);
    min-height:720px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    overflow:hidden;
    border:1px solid rgba(210,233,241,.9);
    border-radius:34px;
    background:#fff;
    box-shadow:var(--shadow);
}

/* =========================================================
   LEFT NETWORK AREA
========================================================= */

.visual{
    position:relative;
    overflow:hidden;
    padding:42px;
    background:
        radial-gradient(circle at 20% 20%,rgba(75,205,240,.18),transparent 27%),
        radial-gradient(circle at 85% 80%,rgba(50,211,154,.15),transparent 30%),
        linear-gradient(145deg,#f0fbff,#f8fffc);
}

.grid{
    position:absolute;
    inset:0;
    opacity:.3;
    background-image:
        linear-gradient(rgba(21,159,231,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(21,159,231,.055) 1px,transparent 1px);
    background-size:45px 45px;
}

.orb{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(21,159,231,.1);
    pointer-events:none;
}

.orb1{
    width:500px;
    height:500px;
    left:-280px;
    top:80px;
}

.orb2{
    width:700px;
    height:700px;
    left:-390px;
    top:-40px;
}

.orb3{
    width:900px;
    height:900px;
    left:-500px;
    top:-140px;
}

/* =========================================================
   BRAND
========================================================= */

.brand{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    gap:12px;
}

.logo{
    width:47px;
    height:47px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:white;
    font-size:18px;
    font-weight:800;
    background:linear-gradient(135deg,var(--blue),var(--green));
    box-shadow:0 14px 28px rgba(21,159,231,.22);
}

.brand-text{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.7px;
}

.brand-text span{
    color:var(--blue);
}

/* =========================================================
   NETWORK CONTENT
========================================================= */

.visual-content{
    position:relative;
    z-index:5;
    margin-top:105px;
}

.live-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border:1px solid #d9edf4;
    border-radius:50px;
    background:rgba(255,255,255,.8);
    color:var(--green-dark);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(50,211,154,.12);
    animation:pulse 1.8s infinite;
}

@keyframes pulse{
    50%{
        box-shadow:0 0 0 9px rgba(50,211,154,0);
    }
}

.visual h1{
    margin-top:20px;
    max-width:570px;
    font-size:51px;
    line-height:1.04;
    letter-spacing:-2.8px;
}

.visual h1 span{
    color:var(--blue);
}

.visual-description{
    max-width:470px;
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}

/* =========================================================
   NETWORK MAP
========================================================= */

.network{
    position:relative;
    height:250px;
    margin-top:28px;
}

.center-router{
    position:absolute;
    left:50%;
    top:50%;
    width:115px;
    height:115px;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    border-radius:34px;
    background:rgba(255,255,255,.92);
    border:1px solid #cdeaf3;
    box-shadow:
        0 0 0 12px rgba(255,255,255,.55),
        0 22px 50px rgba(24,126,157,.16);
    z-index:5;
}

.router-box{
    position:relative;
    width:60px;
    height:43px;
    border-radius:11px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    box-shadow:0 10px 20px rgba(21,159,231,.24);
}

.router-box:before{
    content:"";
    position:absolute;
    left:13px;
    right:13px;
    bottom:8px;
    height:4px;
    border-radius:5px;
    background:rgba(255,255,255,.85);
}

.router-box:after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    top:8px;
    right:10px;
    border-radius:50%;
    background:var(--green);
}

.antenna{
    position:absolute;
    width:2px;
    height:27px;
    top:-24px;
    background:#6baec8;
}

.antenna.left{
    left:19px;
    transform:rotate(-18deg);
}

.antenna.right{
    right:19px;
    transform:rotate(18deg);
}

.node{
    position:absolute;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid #d2ebf2;
    background:#fff;
    box-shadow:0 12px 28px rgba(22,120,150,.11);
}

.node:after{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(50,211,154,.1);
}

.node.a{
    left:4%;
    top:25px;
}

.node.b{
    right:5%;
    top:45px;
}

.node.c{
    left:14%;
    bottom:15px;
}

.node.d{
    right:15%;
    bottom:5px;
}

.line{
    position:absolute;
    height:2px;
    transform-origin:left center;
    background:linear-gradient(
        90deg,
        rgba(21,159,231,.05),
        var(--blue),
        rgba(50,211,154,.1)
    );
}

.line.l1{
    width:240px;
    left:9%;
    top:83px;
    transform:rotate(10deg);
}

.line.l2{
    width:230px;
    left:52%;
    top:94px;
    transform:rotate(-13deg);
}

.line.l3{
    width:220px;
    left:17%;
    top:145px;
    transform:rotate(23deg);
}

.line.l4{
    width:215px;
    left:53%;
    top:145px;
    transform:rotate(24deg);
}

.packet{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(50,211,154,.1);
    animation:packet 3s linear infinite;
}

.packet.p1{
    left:17%;
    top:86px;
}

.packet.p2{
    left:67%;
    top:89px;
    animation-delay:1s;
}

.packet.p3{
    left:32%;
    top:150px;
    animation-delay:1.8s;
}

@keyframes packet{
    0%{
        opacity:0;
        transform:scale(.4);
    }

    20%{
        opacity:1;
    }

    70%{
        opacity:1;
        transform:scale(1.25);
    }

    100%{
        opacity:0;
        transform:scale(.4);
    }
}

/* =========================================================
   NETWORK STATS
========================================================= */

.network-info{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:5px;
}

.stat{
    padding:14px;
    border:1px solid #dceef3;
    border-radius:15px;
    background:rgba(255,255,255,.75);
}

.stat strong{
    display:block;
    font-size:11px;
}

.stat span{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:8px;
}

.status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
    padding:13px 15px;
    border:1px solid #dceef3;
    border-radius:15px;
    background:rgba(255,255,255,.8);
}

.status-left{
    display:flex;
    align-items:center;
    gap:9px;
}

.status-icon{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:var(--green-dark);
    background:#edfff7;
    font-size:12px;
}

.status-title{
    font-size:10px;
    font-weight:800;
}

.status-sub{
    margin-top:3px;
    color:var(--muted);
    font-size:8px;
}

.status-right{
    color:var(--green-dark);
    font-size:9px;
    font-weight:800;
}

/* =========================================================
   RIGHT AUTH AREA
========================================================= */

.auth-area{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:45px;
    background:#fff;
}

.auth{
    width:100%;
    max-width:430px;
}

/* =========================================================
   TOP BAR
========================================================= */

.auth-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:32px;
}

.secure{
    display:flex;
    align-items:center;
    gap:7px;
    color:#8aa0ac;
    font-size:9px;
    font-weight:700;
}

.secure-icon{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#edfff7;
    color:var(--green-dark);
}

/* =========================================================
   STATE
========================================================= */

.state{
    display:none;
    animation:stateIn .42s cubic-bezier(.2,.8,.2,1);
}

.state.active{
    display:block;
}

@keyframes stateIn{
    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.back{
    border:0;
    background:none;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    margin-bottom:22px;
}

.back:hover{
    color:var(--blue);
}

.kicker{
    color:var(--blue);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.auth h2{
    margin-top:9px;
    font-size:31px;
    line-height:1.15;
    letter-spacing:-1.5px;
}

.description{
    margin-top:10px;
    color:var(--muted);
    font-size:11px;
    line-height:1.75;
}

/* =========================================================
   FORM
========================================================= */

.field{
    margin-top:19px;
}

.field label{
    display:block;
    margin-bottom:8px;
    color:#527083;
    font-size:9px;
    font-weight:800;
    letter-spacing:.4px;
}

.input{
    width:100%;
    height:53px;
    border:1px solid var(--line);
    border-radius:14px;
    outline:none;
    padding:0 16px;
    background:#fbfdfe;
    color:var(--dark);
    font-size:12px;
    transition:.2s;
}

.input::placeholder{
    color:#a4b5bd;
}

.input:focus{
    background:#fff;
    border-color:#79ccec;
    box-shadow:0 0 0 4px rgba(21,159,231,.07);
}

/* =========================================================
   BUTTON
========================================================= */

.primary{
    width:100%;
    min-height:53px;
    margin-top:19px;
    border:0;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(
        100deg,
        var(--blue),
        #29b9df,
        var(--green)
    );
    box-shadow:0 15px 28px rgba(20,160,207,.19);
    font-size:10px;
    font-weight:800;
    letter-spacing:.5px;
    transition:.25s;
}

.primary:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(20,160,207,.25);
}

.primary:active{
    transform:translateY(0);
}

.secondary{
    width:100%;
    min-height:49px;
    margin-top:10px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    color:var(--blue-dark);
    font-size:10px;
    font-weight:800;
}

/* =========================================================
   CHOICE CARDS
========================================================= */

.choice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:22px;
}

.choice{
    position:relative;
    min-height:125px;
    padding:17px;
    text-align:left;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fbfdfe;
    transition:.25s;
}

.choice:hover{
    border-color:#90d4eb;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(30,130,160,.09);
}

.choice-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#eaf8fe;
    color:var(--blue-dark);
    font-size:15px;
}

.choice.green .choice-icon{
    background:#edfff7;
    color:var(--green-dark);
}

.choice strong{
    display:block;
    margin-top:12px;
    font-size:11px;
}

.choice span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:8px;
    line-height:1.5;
}

/* =========================================================
   LINKS
========================================================= */

.link-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    margin-top:18px;
    color:var(--muted);
    font-size:9px;
}

.link{
    border:0;
    background:none;
    color:var(--blue-dark);
    font-size:9px;
    font-weight:800;
}

.link:hover{
    text-decoration:underline;
}

/* =========================================================
   IDENTIFIER BADGE
========================================================= */

.identity-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:19px;
    padding:12px 14px;
    border:1px solid #dceef4;
    border-radius:13px;
    background:#f6fcfe;
}

.identity-label{
    color:var(--muted);
    font-size:8px;
}

.identity-value{
    margin-top:4px;
    color:var(--dark);
    font-size:10px;
    font-weight:800;
}

.change{
    border:0;
    background:none;
    color:var(--blue);
    font-size:8px;
    font-weight:800;
}

/* =========================================================
   OTP
========================================================= */

.otp-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:7px;
    margin-top:22px;
}

.otp{
    width:100%;
    height:51px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fbfdfe;
    text-align:center;
    font-size:17px;
    font-weight:800;
    color:var(--blue-dark);
    outline:none;
}

.otp:focus{
    background:#fff;
    border-color:#7dccec;
    box-shadow:0 0 0 4px rgba(21,159,231,.07);
}

.otp-info{
    margin-top:15px;
    padding:11px;
    border:1px solid #e0eff4;
    border-radius:12px;
    background:#f5fbfd;
    text-align:center;
    color:var(--muted);
    font-size:8px;
}

.otp-info strong{
    color:var(--dark);
}

.resend{
    margin-top:14px;
    text-align:center;
    color:var(--muted);
    font-size:8px;
}

.resend button{
    border:0;
    background:none;
    color:var(--blue-dark);
    font-weight:800;
}

/* =========================================================
   PASSWORD
========================================================= */

.password{
    position:relative;
}

.password .input{
    padding-right:50px;
}

.eye{
    position:absolute;
    right:9px;
    top:9px;
    width:35px;
    height:35px;
    border:0;
    background:transparent;
    color:#8ca1ad;
}

.strength{
    margin-top:9px;
}

.strength-bar{
    display:flex;
    gap:4px;
}

.strength-bar span{
    height:4px;
    flex:1;
    border-radius:4px;
    background:#e9f1f4;
}

.strength-text{
    margin-top:6px;
    color:var(--muted);
    font-size:8px;
}

/* =========================================================
   CHECKBOX
========================================================= */

.check{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:15px;
    color:var(--muted);
    font-size:8px;
    line-height:1.5;
}

.check input{
    margin-top:2px;
    accent-color:var(--blue);
}

/* =========================================================
   ERROR
========================================================= */

.error{
    display:none;
    margin-top:12px;
    padding:10px 12px;
    border:1px solid #ffd5d5;
    border-radius:10px;
    background:#fff4f4;
    color:#e56870;
    font-size:8px;
    line-height:1.5;
}

.error.show{
    display:block;
}

/* =========================================================
   SUCCESS
========================================================= */

.success-icon{
    width:92px;
    height:92px;
    margin:5px auto 25px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#edfff7;
    border:1px solid #bdeedb;
    color:var(--green-dark);
    font-size:35px;
    animation:success .6s ease;
}

@keyframes success{
    0%{
        opacity:0;
        transform:scale(.5);
    }

    70%{
        transform:scale(1.08);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}

.center{
    text-align:center;
}

.customer-card{
    margin-top:23px;
    padding:15px;
    border:1px solid #dfedf2;
    border-radius:15px;
    background:#f7fcfe;
    text-align:left;
}

.customer-row{
    display:flex;
    justify-content:space-between;
    padding:7px 0;
    font-size:9px;
}

.customer-row span{
    color:var(--muted);
}

.customer-row strong{
    color:var(--dark);
}

/* =========================================================
   DASHBOARD OPTIONS
========================================================= */

.dashboard-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:23px;
}

.dashboard-item{
    min-height:110px;
    padding:17px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fbfdfe;
    text-align:left;
    transition:.2s;
}

.dashboard-item:hover{
    transform:translateY(-3px);
    border-color:#8bd3ea;
}

.dashboard-item div{
    font-size:18px;
}

.dashboard-item strong{
    display:block;
    margin-top:13px;
    font-size:10px;
}

.dashboard-item span{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:8px;
}

/* =========================================================
   LOADING
========================================================= */

.loading{
    width:100%;
    height:5px;
    margin-top:25px;
    overflow:hidden;
    border-radius:10px;
    background:#edf5f8;
}

.loading-bar{
    width:0;
    height:100%;
    border-radius:10px;
    background:linear-gradient(90deg,var(--blue),var(--green));
    transition:width 2.4s linear;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:950px){

    .shell{
        grid-template-columns:1fr;
        max-width:650px;
    }

    .visual{
        min-height:430px;
    }

    .visual-content{
        margin-top:65px;
    }

    .visual h1{
        font-size:43px;
    }

    .network{
        height:210px;
    }

    .auth-area{
        padding:38px 35px 45px;
    }
}

@media(max-width:600px){

    body{
        background:#f5fcff;
    }

    .page{
        padding:0;
        align-items:stretch;
    }

    .shell{
        min-height:100vh;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .visual{
        min-height:390px;
        padding:24px 20px;
    }

    .brand{
        gap:9px;
    }

    .logo{
        width:40px;
        height:40px;
        border-radius:12px;
    }

    .brand-text{
        font-size:18px;
    }

    .visual-content{
        margin-top:48px;
    }

    .visual h1{
        font-size:34px;
        letter-spacing:-1.8px;
    }

    .visual-description{
        font-size:10px;
        line-height:1.7;
    }

    .network{
        height:165px;
        margin-top:10px;
        transform:scale(.82);
        transform-origin:left top;
        width:122%;
    }

    .network-info{
        display:none;
    }

    .status{
        margin-top:-40px;
    }

    .auth-area{
        padding:30px 20px 40px;
        align-items:flex-start;
    }

    .auth{
        max-width:none;
    }

    .auth-top{
        margin-bottom:25px;
    }

    .auth h2{
        font-size:27px;
    }

    .choice-grid{
        gap:8px;
    }

    .choice{
        min-height:115px;
        padding:14px;
    }

    .dashboard-grid{
        gap:8px;
    }

    .dashboard-item{
        min-height:100px;
    }
}

@media(max-width:390px){

    .visual{
        min-height:365px;
    }

    .visual h1{
        font-size:30px;
    }

    .network{
        transform:scale(.72);
        width:135%;
    }

    .auth-area{
        padding-left:16px;
        padding-right:16px;
    }

    .auth h2{
        font-size:25px;
    }

    .choice-grid{
        grid-template-columns:1fr;
    }

    .choice{
        min-height:90px;
    }

    .choice-icon{
        float:left;
        margin-right:12px;
    }

    .choice strong{
        padding-top:4px;
    }

    .otp-grid{
        gap:4px;
    }

    .otp{
        height:46px;
    }
}
</style>
</head>

<body>

<div class="page">

<div class="shell">

<!-- =====================================================
     ISP VISUAL
===================================================== -->

<section class="visual">

    <div class="grid"></div>

    <div class="orb orb1"></div>
    <div class="orb orb2"></div>
    <div class="orb orb3"></div>

    <div class="brand">

        <div class="logo">F</div>

        <div class="brand-text">
            Fiber<span>Net</span>
        </div>

    </div>

    <div class="visual-content">

        <div class="live-pill">
            <span class="live-dot"></span>
            NETWORK ONLINE
        </div>

        <h1>
            Your connection.<br>
            <span>Your control.</span>
        </h1>

        <p class="visual-description">
            Securely access your FiberNet account,
            manage your broadband connection, pay bills,
            upgrade plans and get support.
        </p>

        <div class="network">

            <div class="line l1"></div>
            <div class="line l2"></div>
            <div class="line l3"></div>
            <div class="line l4"></div>

            <div class="packet p1"></div>
            <div class="packet p2"></div>
            <div class="packet p3"></div>

            <div class="node a"></div>
            <div class="node b"></div>
            <div class="node c"></div>
            <div class="node d"></div>

            <div class="center-router">

                <div class="antenna left"></div>
                <div class="antenna right"></div>

                <div class="router-box"></div>

            </div>

        </div>

        <div class="network-info">

            <div class="stat">
                <strong>1 Gbps</strong>
                <span>Fiber Speed</span>
            </div>

            <div class="stat">
                <strong>99.9%</strong>
                <span>Uptime</span>
            </div>

            <div class="stat">
                <strong>24/7</strong>
                <span>Support</span>
            </div>

        </div>

        <div class="status">

            <div class="status-left">

                <div class="status-icon">✓</div>

                <div>
                    <div class="status-title">
                        Fiber Network
                    </div>

                    <div class="status-sub">
                        All services operational
                    </div>
                </div>

            </div>

            <div class="status-right">
                ● STABLE
            </div>

        </div>

    </div>

</section>


<!-- =====================================================
     AUTH
===================================================== -->

<section class="auth-area">

<div class="auth">

    <div class="auth-top">

        <div class="secure">
            <div class="secure-icon">✓</div>
            Secure access
        </div>

        <div class="secure">
            FiberNet ISP
        </div>

    </div>


<!-- =====================================================
     STATE 1 — IDENTIFY
===================================================== -->

<div class="state active" id="stateIdentify">

    <div class="kicker">
        CUSTOMER ACCESS
    </div>

    <h2>
        Welcome to FiberNet
    </h2>

    <p class="description">
        Enter your registered email address or mobile
        number to continue.
    </p>

    <div class="field">

        <label>
            EMAIL OR MOBILE NUMBER
        </label>

        <input
            class="input"
            id="identityInput"
            type="text"
            autocomplete="email"
            placeholder="Email or +91 98765 43210">

    </div>

    <div
        class="error"
        id="identityError">
    </div>

    <button
        class="primary"
        onclick="identifyCustomer()">
        CONTINUE →
    </button>

    <div class="link-row">

        <span>New to FiberNet?</span>

        <button
            class="link"
            onclick="showState('signupDetails')">
            Create account
        </button>

    </div>

    <div class="link-row">

        <button
            class="link"
            onclick="showState('forgot')">
            Forgot password?
        </button>

    </div>

</div>


<!-- =====================================================
     STATE 2 — EXISTING LOGIN CHOICE
===================================================== -->

<div class="state" id="stateLoginChoice">

    <button
        class="back"
        onclick="showState('identify')">
        ← Change email / mobile
    </button>

    <div class="kicker">
        EXISTING CUSTOMER
    </div>

    <h2>
        Welcome back 👋
    </h2>

    <p class="description">
        Your FiberNet account was found. Choose how
        you want to sign in.
    </p>

    <div class="identity-box">

        <div>
            <div class="identity-label">
                ACCOUNT IDENTIFIER
            </div>

            <div
                class="identity-value"
                id="loginIdentity">
                —
            </div>
        </div>

        <button
            class="change"
            onclick="showState('identify')">
            CHANGE
        </button>

    </div>

    <div class="choice-grid">

        <button
            class="choice"
            onclick="showState('loginPassword')">

            <div class="choice-icon">
                🔐
            </div>

            <strong>Password</strong>

            <span>
                Sign in using your account password.
            </span>

        </button>

        <button
            class="choice green"
            onclick="startLoginOTP()">

            <div class="choice-icon">
                ⚡
            </div>

            <strong>One-Time Password</strong>

            <span>
                Receive a secure OTP instantly.
            </span>

        </button>

    </div>

</div>


<!-- =====================================================
     LOGIN PASSWORD
===================================================== -->

<div class="state" id="stateLoginPassword">

    <button
        class="back"
        onclick="showState('loginChoice')">
        ← Other login method
    </button>

    <div class="kicker">
        PASSWORD LOGIN
    </div>

    <h2>
        Sign in securely
    </h2>

    <p class="description">
        Enter your FiberNet account password.
    </p>

    <div class="identity-box">

        <div>

            <div class="identity-label">
                SIGNING IN AS
            </div>

            <div
                class="identity-value"
                id="passwordIdentity">
                —
            </div>

        </div>

    </div>

    <div class="field">

        <label>
            ACCOUNT PASSWORD
        </label>

        <div class="password">

            <input
                class="input"
                id="loginPassword"
                type="password"
                placeholder="Enter password">

            <button
                class="eye"
                onclick="togglePassword('loginPassword',this)">
                ◉
            </button>

        </div>

    </div>

    <div
        class="error"
        id="loginPasswordError">
    </div>

    <button
        class="primary"
        onclick="loginPassword()">
        SIGN IN →
    </button>

    <div class="link-row">

        <button
            class="link"
            onclick="startLoginOTP()">
            Login with OTP
        </button>

        <span>•</span>

        <button
            class="link"
            onclick="showState('forgot')">
            Forgot password?
        </button>

    </div>

</div>


<!-- =====================================================
     LOGIN OTP
===================================================== -->

<div class="state" id="stateLoginOTP">

    <button
        class="back"
        onclick="showState('loginChoice')">
        ← Other login method
    </button>

    <div class="kicker">
        LOGIN • OTP
    </div>

    <h2>
        Verify your account
    </h2>

    <p class="description">
        Enter the verification code sent to your
        registered contact.
    </p>

    <div class="otp-info">

        Code sent to

        <strong id="loginOtpDestination">
            —
        </strong>

    </div>

    <div class="otp-grid">

        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">

    </div>

    <div
        class="error"
        id="loginOtpError">
    </div>

    <button
        class="primary"
        onclick="verifyLoginOTP()">
        VERIFY & SIGN IN →
    </button>

    <div class="resend">

        <span id="loginResendText">
            Resend OTP in 00:30
        </span>

        <button
            id="loginResendButton"
            style="display:none"
            onclick="resendLoginOTP()">
            Resend OTP
        </button>

    </div>

</div>


<!-- =====================================================
     SIGNUP DETAILS
===================================================== -->

<div class="state" id="stateSignupDetails">

    <button
        class="back"
        onclick="showState('identify')">
        ← Back to login
    </button>

    <div class="kicker">
        NEW CUSTOMER
    </div>

    <h2>
        Create your FiberNet account
    </h2>

    <p class="description">
        Enter your details. We'll verify your email or
        mobile number before creating your account.
    </p>

    <div class="field">

        <label>
            FULL NAME
        </label>

        <input
            class="input"
            id="signupName"
            placeholder="Enter your full name">

    </div>

    <div class="field">

        <label>
            EMAIL ADDRESS
        </label>

        <input
            class="input"
            id="signupEmail"
            type="email"
            placeholder="you@example.com">

    </div>

    <div class="field">

        <label>
            MOBILE NUMBER
        </label>

        <input
            class="input"
            id="signupMobile"
            type="tel"
            placeholder="+91 98765 43210">

    </div>

    <div
        class="error"
        id="signupDetailsError">
    </div>

    <button
        class="primary"
        onclick="continueSignup()">
        CONTINUE →
    </button>

</div>


<!-- =====================================================
     SIGNUP METHOD
===================================================== -->

<div class="state" id="stateSignupMethod">

    <button
        class="back"
        onclick="showState('signupDetails')">
        ← Edit details
    </button>

    <div class="kicker">
        ACCOUNT SECURITY
    </div>

    <h2>
        How do you want to create it?
    </h2>

    <p class="description">
        Choose password signup or a passwordless OTP
        account.
    </p>

    <div class="choice-grid">

        <button
            class="choice"
            onclick="startSignupPassword()">

            <div class="choice-icon">
                🔐
            </div>

            <strong>Password</strong>

            <span>
                Verify your contact and create a password.
            </span>

        </button>

        <button
            class="choice green"
            onclick="startSignupOTP()">

            <div class="choice-icon">
                ⚡
            </div>

            <strong>OTP only</strong>

            <span>
                Create a passwordless account with OTP.
            </span>

        </button>

    </div>

</div>


<!-- =====================================================
     SIGNUP PASSWORD VERIFY CHOICE
===================================================== -->

<div class="state" id="stateSignupPasswordVerify">

    <button
        class="back"
        onclick="showState('signupMethod')">
        ← Other signup method
    </button>

    <div class="kicker">
        VERIFY CONTACT
    </div>

    <h2>
        Verify your details
    </h2>

    <p class="description">
        We need to verify the contact information
        associated with your new FiberNet account.
    </p>

    <div
        id="signupVerifyEmailCard"
        class="identity-box"
        style="display:none">

        <div>

            <div class="identity-label">
                EMAIL
            </div>

            <div
                class="identity-value"
                id="signupEmailDisplay">
                —
            </div>

        </div>

        <strong style="color:#20b87b;font-size:9px">
            ● REQUIRED
        </strong>

    </div>

    <div
        id="signupVerifyMobileCard"
        class="identity-box"
        style="display:none">

        <div>

            <div class="identity-label">
                MOBILE
            </div>

            <div
                class="identity-value"
                id="signupMobileDisplay">
                —
            </div>

        </div>

        <strong style="color:#20b87b;font-size:9px">
            ● REQUIRED
        </strong>

    </div>

    <button
        class="primary"
        onclick="beginSignupPasswordVerification()">
        START VERIFICATION →
    </button>

</div>


<!-- =====================================================
     SIGNUP OTP
===================================================== -->

<div class="state" id="stateSignupOTP">

    <button
        class="back"
        onclick="showState('signupMethod')">
        ← Other signup method
    </button>

    <div class="kicker">
        SIGNUP • OTP
    </div>

    <h2>
        Verify your contact
    </h2>

    <p class="description">
        Enter the OTP sent to your registered email or
        mobile number.
    </p>

    <div class="otp-info">

        Verification code sent to

        <strong id="signupOtpDestination">
            —
        </strong>

    </div>

    <div class="otp-grid">

        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">

    </div>

    <div
        class="error"
        id="signupOtpError">
    </div>

    <button
        class="primary"
        onclick="verifySignupOTP()">
        VERIFY & CREATE ACCOUNT →
    </button>

    <div class="resend">

        <span id="signupResendText">
            Resend OTP in 00:30
        </span>

        <button
            id="signupResendButton"
            style="display:none"
            onclick="resendSignupOTP()">
            Resend OTP
        </button>

    </div>

</div>


<!-- =====================================================
     SIGNUP PASSWORD
===================================================== -->

<div class="state" id="stateCreatePassword">

    <div class="kicker">
        ACCOUNT SECURITY
    </div>

    <h2>
        Secure your account
    </h2>

    <p class="description">
        Your contact details are verified. Now create
        a password for your FiberNet account.
    </p>

    <div class="field">

        <label>
            CREATE PASSWORD
        </label>

        <div class="password">

            <input
                class="input"
                id="signupPassword"
                type="password"
                placeholder="Minimum 8 characters"
                oninput="checkPasswordStrength()">

            <button
                class="eye"
                onclick="togglePassword('signupPassword',this)">
                ◉
            </button>

        </div>

        <div class="strength">

            <div class="strength-bar">

                <span></span>
                <span></span>
                <span></span>
                <span></span>

            </div>

            <div
                class="strength-text"
                id="strengthText">
                Enter a password
            </div>

        </div>

    </div>

    <div class="field">

        <label>
            CONFIRM PASSWORD
        </label>

        <div class="password">

            <input
                class="input"
                id="signupPasswordConfirm"
                type="password"
                placeholder="Repeat your password">

            <button
                class="eye"
                onclick="togglePassword('signupPasswordConfirm',this)">
                ◉
            </button>

        </div>

    </div>

    <label class="check">

        <input
            type="checkbox"
            id="signupTerms">

        <span>
            I agree to the FiberNet Terms & Conditions
            and Privacy Policy.
        </span>

    </label>

    <div
        class="error"
        id="signupPasswordError">
    </div>

    <button
        class="primary"
        onclick="createPasswordAccount()">
        CREATE ACCOUNT →
    </button>

</div>


<!-- =====================================================
     FORGOT
===================================================== -->

<div class="state" id="stateForgot">

    <button
        class="back"
        onclick="showState('identify')">
        ← Back to login
    </button>

    <div class="kicker">
        ACCOUNT RECOVERY
    </div>

    <h2>
        Forgot your password?
    </h2>

    <p class="description">
        Enter your registered email or mobile number.
        We'll send you a verification OTP.
    </p>

    <div class="field">

        <label>
            EMAIL OR MOBILE NUMBER
        </label>

        <input
            class="input"
            id="forgotInput"
            placeholder="Email or mobile">

    </div>

    <div
        class="error"
        id="forgotError">
    </div>

    <button
        class="primary"
        onclick="startForgot()">
        SEND RECOVERY OTP →
    </button>

</div>


<!-- =====================================================
     FORGOT OTP
===================================================== -->

<div class="state" id="stateForgotOTP">

    <button
        class="back"
        onclick="showState('forgot')">
        ← Change account
    </button>

    <div class="kicker">
        RECOVERY • OTP
    </div>

    <h2>
        Verify your account
    </h2>

    <p class="description">
        Enter the OTP sent to your registered contact.
    </p>

    <div class="otp-info">

        Code sent to

        <strong id="forgotOtpDestination">
            —
        </strong>

    </div>

    <div class="otp-grid">

        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">
        <input class="otp" maxlength="1" inputmode="numeric">

    </div>

    <div
        class="error"
        id="forgotOtpError">
    </div>

    <button
        class="primary"
        onclick="verifyForgotOTP()">
        VERIFY OTP →
    </button>

</div>


<!-- =====================================================
     NEW PASSWORD
===================================================== -->

<div class="state" id="stateNewPassword">

    <div class="kicker">
        ACCOUNT RECOVERY
    </div>

    <h2>
        Create a new password
    </h2>

    <p class="description">
        Your identity has been verified. Create a new
        password to secure your account.
    </p>

    <div class="field">

        <label>
            NEW PASSWORD
        </label>

        <div class="password">

            <input
                class="input"
                id="newPassword"
                type="password"
                placeholder="New password">

            <button
                class="eye"
                onclick="togglePassword('newPassword',this)">
                ◉
            </button>

        </div>

    </div>

    <div class="field">

        <label>
            CONFIRM NEW PASSWORD
        </label>

        <input
            class="input"
            id="newPasswordConfirm"
            type="password"
            placeholder="Confirm password">

    </div>

    <div
        class="error"
        id="newPasswordError">
    </div>

    <button
        class="primary"
        onclick="saveNewPassword()">
        UPDATE PASSWORD →
    </button>

</div>


<!-- =====================================================
     CONNECTING
===================================================== -->

<div class="state" id="stateConnecting">

    <div class="center">

        <div class="success-icon"
             style="width:90px;height:90px;background:#f0fbff;border-color:#ccecf5;color:var(--blue);animation:none">

            ◌

        </div>

        <div class="kicker">
            SECURE CONNECTION
        </div>

        <h2>
            Preparing your account
        </h2>

        <p class="description">
            We're securely connecting you to the
            FiberNet customer portal.
        </p>

        <div class="loading">

            <div
                class="loading-bar"
                id="loadingBar">
            </div>

        </div>

    </div>

</div>


<!-- =====================================================
     ACCOUNT CREATED / LOGIN SUCCESS
===================================================== -->

<div class="state" id="stateSuccess">

    <div class="center">

        <div class="success-icon">
            ✓
        </div>

        <div class="kicker">
            AUTHENTICATION COMPLETE
        </div>

        <h2>
            You're connected!
        </h2>

        <p class="description">
            Your FiberNet account has been successfully
            authenticated.
        </p>

        <div class="customer-card">

            <div class="customer-row">

                <span>
                    Customer
                </span>

                <strong id="successName">
                    FiberNet Customer
                </strong>

            </div>

            <div class="customer-row">

                <span>
                    Customer ID
                </span>

                <strong id="successId">
                    FN-10248
                </strong>

            </div>

            <div class="customer-row">

                <span>
                    Connection
                </span>

                <strong>
                    Fiber Broadband
                </strong>

            </div>

            <div class="customer-row">

                <span>
                    Status
                </span>

                <strong style="color:#20b87b">
                    ● Active
                </strong>

            </div>

        </div>

        <button
            class="primary"
            onclick="showDashboard()">
            ENTER CUSTOMER PORTAL →
        </button>

    </div>

</div>


<!-- =====================================================
     CUSTOMER HUB
===================================================== -->

<div class="state" id="stateDashboard">

    <button
        class="back"
        onclick="showState('success')">
        ← Account
    </button>

    <div class="kicker">
        CUSTOMER HUB
    </div>

    <h2>
        What would you like to do?
    </h2>

    <p class="description">
        Manage your FiberNet connection from one place.
    </p>

    <div class="dashboard-grid">

        <button class="dashboard-item"
                onclick="demoAction('My Connection')">

            <div>📡</div>

            <strong>
                My Connection
            </strong>

            <span>
                View your active broadband service.
            </span>

        </button>

        <button class="dashboard-item"
                onclick="demoAction('Pay Bill')">

            <div>💳</div>

            <strong>
                Pay Bill
            </strong>

            <span>
                Pay your latest internet bill.
            </span>

        </button>

        <button class="dashboard-item"
                onclick="demoAction('Upgrade Plan')">

            <div>🚀</div>

            <strong>
                Upgrade Plan
            </strong>

            <span>
                Explore faster Fiber plans.
            </span>

        </button>

        <button class="dashboard-item"
                onclick="demoAction('Support')">

            <div>🛠</div>

            <strong>
                Support
            </strong>

            <span>
                Get help with your connection.
            </span>

        </button>

    </div>

</div>


</div>

</section>

</div>

</div>


<script>

/* =========================================================
   GLOBAL STATE
========================================================= */

const app = {

    identity:"",
    name:"",
    email:"",
    mobile:"",

    flow:"",
    verificationTarget:"",

    signupPasswordVerified:false,

    otpTimer:null,
    otpSeconds:30

};


/* =========================================================
   HELPERS
========================================================= */

function $(id){
    return document.getElementById(id);
}


function hideAllStates(){

    document
        .querySelectorAll(".state")
        .forEach(state=>{
            state.classList.remove("active");
        });

}


function showState(name){

    hideAllStates();

    const state = $("state" + capitalize(name));

    if(state){
        state.classList.add("active");
    }

    window.scrollTo({
        top:0,
        behavior:"smooth"
    });

}


function capitalize(value){

    return value.charAt(0).toUpperCase() + value.slice(1);

}


/* =========================================================
   ERROR
========================================================= */

function showError(id,message){

    const el = $(id);

    if(!el) return;

    el.innerText = message;
    el.classList.add("show");

}


function clearError(id){

    const el = $(id);

    if(el){
        el.classList.remove("show");
        el.innerText = "";
    }

}


/* =========================================================
   IDENTIFIER
========================================================= */

function identifyCustomer(){

    clearError("identityError");

    const value =
        $("identityInput").value.trim();

    if(!value){

        showError(
            "identityError",
            "Please enter your email address or mobile number."
        );

        $("identityInput").focus();

        return;
    }

    if(!isValidEmail(value) && !isValidMobile(value)){

        showError(
            "identityError",
            "Please enter a valid email address or mobile number."
        );

        return;
    }

    app.identity = value;

    /*
       DEMO LOGIC

       Existing customers:
       use a value containing "existing"

       Example:
       existing@example.com

       or

       +919999999999

       In Odoo replace this section with RPC.
    */

    const isExisting =
        value.toLowerCase().includes("existing") ||
        value.replace(/\D/g,"").endsWith("9999999999");

    if(isExisting){

        $("loginIdentity").innerText =
            mask(value);

        $("passwordIdentity").innerText =
            mask(value);

        showState("loginChoice");

    }else{

        /*
           For demo, if unknown user enters
           the identifier, offer signup.
        */

        $("signupEmail").value =
            isValidEmail(value) ? value : "";

        $("signupMobile").value =
            isValidMobile(value) ? value : "";

        showState("signupDetails");

    }

}


/* =========================================================
   VALIDATION
========================================================= */

function isValidEmail(value){

    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);

}


function isValidMobile(value){

    const digits =
        value.replace(/\D/g,"");

    return digits.length >= 10;

}


/* =========================================================
   SIGNUP DETAILS
========================================================= */

function continueSignup(){

    clearError("signupDetailsError");

    const name =
        $("signupName").value.trim();

    const email =
        $("signupEmail").value.trim();

    const mobile =
        $("signupMobile").value.trim();

    if(!name){

        showError(
            "signupDetailsError",
            "Please enter your full name."
        );

        return;
    }

    if(!email && !mobile){

        showError(
            "signupDetailsError",
            "Enter at least an email address or mobile number."
        );

        return;
    }

    if(email && !isValidEmail(email)){

        showError(
            "signupDetailsError",
            "Please enter a valid email address."
        );

        return;
    }

    if(mobile && !isValidMobile(mobile)){

        showError(
            "signupDetailsError",
            "Please enter a valid mobile number."
        );

        return;
    }

    app.name = name;
    app.email = email;
    app.mobile = mobile;

    showState("signupMethod");

}


/* =========================================================
   SIGNUP PASSWORD FLOW
========================================================= */

function startSignupPassword(){

    $("signupEmailDisplay").innerText =
        app.email || "Not provided";

    $("signupMobileDisplay").innerText =
        app.mobile || "Not provided";

    $("signupVerifyEmailCard").style.display =
        app.email ? "flex" : "none";

    $("signupVerifyMobileCard").style.display =
        app.mobile ? "flex" : "none";

    showState("signupPasswordVerify");

}


function beginSignupPasswordVerification(){

    /*
       If both are provided:
       verify email first.

       If only mobile:
       verify mobile.

       If only email:
       verify email.
    */

    if(app.email){

        app.verificationTarget = "email";

        startSignupVerificationOTP();

        return;
    }

    if(app.mobile){

        app.verificationTarget = "mobile";

        startSignupVerificationOTP();

        return;
    }

}


function startSignupVerificationOTP(){

    app.flow = "signup-password";

    $("signupOtpDestination").innerText =
        mask(
            app.verificationTarget === "email"
            ? app.email
            : app.mobile
        );

    clearOTPFields();

    showState("signupOTP");

    startTimer(
        "signupResendText",
        "signupResendButton"
    );

    focusFirstOTP();

}


/* =========================================================
   SIGNUP OTP FLOW
========================================================= */

function startSignupOTP(){

    app.flow = "signup-otp";

    if(app.email){

        app.verificationTarget = "email";

    }else{

        app.verificationTarget = "mobile";

    }

    $("signupOtpDestination").innerText =
        mask(
            app.verificationTarget === "email"
            ? app.email
            : app.mobile
        );

    clearOTPFields();

    showState("signupOTP");

    startTimer(
        "signupResendText",
        "signupResendButton"
    );

    focusFirstOTP();

}


function verifySignupOTP(){

    clearError("signupOtpError");

    const otp =
        getOTP();

    if(otp.length !== 6){

        showError(
            "signupOtpError",
            "Please enter the complete 6-digit OTP."
        );

        return;
    }

    if(otp !== "123456"){

        showError(
            "signupOtpError",
            "Invalid OTP. For this demo use 123456."
        );

        return;
    }

    /*
       SIGNUP WITH OTP
    */

    if(app.flow === "signup-otp"){

        startConnection();

        return;
    }

    /*
       SIGNUP WITH PASSWORD

       If email + mobile exist,
       verify email first and then mobile.
    */

    if(
        app.verificationTarget === "email" &&
        app.mobile
    ){

        app.verificationTarget = "mobile";

        $("signupOtpDestination").innerText =
            mask(app.mobile);

        clearOTPFields();

        startTimer(
            "signupResendText",
            "signupResendButton"
        );

        focusFirstOTP();

        return;
    }

    /*
       All required contacts verified.
    */

    app.signupPasswordVerified = true;

    showState("createPassword");

}


/* =========================================================
   CREATE PASSWORD
========================================================= */

function createPasswordAccount(){

    clearError("signupPasswordError");

    const password =
        $("signupPassword").value;

    const confirm =
        $("signupPasswordConfirm").value;

    if(password.length < 8){

        showError(
            "signupPasswordError",
            "Password must contain at least 8 characters."
        );

        return;
    }

    if(password !== confirm){

        showError(
            "signupPasswordError",
            "Passwords do not match."
        );

        return;
    }

    if(!$("signupTerms").checked){

        showError(
            "signupPasswordError",
            "Please accept the Terms & Conditions."
        );

        return;
    }

    startConnection();

}


/* =========================================================
   LOGIN PASSWORD
========================================================= */

function loginPassword(){

    clearError("loginPasswordError");

    const password =
        $("loginPassword").value;

    if(!password){

        showError(
            "loginPasswordError",
            "Please enter your account password."
        );

        return;
    }

    /*
       Odoo:
       Replace this with an RPC/API login request.
    */

    startConnection();

}


/* =========================================================
   LOGIN OTP
========================================================= */

function startLoginOTP(){

    app.flow = "login-otp";

    $("loginOtpDestination").innerText =
        mask(app.identity);

    clearOTPFields();

    showState("loginOTP");

    startTimer(
        "loginResendText",
        "loginResendButton"
    );

    focusFirstOTP();

}


function verifyLoginOTP(){

    clearError("loginOtpError");

    const otp =
        getOTP();

    if(otp.length !== 6){

        showError(
            "loginOtpError",
            "Please enter the complete 6-digit OTP."
        );

        return;
    }

    if(otp !== "123456"){

        showError(
            "loginOtpError",
            "Invalid OTP. For this demo use 123456."
        );

        return;
    }

    startConnection();

}


/* =========================================================
   FORGOT PASSWORD
========================================================= */

function startForgot(){

    clearError("forgotError");

    const value =
        $("forgotInput").value.trim();

    if(!value){

        showError(
            "forgotError",
            "Please enter your registered email or mobile number."
        );

        return;
    }

    if(!isValidEmail(value) && !isValidMobile(value)){

        showError(
            "forgotError",
            "Please enter a valid email or mobile number."
        );

        return;
    }

    app.identity = value;

    $("forgotOtpDestination").innerText =
        mask(value);

    clearOTPFields();

    showState("forgotOTP");

}


function verifyForgotOTP(){

    clearError("forgotOtpError");

    const otp =
        getOTP();

    if(otp.length !== 6){

        showError(
            "forgotOtpError",
            "Please enter the complete OTP."
        );

        return;
    }

    if(otp !== "123456"){

        showError(
            "forgotOtpError",
            "Invalid OTP. For this demo use 123456."
        );

        return;
    }

    showState("newPassword");

}


function saveNewPassword(){

    clearError("newPasswordError");

    const password =
        $("newPassword").value;

    const confirm =
        $("newPasswordConfirm").value;

    if(password.length < 8){

        showError(
            "newPasswordError",
            "Password must contain at least 8 characters."
        );

        return;
    }

    if(password !== confirm){

        showError(
            "newPasswordError",
            "Passwords do not match."
        );

        return;
    }

    startConnection();

}


/* =========================================================
   CONNECTION
========================================================= */

function startConnection(){

    showState("connecting");

    $("loadingBar").style.width = "0%";

    setTimeout(()=>{

        $("loadingBar").style.width = "100%";

    },100);

    setTimeout(()=>{

        $("successName").innerText =
            app.name || "FiberNet Customer";

        $("successId").innerText =
            generateCustomerId();

        showState("success");

    },2600);

}


/* =========================================================
   DASHBOARD
========================================================= */

function showDashboard(){

    showState("dashboard");

}


function demoAction(name){

    alert(
        name +
        "\n\nDemo action.\n\n" +
        "Connect this button to your Odoo 19 " +
        "customer portal route/RPC."
    );

}


/* =========================================================
   CUSTOMER ID
========================================================= */

function generateCustomerId(){

    return "FN-" +
        Math.floor(
            10000 +
            Math.random() * 89999
        );

}


/* =========================================================
   PASSWORD
========================================================= */

function togglePassword(id,button){

    const input = $(id);

    if(input.type === "password"){

        input.type = "text";
        button.innerText = "◉";

    }else{

        input.type = "password";
        button.innerText = "◉";

    }

}


function checkPasswordStrength(){

    const password =
        $("signupPassword").value;

    const bars =
        document.querySelectorAll(".strength-bar span");

    let score = 0;

    if(password.length >= 8)
        score++;

    if(/[A-Z]/.test(password))
        score++;

    if(/[0-9]/.test(password))
        score++;

    if(/[^A-Za-z0-9]/.test(password))
        score++;

    bars.forEach((bar,index)=>{

        bar.style.background =
            index < score
            ? "linear-gradient(90deg,var(--blue),var(--green))"
            : "#e9f1f4";

    });

    const text =
        $("strengthText");

    if(!password){

        text.innerText =
            "Enter a password";

    }else if(score <= 1){

        text.innerText =
            "Weak password";

    }else if(score === 2){

        text.innerText =
            "Fair password";

    }else if(score === 3){

        text.innerText =
            "Good password";

    }else{

        text.innerText =
            "Strong password";

    }

}


/* =========================================================
   MASK
========================================================= */

function mask(value){

    if(!value)
        return "your registered contact";

    if(value.includes("@")){

        const parts =
            value.split("@");

        const name =
            parts[0];

        const masked =
            name.length > 2
            ? name.substring(0,2) + "•••"
            : "•••";

        return masked + "@" + parts[1];

    }

    const digits =
        value.replace(/\D/g,"");

    if(digits.length >= 10){

        return "+91 ••••• " +
            digits.slice(-4);

    }

    if(value.length > 4){

        return value.slice(0,2) +
            "•••" +
            value.slice(-2);

    }

    return "••••••";

}


/* =========================================================
   OTP
========================================================= */

function getOTP(){

    const inputs =
        document.querySelectorAll(".state.active .otp");

    let value = "";

    inputs.forEach(input=>{
        value += input.value;
    });

    return value;

}


function clearOTPFields(){

    document
        .querySelectorAll(".otp")
        .forEach(input=>{
            input.value = "";
        });

}


function focusFirstOTP(){

    setTimeout(()=>{

        const input =
            document.querySelector(
                ".state.active .otp"
            );

        if(input)
            input.focus();

    },250);

}


/* =========================================================
   OTP INPUT HANDLING
========================================================= */

document.addEventListener("input",function(event){

    if(!event.target.classList.contains("otp"))
        return;

    event.target.value =
        event.target.value.replace(/\D/g,"").slice(0,1);

    if(!event.target.value)
        return;

    const current =
        event.target;

    const inputs =
        [...document.querySelectorAll(
            ".state.active .otp"
        )];

    const index =
        inputs.indexOf(current);

    if(index >= 0 && index < inputs.length - 1){

        inputs[index + 1].focus();

    }

});


document.addEventListener("keydown",function(event){

    if(!event.target.classList.contains("otp"))
        return;

    if(event.key !== "Backspace")
        return;

    if(event.target.value)
        return;

    const inputs =
        [...document.querySelectorAll(
            ".state.active .otp"
        )];

    const index =
        inputs.indexOf(event.target);

    if(index > 0)
        inputs[index - 1].focus();

});


document.addEventListener("paste",function(event){

    if(!event.target.classList.contains("otp"))
        return;

    event.preventDefault();

    const value =
        (event.clipboardData || window.clipboardData)
        .getData("text")
        .replace(/\D/g,"")
        .slice(0,6);

    const inputs =
        [...document.querySelectorAll(
            ".state.active .otp"
        )];

    value.split("").forEach((digit,index)=>{

        if(inputs[index])
            inputs[index].value = digit;

    });

    if(value.length === 6)
        inputs[5].focus();

});


/* =========================================================
   RESEND TIMER
========================================================= */

function startTimer(textId,buttonId){

    if(app.otpTimer)
        clearInterval(app.otpTimer);

    app.otpSeconds = 30;

    $(textId).style.display =
        "inline";

    $(buttonId).style.display =
        "none";

    updateTimer(textId);

    app.otpTimer =
        setInterval(()=>{

            app.otpSeconds--;

            updateTimer(textId);

            if(app.otpSeconds <= 0){

                clearInterval(app.otpTimer);

                $(textId).style.display =
                    "none";

                $(buttonId).style.display =
                    "inline";

            }

        },1000);

}


function updateTimer(textId){

    $(textId).innerText =
        "Resend OTP in 00:" +
        String(app.otpSeconds).padStart(2,"0");

}


function resendLoginOTP(){

    clearOTPFields();

    startTimer(
        "loginResendText",
        "loginResendButton"
    );

    focusFirstOTP();

}


function resendSignupOTP(){

    clearOTPFields();

    startTimer(
        "signupResendText",
        "signupResendButton"
    );

    focusFirstOTP();

}


/* =========================================================
   ENTER KEY
========================================================= */

document.addEventListener("keydown",function(event){

    if(event.key !== "Enter")
        return;

    const active =
        document.querySelector(".state.active");

    if(!active)
        return;

    switch(active.id){

        case "stateIdentify":
            identifyCustomer();
            break;

        case "stateLoginPassword":
            loginPassword();
            break;

        case "stateLoginOTP":
            verifyLoginOTP();
            break;

        case "stateSignupDetails":
            continueSignup();
            break;

        case "stateSignupOTP":
            verifySignupOTP();
            break;

        case "stateCreatePassword":
            createPasswordAccount();
            break;

        case "stateForgot":
            startForgot();
            break;

        case "stateForgotOTP":
            verifyForgotOTP();
            break;

        case "stateNewPassword":
            saveNewPassword();
            break;

    }

});


/* =========================================================
   INITIAL
========================================================= */

showState("identify");

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>FiberNet — Customer Access</title>

:root{
    --blue:#159fe7;
    --blue-dark:#0879c4;
    --cyan:#4bcdf0;
    --green:#32d39a;
    --green-dark:#1cae78;

--dark:#102f40;
    --muted:#78909f;

--line:#dceef4;
    --soft:#f5fbfd;
    --white:#ffffff;

--shadow:0 30px 100px rgba(20,110,145,.15);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{
    font-family:Inter,sans-serif;
    background:
        radial-gradient(circle at 10% 10%,rgba(75,205,240,.15),transparent 28%),
        radial-gradient(circle at 90% 90%,rgba(50,211,154,.12),transparent 30%),
        #f5fcff;
    color:var(--dark);
    overflow-x:hidden;
}

button,
input{
    font-family:inherit;
}

button{
    cursor:pointer;
}

button:focus-visible,
input:focus-visible{
    outline:3px solid rgba(21,159,231,.15);
}

/* =========================================================
   MAIN
========================================================= */

.page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.shell{
    position:relative;
    width:min(1240px,100%);
    min-height:720px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    overflow:hidden;
    border:1px solid rgba(210,233,241,.9);
    border-radius:34px;
    background:#fff;
    box-shadow:var(--shadow);
}

/* =========================================================
   LEFT NETWORK AREA
========================================================= */

.visual{
    position:relative;
    overflow:hidden;
    padding:42px;
    background:
        radial-gradient(circle at 20% 20%,rgba(75,205,240,.18),transparent 27%),
        radial-gradient(circle at 85% 80%,rgba(50,211,154,.15),transparent 30%),
        linear-gradient(145deg,#f0fbff,#f8fffc);
}

.grid{
    position:absolute;
    inset:0;
    opacity:.3;
    background-image:
        linear-gradient(rgba(21,159,231,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(21,159,231,.055) 1px,transparent 1px);
    background-size:45px 45px;
}

.orb{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(21,159,231,.1);
    pointer-events:none;
}

.orb1{
    width:500px;
    height:500px;
    left:-280px;
    top:80px;
}

.orb2{
    width:700px;
    height:700px;
    left:-390px;
    top:-40px;
}

.orb3{
    width:900px;
    height:900px;
    left:-500px;
    top:-140px;
}

/* =========================================================
   BRAND
========================================================= */

.brand{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    gap:12px;
}

.logo{
    width:47px;
    height:47px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:white;
    font-size:18px;
    font-weight:800;
    background:linear-gradient(135deg,var(--blue),var(--green));
    box-shadow:0 14px 28px rgba(21,159,231,.22);
}

.brand-text{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.7px;
}

.brand-text span{
    color:var(--blue);
}

/* =========================================================
   NETWORK CONTENT
========================================================= */

.visual-content{
    position:relative;
    z-index:5;
    margin-top:105px;
}

.live-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border:1px solid #d9edf4;
    border-radius:50px;
    background:rgba(255,255,255,.8);
    color:var(--green-dark);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(50,211,154,.12);
    animation:pulse 1.8s infinite;
}

@keyframes pulse{
    50%{
        box-shadow:0 0 0 9px rgba(50,211,154,0);
    }
}

.visual h1{
    margin-top:20px;
    max-width:570px;
    font-size:51px;
    line-height:1.04;
    letter-spacing:-2.8px;
}

.visual h1 span{
    color:var(--blue);
}

.visual-description{
    max-width:470px;
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}

/* =========================================================
   NETWORK MAP
========================================================= */

.network{
    position:relative;
    height:250px;
    margin-top:28px;
}

.center-router{
    position:absolute;
    left:50%;
    top:50%;
    width:115px;
    height:115px;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
    border-radius:34px;
    background:rgba(255,255,255,.92);
    border:1px solid #cdeaf3;
    box-shadow:
        0 0 0 12px rgba(255,255,255,.55),
        0 22px 50px rgba(24,126,157,.16);
    z-index:5;
}

.router-box{
    position:relative;
    width:60px;
    height:43px;
    border-radius:11px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    box-shadow:0 10px 20px rgba(21,159,231,.24);
}

.router-box:before{
    content:"";
    position:absolute;
    left:13px;
    right:13px;
    bottom:8px;
    height:4px;
    border-radius:5px;
    background:rgba(255,255,255,.85);
}

.router-box:after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    top:8px;
    right:10px;
    border-radius:50%;
    background:var(--green);
}

.antenna{
    position:absolute;
    width:2px;
    height:27px;
    top:-24px;
    background:#6baec8;
}

.antenna.left{
    left:19px;
    transform:rotate(-18deg);
}

.antenna.right{
    right:19px;
    transform:rotate(18deg);
}

.node{
    position:absolute;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid #d2ebf2;
    background:#fff;
    box-shadow:0 12px 28px rgba(22,120,150,.11);
}

.node:after{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(50,211,154,.1);
}

.node.a{
    left:4%;
    top:25px;
}

.node.b{
    right:5%;
    top:45px;
}

.node.c{
    left:14%;
    bottom:15px;
}

.node.d{
    right:15%;
    bottom:5px;
}

.line{
    position:absolute;
    height:2px;
    transform-origin:left center;
    background:linear-gradient(
        90deg,
        rgba(21,159,231,.05),
        var(--blue),
        rgba(50,211,154,.1)
    );
}

.line.l1{
    width:240px;
    left:9%;
    top:83px;
    transform:rotate(10deg);
}

.line.l2{
    width:230px;
    left:52%;
    top:94px;
    transform:rotate(-13deg);
}

.line.l3{
    width:220px;
    left:17%;
    top:145px;
    transform:rotate(23deg);
}

.line.l4{
    width:215px;
    left:53%;
    top:145px;
    transform:rotate(24deg);
}

.packet{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(50,211,154,.1);
    animation:packet 3s linear infinite;
}

.packet.p1{
    left:17%;
    top:86px;
}

.packet.p2{
    left:67%;
    top:89px;
    animation-delay:1s;
}

.packet.p3{
    left:32%;
    top:150px;
    animation-delay:1.8s;
}

@keyframes packet{
    0%{
        opacity:0;
        transform:scale(.4);
    }

20%{
        opacity:1;
    }

70%{
        opacity:1;
        transform:scale(1.25);
    }

100%{
        opacity:0;
        transform:scale(.4);
    }
}

/* =========================================================
   NETWORK STATS
========================================================= */

.network-info{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:5px;
}

.stat{
    padding:14px;
    border:1px solid #dceef3;
    border-radius:15px;
    background:rgba(255,255,255,.75);
}

.stat strong{
    display:block;
    font-size:11px;
}

.stat span{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:8px;
}

.status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
    padding:13px 15px;
    border:1px solid #dceef3;
    border-radius:15px;
    background:rgba(255,255,255,.8);
}

.status-left{
    display:flex;
    align-items:center;
    gap:9px;
}

.status-icon{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:var(--green-dark);
    background:#edfff7;
    font-size:12px;
}

.status-title{
    font-size:10px;
    font-weight:800;
}

.status-sub{
    margin-top:3px;
    color:var(--muted);
    font-size:8px;
}

.status-right{
    color:var(--green-dark);
    font-size:9px;
    font-weight:800;
}

/* =========================================================
   RIGHT AUTH AREA
========================================================= */

.auth-area{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:45px;
    background:#fff;
}

.auth{
    width:100%;
    max-width:430px;
}

/* =========================================================
   TOP BAR
========================================================= */

.auth-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:32px;
}

.secure{
    display:flex;
    align-items:center;
    gap:7px;
    color:#8aa0ac;
    font-size:9px;
    font-weight:700;
}

.secure-icon{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#edfff7;
    color:var(--green-dark);
}

/* =========================================================
   STATE
========================================================= */

.state{
    display:none;
    animation:stateIn .42s cubic-bezier(.2,.8,.2,1);
}

.state.active{
    display:block;
}

@keyframes stateIn{
    from{
        opacity:0;
        transform:translateY(14px);
    }

to{
        opacity:1;
        transform:translateY(0);
    }
}

.back{
    border:0;
    background:none;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    margin-bottom:22px;
}

.back:hover{
    color:var(--blue);
}

.kicker{
    color:var(--blue);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.auth h2{
    margin-top:9px;
    font-size:31px;
    line-height:1.15;
    letter-spacing:-1.5px;
}

.description{
    margin-top:10px;
    color:var(--muted);
    font-size:11px;
    line-height:1.75;
}

/* =========================================================
   FORM
========================================================= */

.field{
    margin-top:19px;
}

.field label{
    display:block;
    margin-bottom:8px;
    color:#527083;
    font-size:9px;
    font-weight:800;
    letter-spacing:.4px;
}

.input{
    width:100%;
    height:53px;
    border:1px solid var(--line);
    border-radius:14px;
    outline:none;
    padding:0 16px;
    background:#fbfdfe;
    color:var(--dark);
    font-size:12px;
    transition:.2s;
}

.input::placeholder{
    color:#a4b5bd;
}

.input:focus{
    background:#fff;
    border-color:#79ccec;
    box-shadow:0 0 0 4px rgba(21,159,231,.07);
}

/* =========================================================
   BUTTON
========================================================= */

.primary{
    width:100%;
    min-height:53px;
    margin-top:19px;
    border:0;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(
        100deg,
        var(--blue),
        #29b9df,
        var(--green)
    );
    box-shadow:0 15px 28px rgba(20,160,207,.19);
    font-size:10px;
    font-weight:800;
    letter-spacing:.5px;
    transition:.25s;
}

.primary:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(20,160,207,.25);
}

.primary:active{
    transform:translateY(0);
}

.secondary{
    width:100%;
    min-height:49px;
    margin-top:10px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    color:var(--blue-dark);
    font-size:10px;
    font-weight:800;
}

/* =========================================================
   CHOICE CARDS
========================================================= */

.choice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:22px;
}

.choice{
    position:relative;
    min-height:125px;
    padding:17px;
    text-align:left;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fbfdfe;
    transition:.25s;
}

.choice:hover{
    border-color:#90d4eb;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(30,130,160,.09);
}

.choice-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#eaf8fe;
    color:var(--blue-dark);
    font-size:15px;
}

.choice.green .choice-icon{
    background:#edfff7;
    color:var(--green-dark);
}

.choice strong{
    display:block;
    margin-top:12px;
    font-size:11px;
}

.choice span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:8px;
    line-height:1.5;
}

/* =========================================================
   LINKS
========================================================= */

.link-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    margin-top:18px;
    color:var(--muted);
    font-size:9px;
}

.link{
    border:0;
    background:none;
    color:var(--blue-dark);
    font-size:9px;
    font-weight:800;
}

.link:hover{
    text-decoration:underline;
}

/* =========================================================
   IDENTIFIER BADGE
========================================================= */

.identity-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:19px;
    padding:12px 14px;
    border:1px solid #dceef4;
    border-radius:13px;
    background:#f6fcfe;
}

.identity-label{
    color:var(--muted);
    font-size:8px;
}

.identity-value{
    margin-top:4px;
    color:var(--dark);
    font-size:10px;
    font-weight:800;
}

.change{
    border:0;
    background:none;
    color:var(--blue);
    font-size:8px;
    font-weight:800;
}

/* =========================================================
   OTP
========================================================= */

.otp-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:7px;
    margin-top:22px;
}

.otp{
    width:100%;
    height:51px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fbfdfe;
    text-align:center;
    font-size:17px;
    font-weight:800;
    color:var(--blue-dark);
    outline:none;
}

.otp:focus{
    background:#fff;
    border-color:#7dccec;
    box-shadow:0 0 0 4px rgba(21,159,231,.07);
}

.otp-info{
    margin-top:15px;
    padding:11px;
    border:1px solid #e0eff4;
    border-radius:12px;
    background:#f5fbfd;
    text-align:center;
    color:var(--muted);
    font-size:8px;
}

.otp-info strong{
    color:var(--dark);
}

.resend{
    margin-top:14px;
    text-align:center;
    color:var(--muted);
    font-size:8px;
}

.resend button{
    border:0;
    background:none;
    color:var(--blue-dark);
    font-weight:800;
}

/* =========================================================
   PASSWORD
========================================================= */

.password{
    position:relative;
}

.password .input{
    padding-right:50px;
}

.eye{
    position:absolute;
    right:9px;
    top:9px;
    width:35px;
    height:35px;
    border:0;
    background:transparent;
    color:#8ca1ad;
}

.strength{
    margin-top:9px;
}

.strength-bar{
    display:flex;
    gap:4px;
}

.strength-bar span{
    height:4px;
    flex:1;
    border-radius:4px;
    background:#e9f1f4;
}

.strength-text{
    margin-top:6px;
    color:var(--muted);
    font-size:8px;
}

/* =========================================================
   CHECKBOX
========================================================= */

.check{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:15px;
    color:var(--muted);
    font-size:8px;
    line-height:1.5;
}

.check input{
    margin-top:2px;
    accent-color:var(--blue);
}

/* =========================================================
   ERROR
========================================================= */

.error{
    display:none;
    margin-top:12px;
    padding:10px 12px;
    border:1px solid #ffd5d5;
    border-radius:10px;
    background:#fff4f4;
    color:#e56870;
    font-size:8px;
    line-height:1.5;
}

.error.show{
    display:block;
}

/* =========================================================
   SUCCESS
========================================================= */

.success-icon{
    width:92px;
    height:92px;
    margin:5px auto 25px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#edfff7;
    border:1px solid #bdeedb;
    color:var(--green-dark);
    font-size:35px;
    animation:success .6s ease;
}

@keyframes success{
    0%{
        opacity:0;
        transform:scale(.5);
    }

70%{
        transform:scale(1.08);
    }

100%{
        opacity:1;
        transform:scale(1);
    }
}

.center{
    text-align:center;
}

.customer-card{
    margin-top:23px;
    padding:15px;
    border:1px solid #dfedf2;
    border-radius:15px;
    background:#f7fcfe;
    text-align:left;
}

.customer-row{
    display:flex;
    justify-content:space-between;
    padding:7px 0;
    font-size:9px;
}

.customer-row span{
    color:var(--muted);
}

.customer-row strong{
    color:var(--dark);
}

/* =========================================================
   DASHBOARD OPTIONS
========================================================= */

.dashboard-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:23px;
}

.dashboard-item{
    min-height:110px;
    padding:17px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fbfdfe;
    text-align:left;
    transition:.2s;
}

.dashboard-item:hover{
    transform:translateY(-3px);
    border-color:#8bd3ea;
}

.dashboard-item div{
    font-size:18px;
}

.dashboard-item strong{
    display:block;
    margin-top:13px;
    font-size:10px;
}

.dashboard-item span{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:8px;
}

/* =========================================================
   LOADING
========================================================= */

.loading{
    width:100%;
    height:5px;
    margin-top:25px;
    overflow:hidden;
    border-radius:10px;
    background:#edf5f8;
}

.loading-bar{
    width:0;
    height:100%;
    border-radius:10px;
    background:linear-gradient(90deg,var(--blue),var(--green));
    transition:width 2.4s linear;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:950px){

.shell{
        grid-template-columns:1fr;
        max-width:650px;
    }

.visual{
        min-height:430px;
    }

.visual-content{
        margin-top:65px;
    }

.visual h1{
        font-size:43px;
    }

.network{
        height:210px;
    }

.auth-area{
        padding:38px 35px 45px;
    }
}

@media(max-width:600px){

body{
        background:#f5fcff;
    }

.page{
        padding:0;
        align-items:stretch;
    }

.shell{
        min-height:100vh;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

.visual{
        min-height:390px;
        padding:24px 20px;
    }

.brand{
        gap:9px;
    }

.logo{
        width:40px;
        height:40px;
        border-radius:12px;
    }

.brand-text{
        font-size:18px;
    }

.visual-content{
        margin-top:48px;
    }

.visual h1{
        font-size:34px;
        letter-spacing:-1.8px;
    }

.visual-description{
        font-size:10px;
        line-height:1.7;
    }

.network{
        height:165px;
        margin-top:10px;
        transform:scale(.82);
        transform-origin:left top;
        width:122%;
    }

.network-info{
        display:none;
    }

.status{
        margin-top:-40px;
    }

.auth-area{
        padding:30px 20px 40px;
        align-items:flex-start;
    }

.auth{
        max-width:none;
    }

.auth-top{
        margin-bottom:25px;
    }

.auth h2{
        font-size:27px;
    }

.choice-grid{
        gap:8px;
    }

.choice{
        min-height:115px;
        padding:14px;
    }

.dashboard-grid{
        gap:8px;
    }

.dashboard-item{
        min-height:100px;
    }
}

@media(max-width:390px){

.visual{
        min-height:365px;
    }

.visual h1{
        font-size:30px;
    }

.network{
        transform:scale(.72);
        width:135%;
    }

.auth-area{
        padding-left:16px;
        padding-right:16px;
    }

.auth h2{
        font-size:25px;
    }

.choice-grid{
        grid-template-columns:1fr;
    }

.choice{
        min-height:90px;
    }

.choice-icon{
        float:left;
        margin-right:12px;
    }

.choice strong{
        padding-top:4px;
    }

.otp-grid{
        gap:4px;
    }

.otp{
        height:46px;
    }
}
</style>
</head>

<body>

<div class="brand-text">
            Fiber<span>Net</span>
        </div>

</div>

<div class="live-pill">
            <span class="live-dot"></span>
            NETWORK ONLINE
        </div>

<h1>
            Your connection.<br>
            <span>Your control.</span>
        </h1>

<p class="visual-description">
            Securely access your FiberNet account,
            manage your broadband connection, pay bills,
            upgrade plans and get support.
        </p>

</div>

<div class="stat">
                <strong>1 Gbps</strong>
                <span>Fiber Speed</span>
            </div>

<div class="stat">
                <strong>99.9%</strong>
                <span>Uptime</span>
            </div>

<div class="stat">
                <strong>24/7</strong>
                <span>Support</span>
            </div>

</div>

<div>
                    <div class="status-title">
                        Fiber Network
                    </div>

<div class="status-sub">
                        All services operational
                    </div>
                </div>

</div>

<div class="status-right">
                ● STABLE
            </div>

</div>

</section>

<div class="secure">
            <div class="secure-icon">✓</div>
            Secure access
        </div>

<div class="secure">
            FiberNet ISP
        </div>

</div>

<div class="kicker">
        CUSTOMER ACCESS
    </div>

<h2>
        Welcome to FiberNet
    </h2>

<p class="description">
        Enter your registered email address or mobile
        number to continue.
    </p>

<label>
            EMAIL OR MOBILE NUMBER
        </label>

</div>

<button
        class="primary"
        onclick="identifyCustomer()">
        CONTINUE →
    </button>

<span>New to FiberNet?</span>

<button
            class="link"
            onclick="showState('signupDetails')">
            Create account
        </button>

</div>

<button
            class="link"
            onclick="showState('forgot')">
            Forgot password?
        </button>

</div>

<button
        class="back"
        onclick="showState('identify')">
        ← Change email / mobile
    </button>

<div class="kicker">
        EXISTING CUSTOMER
    </div>

<h2>
        Welcome back 👋
    </h2>

<p class="description">
        Your FiberNet account was found. Choose how
        you want to sign in.
    </p>

<div>
            <div class="identity-label">
                ACCOUNT IDENTIFIER
            </div>

<button
            class="change"
            onclick="showState('identify')">
            CHANGE
        </button>

</div>

<strong>Password</strong>

<span>
                Sign in using your account password.
            </span>

</button>

<strong>One-Time Password</strong>

<span>
                Receive a secure OTP instantly.
            </span>

</button>

</div>

<button
        class="back"
        onclick="showState('loginChoice')">
        ← Other login method
    </button>

<div class="kicker">
        PASSWORD LOGIN
    </div>

<h2>
        Sign in securely
    </h2>

<p class="description">
        Enter your FiberNet account password.
    </p>

<div>

<div class="identity-label">
                SIGNING IN AS
            </div>

</div>

<label>
            ACCOUNT PASSWORD
        </label>

</div>

<button
            class="link"
            onclick="startLoginOTP()">
            Login with OTP
        </button>

<button
            class="link"
            onclick="showState('forgot')">
            Forgot password?
        </button>

</div>

<button
        class="back"
        onclick="showState('loginChoice')">
        ← Other login method
    </button>

<div class="kicker">
        LOGIN • OTP
    </div>

<h2>
        Verify your account
    </h2>

<p class="description">
        Enter the verification code sent to your
        registered contact.
    </p>

Code sent to

</div>

</div>

<button
        class="primary"
        onclick="verifyLoginOTP()">
        VERIFY & SIGN IN →
    </button>

<span id="loginResendText">
            Resend OTP in 00:30
        </span>

<button
            id="loginResendButton"
            style="display:none"
            onclick="resendLoginOTP()">
            Resend OTP
        </button>

</div>

<button
        class="back"
        onclick="showState('identify')">
        ← Back to login
    </button>

<div class="kicker">
        NEW CUSTOMER
    </div>

<h2>
        Create your FiberNet account
    </h2>

<p class="description">
        Enter your details. We'll verify your email or
        mobile number before creating your account.
    </p>

</div>

<label>
            EMAIL ADDRESS
        </label>

</div>

<label>
            MOBILE NUMBER
        </label>

</div>

<button
        class="primary"
        onclick="continueSignup()">
        CONTINUE →
    </button>

</div>

<button
        class="back"
        onclick="showState('signupDetails')">
        ← Edit details
    </button>

<div class="kicker">
        ACCOUNT SECURITY
    </div>

<h2>
        How do you want to create it?
    </h2>

<p class="description">
        Choose password signup or a passwordless OTP
        account.
    </p>

<strong>Password</strong>

<span>
                Verify your contact and create a password.
            </span>

</button>

<span>
                Create a passwordless account with OTP.
            </span>

</button>

</div>

<button
        class="back"
        onclick="showState('signupMethod')">
        ← Other signup method
    </button>

<div class="kicker">
        VERIFY CONTACT
    </div>

<h2>
        Verify your details
    </h2>

<p class="description">
        We need to verify the contact information
        associated with your new FiberNet account.
    </p>

<div>

<div class="identity-label">
                EMAIL
            </div>

</div>

<strong style="color:#20b87b;font-size:9px">
            ● REQUIRED
        </strong>

</div>

<div>

<div class="identity-label">
                MOBILE
            </div>

</div>

<strong style="color:#20b87b;font-size:9px">
            ● REQUIRED
        </strong>

</div>

<button
        class="primary"
        onclick="beginSignupPasswordVerification()">
        START VERIFICATION →
    </button>

</div>

<button
        class="back"
        onclick="showState('signupMethod')">
        ← Other signup method
    </button>

<div class="kicker">
        SIGNUP • OTP
    </div>

<h2>
        Verify your contact
    </h2>

<p class="description">
        Enter the OTP sent to your registered email or
        mobile number.
    </p>

Verification code sent to

</div>

</div>

<button
        class="primary"
        onclick="verifySignupOTP()">
        VERIFY & CREATE ACCOUNT →
    </button>

<span id="signupResendText">
            Resend OTP in 00:30
        </span>

<button
            id="signupResendButton"
            style="display:none"
            onclick="resendSignupOTP()">
            Resend OTP
        </button>

</div>

<div class="kicker">
        ACCOUNT SECURITY
    </div>

<h2>
        Secure your account
    </h2>

<p class="description">
        Your contact details are verified. Now create
        a password for your FiberNet account.
    </p>

<label>
            CREATE PASSWORD
        </label>

</div>

</div>

<div
                class="strength-text"
                id="strengthText">
                Enter a password
            </div>

</div>

<label>
            CONFIRM PASSWORD
        </label>

</div>

<span>
            I agree to the FiberNet Terms & Conditions
            and Privacy Policy.
        </span>

</label>

<button
        class="primary"
        onclick="createPasswordAccount()">
        CREATE ACCOUNT →
    </button>

</div>

<button
        class="back"
        onclick="showState('identify')">
        ← Back to login
    </button>

<div class="kicker">
        ACCOUNT RECOVERY
    </div>

<h2>
        Forgot your password?
    </h2>

<p class="description">
        Enter your registered email or mobile number.
        We'll send you a verification OTP.
    </p>

<label>
            EMAIL OR MOBILE NUMBER
        </label>

</div>

<button
        class="primary"
        onclick="startForgot()">
        SEND RECOVERY OTP →
    </button>

</div>

<button
        class="back"
        onclick="showState('forgot')">
        ← Change account
    </button>

<div class="kicker">
        RECOVERY • OTP
    </div>

<h2>
        Verify your account
    </h2>

<p class="description">
        Enter the OTP sent to your registered contact.
    </p>

Code sent to

</div>

</div>

<button
        class="primary"
        onclick="verifyForgotOTP()">
        VERIFY OTP →
    </button>

</div>

<div class="kicker">
        ACCOUNT RECOVERY
    </div>

<h2>
        Create a new password
    </h2>

<p class="description">
        Your identity has been verified. Create a new
        password to secure your account.
    </p>

<label>
            NEW PASSWORD
        </label>

</div>

<label>
            CONFIRM NEW PASSWORD
        </label>

</div>

<button
        class="primary"
        onclick="saveNewPassword()">
        UPDATE PASSWORD →
    </button>

</div>

◌

</div>

<div class="kicker">
            SECURE CONNECTION
        </div>

<h2>
            Preparing your account
        </h2>

<p class="description">
            We're securely connecting you to the
            FiberNet customer portal.
        </p>

</div>

<div class="kicker">
            AUTHENTICATION COMPLETE
        </div>

<h2>
            You're connected!
        </h2>

<p class="description">
            Your FiberNet account has been successfully
            authenticated.
        </p>

<span>
                    Customer
                </span>

<strong id="successName">
                    FiberNet Customer
                </strong>

</div>

<span>
                    Customer ID
                </span>

</div>

<span>
                    Connection
                </span>

<strong>
                    Fiber Broadband
                </strong>

</div>

<span>
                    Status
                </span>

<strong style="color:#20b87b">
                    ● Active
                </strong>

</div>

<button
            class="primary"
            onclick="showDashboard()">
            ENTER CUSTOMER PORTAL →
        </button>

</div>

<button
        class="back"
        onclick="showState('success')">
        ← Account
    </button>

<div class="kicker">
        CUSTOMER HUB
    </div>

<h2>
        What would you like to do?
    </h2>

<p class="description">
        Manage your FiberNet connection from one place.
    </p>

<strong>
                My Connection
            </strong>

<span>
                View your active broadband service.
            </span>

</button>

<span>
                Pay your latest internet bill.
            </span>

</button>

<strong>
                Upgrade Plan
            </strong>

<span>
                Explore faster Fiber plans.
            </span>

</button>

<strong>
                Support
            </strong>

<span>
                Get help with your connection.
            </span>

</button>

</div>

</section>

</div>

/* =========================================================
   GLOBAL STATE
========================================================= */

const app = {

identity:"",
    name:"",
    email:"",
    mobile:"",

flow:"",
    verificationTarget:"",

signupPasswordVerified:false,

otpTimer:null,
    otpSeconds:30

};

/* =========================================================
   HELPERS
========================================================= */

function $(id){
    return document.getElementById(id);
}

function hideAllStates(){

document
        .querySelectorAll(".state")
        .forEach(state=>{
            state.classList.remove("active");
        });

}

function showState(name){

hideAllStates();

const state = $("state" + capitalize(name));

if(state){
        state.classList.add("active");
    }

window.scrollTo({
        top:0,
        behavior:"smooth"
    });

}

function capitalize(value){

return value.charAt(0).toUpperCase() + value.slice(1);

}

/* =========================================================
   ERROR
========================================================= */

function showError(id,message){

const el = $(id);

if(!el) return;

el.innerText = message;
    el.classList.add("show");

}

function clearError(id){

const el = $(id);

if(el){
        el.classList.remove("show");
        el.innerText = "";
    }

}

/* =========================================================
   IDENTIFIER
========================================================= */

function identifyCustomer(){

clearError("identityError");

const value =
        $("identityInput").value.trim();

if(!value){

showError(
            "identityError",
            "Please enter your email address or mobile number."
        );

$("identityInput").focus();

return;
    }

if(!isValidEmail(value) && !isValidMobile(value)){

showError(
            "identityError",
            "Please enter a valid email address or mobile number."
        );

return;
    }

app.identity = value;

/*
       DEMO LOGIC

Existing customers:
       use a value containing "existing"

Example:
       existing@example.com

+919999999999

In Odoo replace this section with RPC.
    */

const isExisting =
        value.toLowerCase().includes("existing") ||
        value.replace(/\D/g,"").endsWith("9999999999");

if(isExisting){

$("loginIdentity").innerText =
            mask(value);

$("passwordIdentity").innerText =
            mask(value);

showState("loginChoice");

}else{

/*
           For demo, if unknown user enters
           the identifier, offer signup.
        */

$("signupEmail").value =
            isValidEmail(value) ? value : "";

$("signupMobile").value =
            isValidMobile(value) ? value : "";

showState("signupDetails");

}

/* =========================================================
   VALIDATION
========================================================= */

function isValidEmail(value){

return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);

}

function isValidMobile(value){

const digits =
        value.replace(/\D/g,"");

return digits.length >= 10;

}

/* =========================================================
   SIGNUP DETAILS
========================================================= */

function continueSignup(){

clearError("signupDetailsError");

const name =
        $("signupName").value.trim();

const email =
        $("signupEmail").value.trim();

const mobile =
        $("signupMobile").value.trim();

if(!name){

showError(
            "signupDetailsError",
            "Please enter your full name."
        );

return;
    }

if(!email && !mobile){

showError(
            "signupDetailsError",
            "Enter at least an email address or mobile number."
        );

return;
    }

if(email && !isValidEmail(email)){

showError(
            "signupDetailsError",
            "Please enter a valid email address."
        );

return;
    }

if(mobile && !isValidMobile(mobile)){

showError(
            "signupDetailsError",
            "Please enter a valid mobile number."
        );

return;
    }

app.name = name;
    app.email = email;
    app.mobile = mobile;

showState("signupMethod");

}

/* =========================================================
   SIGNUP PASSWORD FLOW
========================================================= */

function startSignupPassword(){

$("signupEmailDisplay").innerText =
        app.email || "Not provided";

$("signupMobileDisplay").innerText =
        app.mobile || "Not provided";

$("signupVerifyEmailCard").style.display =
        app.email ? "flex" : "none";

$("signupVerifyMobileCard").style.display =
        app.mobile ? "flex" : "none";

showState("signupPasswordVerify");

}

function beginSignupPasswordVerification(){

/*
       If both are provided:
       verify email first.

If only mobile:
       verify mobile.

If only email:
       verify email.
    */

if(app.email){

app.verificationTarget = "email";

startSignupVerificationOTP();

return;
    }

if(app.mobile){

app.verificationTarget = "mobile";

startSignupVerificationOTP();

return;
    }

}

function startSignupVerificationOTP(){

app.flow = "signup-password";

$("signupOtpDestination").innerText =
        mask(
            app.verificationTarget === "email"
            ? app.email
            : app.mobile
        );

clearOTPFields();

showState("signupOTP");

startTimer(
        "signupResendText",
        "signupResendButton"
    );

focusFirstOTP();

}

/* =========================================================
   SIGNUP OTP FLOW
========================================================= */

function startSignupOTP(){

app.flow = "signup-otp";

if(app.email){

app.verificationTarget = "email";

}else{

app.verificationTarget = "mobile";

}

$("signupOtpDestination").innerText =
        mask(
            app.verificationTarget === "email"
            ? app.email
            : app.mobile
        );

clearOTPFields();

showState("signupOTP");

startTimer(
        "signupResendText",
        "signupResendButton"
    );

focusFirstOTP();

}

function verifySignupOTP(){

clearError("signupOtpError");

const otp =
        getOTP();

if(otp.length !== 6){

showError(
            "signupOtpError",
            "Please enter the complete 6-digit OTP."
        );

return;
    }

if(otp !== "123456"){

showError(
            "signupOtpError",
            "Invalid OTP. For this demo use 123456."
        );

return;
    }

/*
       SIGNUP WITH OTP
    */

if(app.flow === "signup-otp"){

startConnection();

return;
    }

/*
       SIGNUP WITH PASSWORD

If email + mobile exist,
       verify email first and then mobile.
    */

if(
        app.verificationTarget === "email" &&
        app.mobile
    ){

app.verificationTarget = "mobile";

$("signupOtpDestination").innerText =
            mask(app.mobile);

clearOTPFields();

startTimer(
            "signupResendText",
            "signupResendButton"
        );

focusFirstOTP();

return;
    }

/*
       All required contacts verified.
    */

app.signupPasswordVerified = true;

showState("createPassword");

}

/* =========================================================
   CREATE PASSWORD
========================================================= */

function createPasswordAccount(){

clearError("signupPasswordError");

const password =
        $("signupPassword").value;

const confirm =
        $("signupPasswordConfirm").value;

if(password.length < 8){

showError(
            "signupPasswordError",
            "Password must contain at least 8 characters."
        );

return;
    }

if(password !== confirm){

showError(
            "signupPasswordError",
            "Passwords do not match."
        );

return;
    }

if(!$("signupTerms").checked){

showError(
            "signupPasswordError",
            "Please accept the Terms & Conditions."
        );

return;
    }

startConnection();

}

/* =========================================================
   LOGIN PASSWORD
========================================================= */

function loginPassword(){

clearError("loginPasswordError");

const password =
        $("loginPassword").value;

if(!password){

showError(
            "loginPasswordError",
            "Please enter your account password."
        );

return;
    }

/*
       Odoo:
       Replace this with an RPC/API login request.
    */

startConnection();

}

/* =========================================================
   LOGIN OTP
========================================================= */

function startLoginOTP(){

app.flow = "login-otp";

$("loginOtpDestination").innerText =
        mask(app.identity);

clearOTPFields();

showState("loginOTP");

startTimer(
        "loginResendText",
        "loginResendButton"
    );

focusFirstOTP();

}

function verifyLoginOTP(){

clearError("loginOtpError");

const otp =
        getOTP();

if(otp.length !== 6){

showError(
            "loginOtpError",
            "Please enter the complete 6-digit OTP."
        );

return;
    }

if(otp !== "123456"){

showError(
            "loginOtpError",
            "Invalid OTP. For this demo use 123456."
        );

return;
    }

startConnection();

}

/* =========================================================
   FORGOT PASSWORD
========================================================= */

function startForgot(){

clearError("forgotError");

const value =
        $("forgotInput").value.trim();

if(!value){

showError(
            "forgotError",
            "Please enter your registered email or mobile number."
        );

return;
    }

if(!isValidEmail(value) && !isValidMobile(value)){

showError(
            "forgotError",
            "Please enter a valid email or mobile number."
        );

return;
    }

app.identity = value;

$("forgotOtpDestination").innerText =
        mask(value);

clearOTPFields();

showState("forgotOTP");

}

function verifyForgotOTP(){

clearError("forgotOtpError");

const otp =
        getOTP();

if(otp.length !== 6){

showError(
            "forgotOtpError",
            "Please enter the complete OTP."
        );

return;
    }

if(otp !== "123456"){

showError(
            "forgotOtpError",
            "Invalid OTP. For this demo use 123456."
        );

return;
    }

showState("newPassword");

}

function saveNewPassword(){

clearError("newPasswordError");

const password =
        $("newPassword").value;

const confirm =
        $("newPasswordConfirm").value;

if(password.length < 8){

showError(
            "newPasswordError",
            "Password must contain at least 8 characters."
        );

return;
    }

if(password !== confirm){

showError(
            "newPasswordError",
            "Passwords do not match."
        );

return;
    }

startConnection();

}

/* =========================================================
   CONNECTION
========================================================= */

function startConnection(){

showState("connecting");

$("loadingBar").style.width = "0%";

setTimeout(()=>{

$("loadingBar").style.width = "100%";

},100);

setTimeout(()=>{

$("successName").innerText =
            app.name || "FiberNet Customer";

$("successId").innerText =
            generateCustomerId();

showState("success");

},2600);

}

/* =========================================================
   DASHBOARD
========================================================= */

function showDashboard(){

showState("dashboard");

}

function demoAction(name){

alert(
        name +
        "\n\nDemo action.\n\n" +
        "Connect this button to your Odoo 19 " +
        "customer portal route/RPC."
    );

}

/* =========================================================
   CUSTOMER ID
========================================================= */

function generateCustomerId(){

return "FN-" +
        Math.floor(
            10000 +
            Math.random() * 89999
        );

}

/* =========================================================
   PASSWORD
========================================================= */

function togglePassword(id,button){

const input = $(id);

if(input.type === "password"){

input.type = "text";
        button.innerText = "◉";

}else{

input.type = "password";
        button.innerText = "◉";

}

function checkPasswordStrength(){

const password =
        $("signupPassword").value;

const bars =
        document.querySelectorAll(".strength-bar span");

let score = 0;

if(password.length >= 8)
        score++;

if(/[A-Z]/.test(password))
        score++;

if(/[0-9]/.test(password))
        score++;

if(/[^A-Za-z0-9]/.test(password))
        score++;

bars.forEach((bar,index)=>{

bar.style.background =
            index < score
            ? "linear-gradient(90deg,var(--blue),var(--green))"
            : "#e9f1f4";

});

const text =
        $("strengthText");

if(!password){

text.innerText =
            "Enter a password";

}else if(score <= 1){

text.innerText =
            "Weak password";

}else if(score === 2){

text.innerText =
            "Fair password";

}else if(score === 3){

text.innerText =
            "Good password";

}else{

text.innerText =
            "Strong password";

}

/* =========================================================
   MASK
========================================================= */

function mask(value){

if(!value)
        return "your registered contact";

if(value.includes("@")){

const parts =
            value.split("@");

const name =
            parts[0];

const masked =
            name.length > 2
            ? name.substring(0,2) + "•••"
            : "•••";

return masked + "@" + parts[1];

}

const digits =
        value.replace(/\D/g,"");

if(digits.length >= 10){

return "+91 ••••• " +
            digits.slice(-4);

}

if(value.length > 4){

return value.slice(0,2) +
            "•••" +
            value.slice(-2);

}

return "••••••";

}

/* =========================================================
   OTP
========================================================= */

function getOTP(){

const inputs =
        document.querySelectorAll(".state.active .otp");

let value = "";

inputs.forEach(input=>{
        value += input.value;
    });

return value;

}

function clearOTPFields(){

document
        .querySelectorAll(".otp")
        .forEach(input=>{
            input.value = "";
        });

}

function focusFirstOTP(){

setTimeout(()=>{

const input =
            document.querySelector(
                ".state.active .otp"
            );

if(input)
            input.focus();

},250);

}

/* =========================================================
   OTP INPUT HANDLING
========================================================= */

document.addEventListener("input",function(event){

if(!event.target.classList.contains("otp"))
        return;

event.target.value =
        event.target.value.replace(/\D/g,"").slice(0,1);

if(!event.target.value)
        return;

const current =
        event.target;

const inputs =
        [...document.querySelectorAll(
            ".state.active .otp"
        )];

const index =
        inputs.indexOf(current);

if(index >= 0 && index < inputs.length - 1){

inputs[index + 1].focus();

}

});

document.addEventListener("keydown",function(event){

if(!event.target.classList.contains("otp"))
        return;

if(event.key !== "Backspace")
        return;

if(event.target.value)
        return;

const inputs =
        [...document.querySelectorAll(
            ".state.active .otp"
        )];

const index =
        inputs.indexOf(event.target);

if(index > 0)
        inputs[index - 1].focus();

});

document.addEventListener("paste",function(event){

if(!event.target.classList.contains("otp"))
        return;

event.preventDefault();

const value =
        (event.clipboardData || window.clipboardData)
        .getData("text")
        .replace(/\D/g,"")
        .slice(0,6);

const inputs =
        [...document.querySelectorAll(
            ".state.active .otp"
        )];

value.split("").forEach((digit,index)=>{

if(inputs[index])
            inputs[index].value = digit;

});

if(value.length === 6)
        inputs[5].focus();

});

/* =========================================================
   RESEND TIMER
========================================================= */

function startTimer(textId,buttonId){

if(app.otpTimer)
        clearInterval(app.otpTimer);

app.otpSeconds = 30;

$(textId).style.display =
        "inline";

$(buttonId).style.display =
        "none";

updateTimer(textId);

app.otpTimer =
        setInterval(()=>{

app.otpSeconds--;

updateTimer(textId);

if(app.otpSeconds <= 0){

clearInterval(app.otpTimer);

$(textId).style.display =
                    "none";

$(buttonId).style.display =
                    "inline";

}

},1000);

}

function updateTimer(textId){

$(textId).innerText =
        "Resend OTP in 00:" +
        String(app.otpSeconds).padStart(2,"0");

}

function resendLoginOTP(){

clearOTPFields();

startTimer(
        "loginResendText",
        "loginResendButton"
    );

focusFirstOTP();

}

function resendSignupOTP(){

clearOTPFields();

startTimer(
        "signupResendText",
        "signupResendButton"
    );

focusFirstOTP();

}

/* =========================================================
   ENTER KEY
========================================================= */

document.addEventListener("keydown",function(event){

if(event.key !== "Enter")
        return;

const active =
        document.querySelector(".state.active");

if(!active)
        return;

switch(active.id){

case "stateIdentify":
            identifyCustomer();
            break;

case "stateLoginPassword":
            loginPassword();
            break;

case "stateLoginOTP":
            verifyLoginOTP();
            break;

case "stateSignupDetails":
            continueSignup();
            break;

case "stateSignupOTP":
            verifySignupOTP();
            break;

case "stateCreatePassword":
            createPasswordAccount();
            break;

case "stateForgot":
            startForgot();
            break;

case "stateForgotOTP":
            verifyForgotOTP();
            break;

case "stateNewPassword":
            saveNewPassword();
            break;

}

});

/* =========================================================
   INITIAL
========================================================= */

showState("identify");

</script>

</body>
</html>

Rate this design:

LOGIN3 by VEDANT SOMANI 09/07/2026

0.0 (0)

FiberNet — ISP Customer Portal

FiberNet

ISP NETWORK ONLINE

Your internet.
Your control.

Securely manage your FiberNet broadband, plans, payments and customer services from one connected portal.

✓

Fiber Network

Broadband services operational

● STABLE

ISP CUSTOMER PORTAL

Welcome to FiberNet

REGISTERED MOBILE NUMBER

New FiberNet customer?

✓ Secure ISP customer authentication

CUSTOMER LOGIN

Choose your login

Continue with a password or receive a secure one-time verification code.

🔐

Account: —

Welcome back

Enter your FiberNet password to access your customer account.

🔐

Password authentication

—

ACCOUNT PASSWORD

Verify your account

Enter the verification code sent to your registered email or mobile number.

📱

OTP verification

Code sent to —

✓ OTP verified successfully

Resend OTP in 00:30

NEW FIBERNET CUSTOMER

Create your account

Choose how you want to create your FiberNet customer account.

SIGNUP • PASSWORD

Create your account

Enter your details. After creating your password, we'll verify your email or mobile with OTP.

FULL NAME

EMAIL OR MOBILE NUMBER

CREATE PASSWORD

CONFIRM PASSWORD

I agree to the FiberNet Terms & Conditions and Privacy Policy.

SIGNUP • OTP

Create with OTP

Enter your name and email/mobile number. We'll verify it before creating your account.

FULL NAME

EMAIL OR MOBILE NUMBER

ACCOUNT VERIFICATION

Verify your details

Enter the OTP sent to your registered contact.

✓

Verify your account

Code sent to —

✓ Details verified successfully

Resend OTP in 00:30

ACCOUNT RECOVERY

Forgot your password?

Enter your registered email or mobile number. We'll send an OTP to verify your account.

EMAIL OR MOBILE NUMBER

PASSWORD RECOVERY

Verify your account

Enter the OTP sent to your registered email or mobile number.

Code sent to —

RECOVERY • NEW PASSWORD

Create new password

Your account is verified. Create a new secure password for your FiberNet account.

NEW PASSWORD

CONFIRM NEW PASSWORD

✓ Password updated successfully.

AUTHENTICATED

Connecting your account

We're securely preparing your FiberNet customer dashboard.

✓

CONNECTION VERIFIED

You're connected!

Your FiberNet account has been successfully authenticated.

Customer FiberNet Customer

Connection Fiber Broadband

Service ● Active

Authentication Verified

✓ Secure ISP session established

FIBERNET CUSTOMER PORTAL

Welcome back 👋

Your broadband connection is active.

FiberNet Pro

200 Mbps

₹799 Monthly Plan

Active Connection

12 GB Today's Usage

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<title>FiberNet — ISP Customer Portal</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --blue:#159ee8;
    --blue-dark:#0879c4;
    --cyan:#42c8ef;
    --green:#35d39a;
    --green-dark:#1eaf78;

    --ink:#123449;
    --muted:#7893a3;

    --border:#dcecf3;
    --soft:#f4fbfe;
    --white:#fff;

    --danger:#ed6b73;

    --shadow:
        0 35px 90px rgba(20,115,150,.14);

    --radius:30px;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    width:100%;
    min-height:100%;
    scroll-behavior:smooth;
}

body{
    width:100%;
    min-height:100vh;
    font-family:Inter,Arial,sans-serif;
    color:var(--ink);
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(66,200,239,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(53,211,154,.07),
            transparent 28%
        ),
        #f6fcff;

    overflow-x:hidden;
}

button,
input{
    font-family:inherit;
}

button{
    cursor:pointer;
}

button:focus-visible,
input:focus-visible{
    outline:3px solid rgba(21,158,232,.15);
}

/* =========================================================
   PAGE
========================================================= */

.page{
    width:100%;
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;
}

.app{
    width:min(1180px,100%);

    min-height:720px;

    display:grid;
    grid-template-columns:46% 54%;

    overflow:hidden;

    background:#fff;

    border:1px solid #e1eff5;
    border-radius:var(--radius);

    box-shadow:var(--shadow);
}

/* =========================================================
   LEFT ISP AREA
========================================================= */

.connection-area{
    position:relative;

    min-width:0;

    overflow:hidden;

    padding:45px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(66,200,239,.18),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(53,211,154,.14),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #f2fbff,
            #f8fffc
        );
}

.ring{
    position:absolute;

    border:1px solid rgba(21,158,232,.1);

    border-radius:50%;

    pointer-events:none;
}

.r1{
    width:500px;
    height:500px;

    left:-330px;
    top:100px;
}

.r2{
    width:700px;
    height:700px;

    left:-440px;
    top:0;
}

.r3{
    width:900px;
    height:900px;

    left:-550px;
    top:-120px;
}

/* =========================================================
   BRAND
========================================================= */

.brand{
    position:relative;
    z-index:10;

    display:flex;
    align-items:center;

    gap:12px;
}

.logo{
    width:45px;
    height:45px;

    flex-shrink:0;

    display:grid;
    place-items:center;

    color:white;

    font-size:19px;
    font-weight:800;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

    box-shadow:
        0 12px 25px rgba(21,158,232,.2);
}

.brand-name{
    font-size:20px;
    font-weight:800;

    letter-spacing:-.7px;
}

.brand-name span{
    color:var(--blue);
}

/* =========================================================
   HERO
========================================================= */

.connection-content{
    position:relative;
    z-index:5;

    margin-top:100px;
}

.connection-label{
    display:inline-flex;
    align-items:center;

    gap:8px;

    padding:8px 13px;

    background:#fff;

    border:1px solid #dceef4;

    border-radius:30px;

    color:var(--green-dark);

    font-size:10px;
    font-weight:800;

    letter-spacing:.8px;
}

.live{
    width:7px;
    height:7px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 0 5px rgba(53,211,154,.12);

    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{
        box-shadow:
            0 0 0 4px rgba(53,211,154,.10);
    }

    50%{
        box-shadow:
            0 0 0 8px rgba(53,211,154,.03);
    }
}

.connection-content h1{
    margin-top:20px;

    font-size:43px;
    line-height:1.08;

    letter-spacing:-2px;
}

.connection-content h1 span{
    color:var(--blue);
}

.connection-content > p{
    max-width:410px;

    margin-top:18px;

    color:var(--muted);

    font-size:13px;
    line-height:1.8;
}

/* =========================================================
   NETWORK
========================================================= */

.network-machine{
    position:relative;

    width:100%;
    height:250px;

    margin-top:25px;
}

.router{
    position:absolute;

    width:108px;
    height:108px;

    left:50%;
    top:48%;

    transform:translate(-50%,-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:28px;

    background:#fff;

    border:1px solid #cdebf4;

    box-shadow:
        0 0 0 10px rgba(255,255,255,.7),
        0 20px 40px rgba(29,129,163,.15);

    z-index:5;

    animation:routerFloat 4s ease-in-out infinite;
}

@keyframes routerFloat{
    0%,100%{
        transform:translate(-50%,-50%);
    }

    50%{
        transform:translate(-50%,-55%);
    }
}

.router-body{
    position:relative;

    width:55px;
    height:40px;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    box-shadow:
        0 10px 20px rgba(21,158,232,.25);
}

.router-body:before{
    content:"";

    position:absolute;

    left:12px;
    right:12px;
    bottom:8px;

    height:4px;

    border-radius:5px;

    background:rgba(255,255,255,.8);
}

.router-body:after{
    content:"";

    position:absolute;

    width:6px;
    height:6px;

    top:8px;
    right:10px;

    border-radius:50%;

    background:var(--green);
}

.router-antenna{
    position:absolute;

    width:2px;
    height:27px;

    top:-24px;

    background:#74b8d1;
}

.a1{
    left:32px;
    transform:rotate(-15deg);
}

.a2{
    right:32px;
    transform:rotate(15deg);
}

.net-node{
    position:absolute;

    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:white;

    border:1px solid #d3ebf2;

    box-shadow:
        0 10px 25px rgba(33,124,154,.1);

    z-index:4;
}

.net-node:after{
    content:"";

    width:11px;
    height:11px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 0 5px rgba(53,211,154,.1);

    animation:nodePulse 2s infinite;
}

@keyframes nodePulse{
    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.25);
    }
}

.node1{
    left:4%;
    top:45px;
}

.node2{
    right:4%;
    top:30px;
}

.node3{
    left:18%;
    bottom:15px;
}

.node4{
    right:17%;
    bottom:5px;
}

.fiber{
    position:absolute;

    height:2px;

    transform-origin:left center;

    background:
        linear-gradient(
            90deg,
            rgba(21,158,232,.08),
            var(--blue),
            rgba(53,211,154,.15)
        );

    z-index:2;
}

.f1{
    width:250px;
    left:9%;
    top:100px;
    transform:rotate(8deg);
}

.f2{
    width:250px;
    left:51%;
    top:90px;
    transform:rotate(-13deg);
}

.f3{
    width:230px;
    left:19%;
    top:145px;
    transform:rotate(24deg);
}

.f4{
    width:220px;
    left:52%;
    top:145px;
    transform:rotate(26deg);
}

.packet{
    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 0 5px rgba(53,211,154,.1);

    z-index:6;

    animation:packetMove 3s linear infinite;
}

.p1{
    top:97px;
    left:14%;
}

.p2{
    top:91px;
    left:63%;

    animation-delay:1s;
}

.p3{
    top:148px;
    left:29%;

    animation-delay:1.7s;
}

@keyframes packetMove{
    0%{
        opacity:0;
        transform:scale(.5);
    }

    20%{
        opacity:1;
    }

    70%{
        opacity:1;
        transform:scale(1.2);
    }

    100%{
        opacity:0;
        transform:scale(.5);
    }
}

/* =========================================================
   NETWORK STATUS
========================================================= */

.network-status{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:14px 16px;

    border-radius:16px;

    background:rgba(255,255,255,.82);

    border:1px solid #dceef3;
}

.status-left{
    min-width:0;

    display:flex;
    align-items:center;

    gap:10px;
}

.status-icon{
    width:33px;
    height:33px;

    flex-shrink:0;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:var(--green-dark);

    background:#edfff7;

    font-size:13px;
}

.status-title{
    font-size:11px;
    font-weight:800;
}

.status-sub{
    margin-top:3px;

    font-size:9px;

    color:var(--muted);
}

.status-right{
    flex-shrink:0;

    font-size:10px;
    font-weight:800;

    color:var(--green-dark);
}

/* =========================================================
   AUTH AREA
========================================================= */

.auth-area{
    position:relative;

    min-width:0;

    padding:45px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;
}

.auth{
    width:100%;
    max-width:420px;
}

/* =========================================================
   PROGRESS
========================================================= */

.progress{
    width:100%;

    display:flex;
    align-items:center;

    margin-bottom:35px;
}

.progress-item{
    min-width:0;

    display:flex;
    align-items:center;

    flex:1;
}

.progress-item:last-child{
    flex:0;
}

.progress-circle{
    width:30px;
    height:30px;

    min-width:30px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#f1f7fa;

    border:1px solid #dcecf2;

    color:#94a9b6;

    font-size:10px;
    font-weight:800;

    transition:.4s;
}

.progress-line{
    width:100%;
    height:2px;

    margin:0 7px;

    background:#e6f0f4;

    transition:.5s;
}

.progress-item.active .progress-circle{
    background:var(--blue);

    border-color:var(--blue);

    color:#fff;

    box-shadow:
        0 0 0 5px rgba(21,158,232,.08);
}

.progress-item.done .progress-circle{
    background:var(--green);

    border-color:var(--green);

    color:#fff;
}

.progress-item.done .progress-line{
    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );
}

/* =========================================================
   SCREENS
========================================================= */

.screen{
    display:none;

    animation:
        screenIn .42s cubic-bezier(.2,.8,.2,1);
}

.screen.active{
    display:block;
}

@keyframes screenIn{
    from{
        opacity:0;
        transform:translateX(18px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

.kicker{
    color:var(--blue);

    font-size:10px;
    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;
}

.auth h2{
    margin-top:9px;

    font-size:31px;

    line-height:1.15;

    letter-spacing:-1.4px;
}

.auth-description{
    margin-top:9px;

    color:var(--muted);

    font-size:12px;
    line-height:1.7;
}

/* =========================================================
   FORM
========================================================= */

.field{
    margin-top:20px;
}

.field label{
    display:block;

    margin-bottom:8px;

    color:#527083;

    font-size:10px;
    font-weight:800;

    letter-spacing:.3px;
}

.input{
    width:100%;
    height:53px;

    padding:0 17px;

    border:1px solid var(--border);

    border-radius:14px;

    outline:none;

    background:#fbfdfe;

    color:var(--ink);

    font-size:13px;

    transition:.25s;
}

.input::placeholder{
    color:#a7bac4;
}

.input:focus{
    background:#fff;

    border-color:#7dccec;

    box-shadow:
        0 0 0 4px rgba(21,158,232,.07);
}

/* =========================================================
   SELECTOR
========================================================= */

.customer-type{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:22px;
}

.customer-type button{
    min-height:58px;

    padding:10px;

    border:1px solid var(--border);

    background:#fbfdfe;

    border-radius:13px;

    color:var(--muted);

    font-size:10px;
    font-weight:700;

    transition:.2s;
}

.customer-type button.selected{
    background:#effaff;

    border-color:#91d4ee;

    color:var(--blue-dark);

    box-shadow:
        inset 0 0 0 1px rgba(21,158,232,.04);
}

/* =========================================================
   AUTH METHODS
========================================================= */

.method-buttons{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:22px;
}

.method{
    min-width:0;
    min-height:100px;

    padding:15px;

    text-align:left;

    border:1px solid var(--border);

    background:#fbfdfe;

    border-radius:14px;

    color:var(--muted);

    transition:.25s;
}

.method:hover{
    transform:translateY(-3px);

    border-color:#8bd3ef;

    background:#f5fcff;

    box-shadow:
        0 12px 25px rgba(21,158,232,.08);
}

.method strong{
    display:block;

    color:var(--ink);

    font-size:11px;
}

.method span{
    display:block;

    margin-top:8px;

    color:var(--muted);

    font-size:9px;

    line-height:1.5;
}

/* =========================================================
   BUTTONS
========================================================= */

.primary{
    width:100%;
    min-height:54px;

    margin-top:20px;

    border:0;

    border-radius:15px;

    color:#fff;

    background:
        linear-gradient(
            100deg,
            var(--blue),
            #27b8dd,
            var(--green)
        );

    font-size:11px;
    font-weight:800;

    letter-spacing:.3px;

    box-shadow:
        0 14px 28px rgba(24,164,207,.2);

    transition:.25s;
}

.primary:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 32px rgba(24,164,207,.25);
}

.primary:active{
    transform:translateY(0);
}

.secondary{
    width:100%;
    min-height:48px;

    margin-top:10px;

    border:1px solid var(--border);

    border-radius:13px;

    color:var(--blue-dark);

    background:#fff;

    font-size:10px;
    font-weight:800;
}

.link-row{
    display:flex;
    justify-content:center;
    align-items:center;

    flex-wrap:wrap;

    gap:5px;

    margin-top:18px;

    font-size:10px;

    color:var(--muted);
}

.link{
    border:0;

    background:none;

    color:var(--blue-dark);

    font-size:10px;
    font-weight:800;
}

.security{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:6px;

    margin-top:25px;

    color:#9aadb7;

    font-size:9px;
}

.lock{
    width:15px;
    height:15px;

    display:grid;
    place-items:center;

    border-radius:5px;

    color:var(--green-dark);

    background:#edfff7;
}

/* =========================================================
   INLINE AUTH PANEL
========================================================= */

.auth-panel{
    margin-top:22px;

    padding:20px;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #f8fdff,
            #f6fffb
        );

    border:1px solid #deeff4;

    animation:
        panelIn .35s cubic-bezier(.2,.8,.2,1);
}

@keyframes panelIn{
    from{
        opacity:0;
        transform:translateY(12px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.panel-head{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:5px;
}

.panel-icon{
    width:38px;
    height:38px;

    flex-shrink:0;

    display:grid;
    place-items:center;

    border-radius:12px;

    color:var(--blue-dark);

    background:#eaf8fe;

    font-size:16px;
}

.panel-title{
    font-size:14px;
    font-weight:800;
}

.panel-subtitle{
    margin-top:3px;

    color:var(--muted);

    font-size:9px;
}

/* =========================================================
   PASSWORD
========================================================= */

.password-wrap{
    position:relative;
}

.password-wrap .input{
    padding-right:52px;
}

.eye{
    position:absolute;

    right:8px;
    top:9px;

    width:37px;
    height:35px;

    border:0;

    background:transparent;

    color:var(--muted);

    font-size:14px;
}

/* =========================================================
   OTP
========================================================= */

.otp-info{
    margin-top:17px;

    padding:11px;

    text-align:center;

    border-radius:12px;

    background:#f4fbfe;

    border:1px solid #e0f0f5;

    color:var(--muted);

    font-size:9px;
}

.otp-info strong{
    color:var(--ink);
}

.otp-inputs{
    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:7px;

    margin-top:18px;
}

.otp{
    width:100%;
    min-width:0;

    height:52px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fbfdfe;

    outline:none;

    text-align:center;

    color:var(--blue-dark);

    font-size:17px;
    font-weight:800;
}

.otp:focus{
    border-color:#76caea;

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(21,158,232,.07);
}

.resend{
    text-align:center;

    margin-top:13px;

    color:var(--muted);

    font-size:9px;
}

.resend button{
    border:0;

    background:none;

    color:var(--blue-dark);

    font-weight:800;
}

/* =========================================================
   CHECKBOX
========================================================= */

.terms{
    display:flex;

    gap:8px;

    margin-top:15px;

    color:var(--muted);

    font-size:9px;

    line-height:1.5;
}

.terms input{
    flex-shrink:0;

    margin-top:2px;

    accent-color:var(--blue);
}

/* =========================================================
   ERRORS / SUCCESS
========================================================= */

.error{
    display:none;

    margin-top:12px;

    padding:10px;

    border-radius:10px;

    background:#fff3f3;

    border:1px solid #ffd5d5;

    color:var(--danger);

    font-size:9px;
}

.error.show{
    display:block;

    animation:
        shake .3s ease;
}

@keyframes shake{
    0%,100%{
        transform:translateX(0);
    }

    25%{
        transform:translateX(-4px);
    }

    75%{
        transform:translateX(4px);
    }
}

.success{
    display:none;

    margin-top:12px;

    padding:11px;

    border-radius:10px;

    background:#edfff7;

    border:1px solid #c9f1df;

    color:var(--green-dark);

    text-align:center;

    font-size:9px;
    font-weight:700;
}

.success.show{
    display:block;
}

/* =========================================================
   CONNECTING
========================================================= */

.connect-screen,
.success-screen{
    text-align:center;
}

.connect-screen{
    padding-top:15px;
}

.connect-icon{
    width:100px;
    height:100px;

    margin:0 auto 27px;

    position:relative;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#f0fbff;

    border:1px solid #c8eaf5;
}

.connect-icon:before,
.connect-icon:after{
    content:"";

    position:absolute;

    border:1px solid rgba(21,158,232,.25);

    border-radius:50%;

    animation:ripple 2s infinite;
}

.connect-icon:before{
    inset:-12px;
}

.connect-icon:after{
    inset:-24px;

    animation-delay:.5s;
}

@keyframes ripple{
    0%{
        opacity:1;
        transform:scale(.85);
    }

    100%{
        opacity:0;
        transform:scale(1.2);
    }
}

.connect-router{
    width:42px;
    height:30px;

    position:relative;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );
}

.connect-router:after{
    content:"";

    position:absolute;

    width:5px;
    height:5px;

    top:7px;
    right:7px;

    border-radius:50%;

    background:var(--green);
}

.loading-line{
    width:100%;
    height:5px;

    margin-top:25px;

    overflow:hidden;

    border-radius:10px;

    background:#edf5f8;
}

.loading-progress{
    width:0;
    height:100%;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );

    transition:
        width 2.8s linear;
}

/* =========================================================
   SUCCESS
========================================================= */

.success-circle{
    width:95px;
    height:95px;

    margin:0 auto 25px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#edfff7;

    border:1px solid #bdeedb;

    color:var(--green-dark);

    font-size:37px;

    animation:successPop .6s ease;
}

@keyframes successPop{
    0%{
        transform:scale(.5);
        opacity:0;
    }

    70%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

.connection-card{
    margin-top:25px;

    padding:16px;

    border-radius:15px;

    background:#f7fcfe;

    border:1px solid #e2eff4;

    text-align:left;
}

.connection-row{
    display:flex;

    justify-content:space-between;

    gap:15px;

    padding:7px 0;

    font-size:10px;
}

.connection-row span{
    color:var(--muted);
}

.connection-row strong{
    text-align:right;

    color:var(--ink);
}

/* =========================================================
   DASHBOARD DEMO
========================================================= */

.dashboard-card{
    margin-top:25px;

    padding:18px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #effaff,
            #effff8
        );

    border:1px solid #d8edf3;
}

.dashboard-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:10px;
}

.dashboard-plan{
    font-size:16px;
    font-weight:800;
}

.dashboard-speed{
    color:var(--blue-dark);

    font-size:10px;
    font-weight:800;
}

.dashboard-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:8px;

    margin-top:14px;
}

.dashboard-stat{
    padding:12px 8px;

    text-align:center;

    border-radius:12px;

    background:#fff;

    border:1px solid #e2eff4;
}

.dashboard-stat strong{
    display:block;

    font-size:12px;
}

.dashboard-stat span{
    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:8px;
}

/* =========================================================
   MOBILE TOP BAR
========================================================= */

.mobile-brand{
    display:none;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .page{
        padding:20px;
    }

    .app{
        grid-template-columns:44% 56%;

        min-height:680px;
    }

    .connection-area{
        padding:35px;
    }

    .auth-area{
        padding:35px;
    }

    .connection-content{
        margin-top:75px;
    }

    .connection-content h1{
        font-size:36px;
    }

    .network-machine{
        transform:scale(.88);
        transform-origin:left top;

        width:114%;
    }
}

/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media(max-width:820px){

    body{
        background:#f6fcff;
    }

    .page{
        padding:15px;
    }

    .app{
        grid-template-columns:1fr;

        max-width:650px;

        min-height:auto;
    }

    .connection-area{
        min-height:460px;

        padding:30px;
    }

    .connection-content{
        margin-top:55px;
    }

    .connection-content h1{
        font-size:38px;
    }

    .connection-content > p{
        max-width:520px;
    }

    .network-machine{
        height:210px;

        transform:scale(.9);
        transform-origin:left top;

        width:112%;
    }

    .network-status{
        margin-top:-20px;
    }

    .auth-area{
        padding:38px 35px 45px;
    }

    .auth{
        max-width:520px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:560px){

    body{
        background:#fff;
    }

    .page{
        padding:0;
        display:block;
    }

    .app{
        width:100%;
        max-width:none;

        min-height:100vh;

        border:0;

        border-radius:0;

        box-shadow:none;
    }

    .connection-area{
        min-height:410px;

        padding:
            24px
            20px
            20px;
    }

    .logo{
        width:40px;
        height:40px;

        border-radius:12px;

        font-size:17px;
    }

    .brand-name{
        font-size:18px;
    }

    .connection-content{
        margin-top:48px;
    }

    .connection-label{
        padding:7px 10px;

        font-size:8px;
    }

    .connection-content h1{
        margin-top:16px;

        font-size:32px;

        letter-spacing:-1.5px;
    }

    .connection-content > p{
        margin-top:13px;

        font-size:11px;

        line-height:1.65;
    }

    .network-machine{
        height:175px;

        margin-top:10px;

        transform:scale(.68);

        transform-origin:left top;

        width:145%;
    }

    .network-status{
        margin-top:-48px;

        padding:11px 12px;
    }

    .status-icon{
        width:29px;
        height:29px;
    }

    .status-title{
        font-size:10px;
    }

    .status-sub{
        font-size:8px;
    }

    .status-right{
        font-size:8px;
    }

    .auth-area{
        padding:
            30px
            20px
            45px;
    }

    .auth{
        max-width:none;
    }

    .progress{
        margin-bottom:28px;
    }

    .progress-circle{
        width:27px;
        height:27px;
        min-width:27px;

        font-size:9px;
    }

    .progress-line{
        margin:0 5px;
    }

    .auth h2{
        font-size:27px;
    }

    .auth-description{
        font-size:11px;
    }

    .customer-type{
        gap:7px;
    }

    .customer-type button{
        min-height:54px;
    }

    .method-buttons{
        grid-template-columns:1fr;
    }

    .method{
        min-height:82px;
    }

    .primary{
        min-height:53px;
    }

    .auth-panel{
        padding:16px;
    }

    .otp-inputs{
        gap:5px;
    }

    .otp{
        height:48px;

        border-radius:10px;

        font-size:15px;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .connection-row{
        font-size:9px;
    }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px){

    .connection-area{
        min-height:395px;
    }

    .connection-content h1{
        font-size:29px;
    }

    .network-machine{
        transform:scale(.58);

        width:165%;
    }

    .network-status{
        margin-top:-58px;
    }

    .auth-area{
        padding-left:16px;
        padding-right:16px;
    }

    .auth h2{
        font-size:25px;
    }

    .progress-circle{
        width:25px;
        height:25px;
        min-width:25px;
    }

    .otp{
        height:44px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;
    }
}
</style>
</head>

<body>

<div class="page">

<div class="app">

<!-- =====================================================
     ISP NETWORK SIDE
===================================================== -->

<section class="connection-area">

    <div class="ring r1"></div>
    <div class="ring r2"></div>
    <div class="ring r3"></div>

    <div class="brand">
        <div class="logo">F</div>

        <div class="brand-name">
            Fiber<span>Net</span>
        </div>
    </div>

    <div class="connection-content">

        <div class="connection-label">
            <span class="live"></span>
            ISP NETWORK ONLINE
        </div>

        <h1>
            Your internet.<br>
            <span>Your control.</span>
        </h1>

        <p>
            Securely manage your FiberNet broadband,
            plans, payments and customer services
            from one connected portal.
        </p>

        <div class="network-machine">

            <div class="fiber f1"></div>
            <div class="fiber f2"></div>
            <div class="fiber f3"></div>
            <div class="fiber f4"></div>

            <div class="packet p1"></div>
            <div class="packet p2"></div>
            <div class="packet p3"></div>

            <div class="net-node node1"></div>
            <div class="net-node node2"></div>
            <div class="net-node node3"></div>
            <div class="net-node node4"></div>

            <div class="router">

                <div class="router-antenna a1"></div>
                <div class="router-antenna a2"></div>

                <div class="router-body"></div>

            </div>

        </div>

        <div class="network-status">

            <div class="status-left">

                <div class="status-icon">
                    ✓
                </div>

                <div>

                    <div class="status-title">
                        Fiber Network
                    </div>

                    <div class="status-sub">
                        Broadband services operational
                    </div>

                </div>

            </div>

            <div class="status-right">
                ● STABLE
            </div>

        </div>

    </div>

</section>


<!-- =====================================================
     AUTH SIDE
===================================================== -->

<section class="auth-area">

<div class="auth">

<!-- =====================================================
     PROGRESS
===================================================== -->

<div class="progress">

    <div class="progress-item active" id="step1">

        <div class="progress-circle">
            1
        </div>

        <div class="progress-line"></div>

    </div>

    <div class="progress-item" id="step2">

        <div class="progress-circle">
            2
        </div>

        <div class="progress-line"></div>

    </div>

    <div class="progress-item" id="step3">

        <div class="progress-circle">
            3
        </div>

        <div class="progress-line"></div>

    </div>

    <div class="progress-item" id="step4">

        <div class="progress-circle">
            4
        </div>

    </div>

</div>


<!-- =====================================================
     SCREEN 1
===================================================== -->

<div class="screen active" id="screen1">

    <div class="kicker">
        ISP CUSTOMER PORTAL
    </div>

    <h2>
        Welcome to FiberNet
    </h2>

    <p class="auth-description">
        Login or create your FiberNet account using
        your registered email or mobile number.
    </p>

    <div class="customer-type">

        <button
            class="selected"
            data-type="mobile"
            onclick="selectIdentifier(this)">
            📱 Mobile Number
        </button>

        <button
            data-type="email"
            onclick="selectIdentifier(this)">
            ✉ Email Address
        </button>

    </div>

    <div class="field">

        <label id="identifierLabel">
            REGISTERED MOBILE NUMBER
        </label>

        <input
            class="input"
            id="customerInput"
            type="tel"
            placeholder="+91 98765 43210"
            autocomplete="tel">

    </div>

    <button
        class="primary"
        onclick="continueLogin()">
        CONTINUE TO LOGIN →
    </button>

    <div class="link-row">

        <span>
            New FiberNet customer?
        </span>

        <button
            class="link"
            onclick="showSignup()">
            Create Account
        </button>

    </div>

    <div class="link-row">

        <button
            class="link"
            onclick="showForgot()">
            Forgot Password?
        </button>

    </div>

    <div class="security">
        <span class="lock">✓</span>
        Secure ISP customer authentication
    </div>

</div>


<!-- =====================================================
     LOGIN METHOD SCREEN
===================================================== -->

<div class="screen" id="screenLoginMethod">

    <div class="kicker">
        CUSTOMER LOGIN
    </div>

    <h2>
        Choose your login
    </h2>

    <p class="auth-description">
        Continue with a password or receive a secure
        one-time verification code.
    </p>

    <div class="auth-panel">

        <div class="panel-head">

            <div class="panel-icon">
                🔐
            </div>

            <div>

                <div class="panel-title">
                    Login options
                </div>

                <div class="panel-subtitle">
                    Account: <span id="loginIdentityDisplay">—</span>
                </div>

            </div>

        </div>

        <div class="method-buttons">

            <button
                class="method"
                onclick="showLoginPassword()">

                <strong>
                    🔐 Login with Password
                </strong>

                <span>
                    Use your FiberNet account password
                    to securely sign in.
                </span>

            </button>

            <button
                class="method"
                onclick="showLoginOTP()">

                <strong>
                    📱 Login with OTP
                </strong>

                <span>
                    Receive a 6-digit verification code
                    on your registered contact.
                </span>

            </button>

        </div>

    </div>

    <button
        class="secondary"
        onclick="backToStart()">
        ← CHANGE EMAIL / MOBILE
    </button>

</div>


<!-- =====================================================
     LOGIN PASSWORD
===================================================== -->

<div class="screen" id="screenLoginPassword">

    <div class="kicker">
        LOGIN • PASSWORD
    </div>

    <h2>
        Welcome back
    </h2>

    <p class="auth-description">
        Enter your FiberNet password to access
        your customer account.
    </p>

    <div class="auth-panel">

        <div class="panel-head">

            <div class="panel-icon">
                🔐
            </div>

            <div>

                <div class="panel-title">
                    Password authentication
                </div>

                <div class="panel-subtitle">
                    <span id="passwordIdentityDisplay">
                        —
                    </span>
                </div>

            </div>

        </div>

        <div class="field">

            <label>
                ACCOUNT PASSWORD
            </label>

            <div class="password-wrap">

                <input
                    class="input"
                    id="loginPassword"
                    type="password"
                    placeholder="Enter your password">

                <button
                    class="eye"
                    onclick="togglePassword('loginPassword',this)">
                    ◉
                </button>

            </div>

        </div>

        <div
            class="error"
            id="loginPasswordError">
        </div>

        <button
            class="primary"
            onclick="submitPasswordLogin()">
            LOGIN TO FIBERNET →
        </button>

        <div class="link-row">

            <button
                class="link"
                onclick="showForgot()">
                Forgot password?
            </button>

        </div>

    </div>

    <button
        class="secondary"
        onclick="showLoginMethods()">
        ← OTHER LOGIN METHOD
    </button>

</div>


<!-- =====================================================
     LOGIN OTP
===================================================== -->

<div class="screen" id="screenLoginOTP">

    <div class="kicker">
        LOGIN • OTP
    </div>

    <h2>
        Verify your account
    </h2>

    <p class="auth-description">
        Enter the verification code sent to your
        registered email or mobile number.
    </p>

    <div class="auth-panel">

        <div class="panel-head">

            <div class="panel-icon">
                📱
            </div>

            <div>

                <div class="panel-title">
                    OTP verification
                </div>

                <div class="panel-subtitle">
                    Code sent to
                    <span id="loginOTPDisplay">
                        —
                    </span>
                </div>

            </div>

        </div>

        <div class="otp-inputs">

            <input class="otp" maxlength="1" inputmode="numeric">
            <input class="otp" maxlength="1" inputmode="numeric">
            <input class="otp" maxlength="1" inputmode="numeric">
            <input class="otp" maxlength="1" inputmode="numeric">
            <input class="otp" maxlength="1" inputmode="numeric">
            <input class="otp" maxlength="1" inputmode="numeric">

        </div>

        <div
            class="error"
            id="loginOTPError">
        </div>

        <div
            class="success"
            id="loginOTPSuccess">
            ✓ OTP verified successfully
        </div>

        <button
            class="primary"
            onclick="verifyLoginOTP()">
            VERIFY & LOGIN →
        </button>

        <div class="resend">

            <span id="loginResendText">
                Resend OTP in 00:30
            </span>

            <button
                id="loginResendButton"
                style="display:none"
                onclick="resendLoginOTP()">
                Resend OTP
            </button>

        </div>

    </div>

    <button
        class="secondary"
        onclick="showLoginMethods()">
        ← OTHER LOGIN METHOD
    </button>

</div>


<!-- =====================================================
     SIGNUP METHOD
===================================================== -->

<div class="screen" id="screenSignup">

    <div class="kicker">
        NEW FIBERNET CUSTOMER
    </div>

    <h2>
        Create your account
    </h2>

    <p class="auth-description">
        Choose how you want to create your FiberNet
        customer account.
    </p>

    <div class="auth-panel">

        <div class="method-buttons">

            <button
                class="method"
                onclick="showSignupPassword()">

                <strong>
                    🔐 Signup with Password
                </strong>

                <span>
                    Create your account with your
                    details and a secure password.
                </span>

            </button>

            <button
                class="method"
                onclick="showSignupOTP()">

                <strong>
                    📱 Signup with OTP
                </strong>

                <span>
                    Create your account using
                    email/mobile OTP verification.
                </span>

            </button>

        </div>

    </div>

    <button
        class="secondary"
        onclick="backToStart()">
        ← BACK TO LOGIN
    </button>

</div>


<!-- =====================================================
     SIGNUP PASSWORD
===================================================== -->

<div class="screen" id="screenSignupPassword">

    <div class="kicker">
        SIGNUP • PASSWORD
    </div>

    <h2>
        Create your account
    </h2>

    <p class="auth-description">
        Enter your details. After creating your password,
        we'll verify your email or mobile with OTP.
    </p>

    <div class="auth-panel">

        <div class="field">

            <label>
                FULL NAME
            </label>

            <input
                class="input"
                id="signupName"
                placeholder="Enter your full name"
                autocomplete="name">

        </div>

        <div class="field">

            <label>
                EMAIL OR MOBILE NUMBER
            </label>

            <input
                class="input"
                id="signupIdentity"
                placeholder="Email or mobile number"
                autocomplete="email">

        </div>

        <div class="field">

            <label>
                CREATE PASSWORD
            </label>

            <div class="password-wrap">

                <input
                    class="input"
                    id="signupPassword"
                    type="password"
                    placeholder="Minimum 6 characters">

                <button
                    class="eye"
                    onclick="togglePassword('signupPassword',this)">
                    ◉
                </button>

            </div>

        </div>

        <div class="field">

            <label>
                CONFIRM PASSWORD
            </label>

            <div class="password-wrap">

                <input
                    class="input"
                    id="signupConfirm"
                    type="password"
                    placeholder="Repeat your password">

                <button
                    class="eye"
                    onclick="togglePassword('signupConfirm',this)">
                    ◉
                </button>

            </div>

        </div>

        <label class="terms">

            <input
                type="checkbox"
                id="signupTerms">

            <span>
                I agree to the FiberNet Terms &
                Conditions and Privacy Policy.
            </span>

        </label>

        <div
            class="error"
            id="signupPasswordError">
        </div>

        <button
            class="primary"
            onclick="submitSignupPassword()">
            CREATE ACCOUNT & VERIFY →
        </button>

    </div>

    <button
        class="secondary"
        onclick="showSignup()">
        ← OTHER SIGNUP METHOD
    </button>

</div>


<!-- =====================================================
     SIGNUP OTP
===================================================== -->

<div class="screen" id="screenSignupOTP">

    <div class="kicker">
        SIGNUP • OTP
    </div>

    <h2>
        Create with OTP
    </h2>

    <p class="auth-description">
        Enter your name and email/mobile number.
        We'll verify it before creating your account.
    </p>

    <div class="auth-panel">

        <div class="field">

            <label>
                FULL NAME
            </label>

            <input
                class="input"
                id="signupOTPName"
                placeholder="Enter your full name">

        </div>

        <div class="field">

            <label>
                EMAIL OR MOBILE NUMBER
            </label>

            <input
                class="input"
                id="signupOTPIdentity"
                placeholder="Email or mobile number">

        </div>

        <div
            class="error"
            id="signupOTPError">
        </div>

        <button
            class="primary"
            onclick="sendSignupOTP()">
            SEND OTP & VERIFY →
        </button>

    </div>

    <button
        class="secondary"
        onclick="showSignup()">
        ← OTHER SIGNUP METHOD
    </button>

</div>


<!-- =====================================================
     SIGNUP VERIFICATION
===================================================== -->

<div class="screen" id="screenSignupVerify">

    <div class="kicker">
        ACCOUNT VERIFICATION
    </div>

    <h2>
        Verify your details
    </h2>

    <p class="auth-description" id="signupVerifyDescription">
        Enter the OTP sent to your registered contact.
    </p>

    <div class="auth-panel">

        <div class="panel-head">

            <div class="panel-icon">
                ✓
            </div>

            <div>

                <div class="panel-title">
                    Verify your account
                </div>

                <div class="panel-subtitle">
                    Code sent to
                    <span id="signupVerifyDisplay">
                        —
                    </span>
                </div>

            </div>

        </div>

        <div class="otp-inputs">

            <input class="signup-otp otp" maxlength="1" inputmode="numeric">
            <input class="signup-otp otp" maxlength="1" inputmode="numeric">
            <input class="signup-otp otp" maxlength="1" inputmode="numeric">
            <input class="signup-otp otp" maxlength="1" inputmode="numeric">
            <input class="signup-otp otp" maxlength="1" inputmode="numeric">
            <input class="signup-otp otp" maxlength="1" inputmode="numeric">

        </div>

        <div
            class="error"
            id="signupVerifyError">
        </div>

        <div
            class="success"
            id="signupVerifySuccess">
            ✓ Details verified successfully
        </div>

        <button
            class="primary"
            onclick="verifySignupOTP()">
            VERIFY & CREATE ACCOUNT →
        </button>

        <div class="resend">

            <span id="signupResendText">
                Resend OTP in 00:30
            </span>

            <button
                id="signupResendButton"
                style="display:none"
                onclick="resendSignupOTP()">
                Resend OTP
            </button>

        </div>

    </div>

    <button
        class="secondary"
        onclick="showSignup()">
        ← CHANGE SIGNUP METHOD
    </button>

</div>


<!-- =====================================================
     FORGOT PASSWORD
===================================================== -->

<div class="screen" id="screenForgot">

    <div class="kicker">
        ACCOUNT RECOVERY
    </div>

    <h2>
        Forgot your password?
    </h2>

    <p class="auth-description">
        Enter your registered email or mobile number.
        We'll send an OTP to verify your account.
    </p>

    <div class="auth-panel">

        <div class="field">

            <label>
                EMAIL OR MOBILE NUMBER
            </label>

            <input
                class="input"
                id="forgotIdentity"
                placeholder="Email or mobile number">

        </div>

        <div
            class="error"
            id="forgotError">
        </div>

        <button
            class="primary"
            onclick="sendForgotOTP()">
            SEND RECOVERY OTP →
        </button>

    </div>

    <button
        class="secondary"
        onclick="backToStart()">
        ← BACK TO LOGIN
    </button>

</div>


<!-- =====================================================
     FORGOT OTP
===================================================== -->

<div class="screen" id="screenForgotOTP">

    <div class="kicker">
        PASSWORD RECOVERY
    </div>

    <h2>
        Verify your account
    </h2>

    <p class="auth-description">
        Enter the OTP sent to your registered
        email or mobile number.
    </p>

    <div class="auth-panel">

        <div class="otp-info">
            Code sent to
            <strong id="forgotOTPDisplay">
                —
            </strong>
        </div>

        <div class="otp-inputs">

            <input class="forgot-otp otp" maxlength="1" inputmode="numeric">
            <input class="forgot-otp otp" maxlength="1" inputmode="numeric">
            <input class="forgot-otp otp" maxlength="1" inputmode="numeric">
            <input class="forgot-otp otp" maxlength="1" inputmode="numeric">
            <input class="forgot-otp otp" maxlength="1" inputmode="numeric">
            <input class="forgot-otp otp" maxlength="1" inputmode="numeric">

        </div>

        <div
            class="error"
            id="forgotOTPError">
        </div>

        <button
            class="primary"
            onclick="verifyForgotOTP()">
            VERIFY OTP →
        </button>

    </div>

    <button
        class="secondary"
        onclick="showForgot()">
        ← CHANGE EMAIL / MOBILE
    </button>

</div>


<!-- =====================================================
     NEW PASSWORD
===================================================== -->

<div class="screen" id="screenNewPassword">

    <div class="kicker">
        RECOVERY • NEW PASSWORD
    </div>

    <h2>
        Create new password
    </h2>

    <p class="auth-description">
        Your account is verified. Create a new secure
        password for your FiberNet account.
    </p>

    <div class="auth-panel">

        <div class="field">

            <label>
                NEW PASSWORD
            </label>

            <div class="password-wrap">

                <input
                    class="input"
                    id="newPassword"
                    type="password"
                    placeholder="New password">

                <button
                    class="eye"
                    onclick="togglePassword('newPassword',this)">
                    ◉
                </button>

            </div>

        </div>

        <div class="field">

            <label>
                CONFIRM NEW PASSWORD
            </label>

            <div class="password-wrap">

                <input
                    class="input"
                    id="newPasswordConfirm"
                    type="password"
                    placeholder="Confirm password">

                <button
                    class="eye"
                    onclick="togglePassword('newPasswordConfirm',this)">
                    ◉
                </button>

            </div>

        </div>

        <div
            class="error"
            id="newPasswordError">
        </div>

        <div
            class="success"
            id="newPasswordSuccess">
            ✓ Password updated successfully.
        </div>

        <button
            class="primary"
            onclick="resetPassword()">
            RESET PASSWORD →
        </button>

    </div>

</div>


<!-- =====================================================
     CONNECTING
===================================================== -->

<div class="screen" id="screenConnecting">

    <div class="connect-screen">

        <div class="connect-icon">

            <div class="connect-router"></div>

        </div>

        <div class="kicker">
            AUTHENTICATED
        </div>

        <h2>
            Connecting your account
        </h2>

        <p class="auth-description">
            We're securely preparing your FiberNet
            customer dashboard.
        </p>

        <div class="loading-line">

            <div
                class="loading-progress"
                id="loadingProgress">
            </div>

        </div>

    </div>

</div>


<!-- =====================================================
     SUCCESS
===================================================== -->

<div class="screen" id="screenSuccess">

    <div class="success-screen">

        <div class="success-circle">
            ✓
        </div>

        <div class="kicker">
            CONNECTION VERIFIED
        </div>

        <h2>
            You're connected!
        </h2>

        <p class="auth-description">
            Your FiberNet account has been successfully
            authenticated.
        </p>

        <div class="connection-card">

            <div class="connection-row">

                <span>
                    Customer
                </span>

                <strong id="successCustomer">
                    FiberNet Customer
                </strong>

            </div>

            <div class="connection-row">

                <span>
                    Connection
                </span>

                <strong>
                    Fiber Broadband
                </strong>

            </div>

            <div class="connection-row">

                <span>
                    Service
                </span>

                <strong style="color:#20b87b">
                    ● Active
                </strong>

            </div>

            <div class="connection-row">

                <span>
                    Authentication
                </span>

                <strong>
                    Verified
                </strong>

            </div>

        </div>

        <button
            class="primary"
            onclick="openDashboard()">
            ENTER CUSTOMER DASHBOARD →
        </button>

        <div class="security">
            <span class="lock">✓</span>
            Secure ISP session established
        </div>

    </div>

</div>


<!-- =====================================================
     DEMO DASHBOARD
===================================================== -->

<div class="screen" id="screenDashboard">

    <div class="kicker">
        FIBERNET CUSTOMER PORTAL
    </div>

    <h2>
        Welcome back 👋
    </h2>

    <p class="auth-description">
        Your broadband connection is active.
    </p>

    <div class="dashboard-card">

        <div class="dashboard-top">

            <div class="dashboard-plan">
                FiberNet Pro
            </div>

            <div class="dashboard-speed">
                200 Mbps
            </div>

        </div>

        <div class="dashboard-grid">

            <div class="dashboard-stat">
                <strong>₹799</strong>
                <span>Monthly Plan</span>
            </div>

            <div class="dashboard-stat">
                <strong>Active</strong>
                <span>Connection</span>
            </div>

            <div class="dashboard-stat">
                <strong>12 GB</strong>
                <span>Today's Usage</span>
            </div>

        </div>

    </div>

    <button
        class="primary"
        onclick="alert('In Odoo 19 connect this to your customer dashboard route.')">
        OPEN FULL CUSTOMER PORTAL →
    </button>

    <button
        class="secondary"
        onclick="backToStart()">
        LOGOUT
    </button>

</div>

</div>

</section>

</div>

</div>


<script>

/* =========================================================
   GLOBAL STATE
========================================================= */

let identifierType = "mobile";
let identifierValue = "";

let currentFlow = "";

let timer = null;
let seconds = 30;


/* =========================================================
   HELPER
========================================================= */

function $(id){
    return document.getElementById(id);
}


/* =========================================================
   SCREEN SYSTEM
========================================================= */

function showScreen(id){

    document
        .querySelectorAll(".screen")
        .forEach(screen => {
            screen.classList.remove("active");
        });

    const target = $(id);

    if(target){
        target.classList.add("active");
    }

    updateProgress(id);

    setTimeout(() => {

        const authArea =
            document.querySelector(".auth-area");

        if(
            window.innerWidth <= 820 &&
            authArea
        ){

            authArea.scrollIntoView({
                behavior:"smooth",
                block:"start"
            });

        }

    },80);

}


function updateProgress(id){

    const loginScreens = [
        "screen1",
        "screenLoginMethod",
        "screenLoginPassword",
        "screenLoginOTP",
        "screenConnecting",
        "screenSuccess",
        "screenDashboard"
    ];

    const signupScreens = [
        "screenSignup",
        "screenSignupPassword",
        "screenSignupOTP",
        "screenSignupVerify",
        "screenConnecting",
        "screenSuccess",
        "screenDashboard"
    ];

    let step = 1;

    if(
        id === "screenLoginMethod" ||
        id === "screenLoginPassword" ||
        id === "screenLoginOTP" ||
        id === "screenSignup" ||
        id === "screenSignupPassword" ||
        id === "screenSignupOTP" ||
        id === "screenForgot"
    ){
        step = 2;
    }

    if(
        id === "screenSignupVerify" ||
        id === "screenForgotOTP" ||
        id === "screenNewPassword"
    ){
        step = 3;
    }

    if(
        id === "screenConnecting" ||
        id === "screenSuccess" ||
        id === "screenDashboard"
    ){
        step = 4;
    }

    for(let i=1;i<=4;i++){

        const element = $("step"+i);

        if(!element) continue;

        element.classList.remove("active");
        element.classList.remove("done");

        if(i < step){
            element.classList.add("done");
        }

        if(i === step){
            element.classList.add("active");
        }

    }

}


/* =========================================================
   IDENTIFIER TYPE
========================================================= */

function selectIdentifier(button){

    document
        .querySelectorAll(".customer-type button")
        .forEach(btn => {
            btn.classList.remove("selected");
        });

    button.classList.add("selected");

    identifierType =
        button.dataset.type;

    const input =
        $("customerInput");

    const label =
        $("identifierLabel");

    if(identifierType === "email"){

        label.innerText =
            "REGISTERED EMAIL ADDRESS";

        input.type = "email";

        input.placeholder =
            "you@example.com";

    }else{

        label.innerText =
            "REGISTERED MOBILE NUMBER";

        input.type = "tel";

        input.placeholder =
            "+91 98765 43210";

    }

}


/* =========================================================
   LOGIN START
========================================================= */

function continueLogin(){

    const value =
        $("customerInput")
        .value
        .trim();

    if(!value){

        $("customerInput").focus();

        return;
    }

    identifierValue = value;

    $("loginIdentityDisplay").innerText =
        maskIdentifier(value);

    showScreen("screenLoginMethod");
}


function showLoginMethods(){

    $("loginPasswordError")
        ?.classList.remove("show");

    showScreen("screenLoginMethod");
}


function showLoginPassword(){

    currentFlow = "login-password";

    $("passwordIdentityDisplay").innerText =
        maskIdentifier(identifierValue);

    $("loginPassword").value = "";

    showScreen("screenLoginPassword");

    setTimeout(() => {
        $("loginPassword").focus();
    },300);
}


function showLoginOTP(){

    currentFlow = "login-otp";

    $("loginOTPDisplay").innerText =
        maskIdentifier(identifierValue);

    clearOTPGroup(".otp:not(.signup-otp):not(.forgot-otp)");

    $("loginOTPError").classList.remove("show");

    startTimer(
        "loginResendText",
        "loginResendButton",
        resendLoginOTP
    );

    showScreen("screenLoginOTP");

    setTimeout(() => {

        const first =
            document.querySelector(
                "#screenLoginOTP .otp"
            );

        if(first){
            first.focus();
        }

    },300);
}


/* =========================================================
   LOGIN PASSWORD
========================================================= */

function submitPasswordLogin(){

    const password =
        $("loginPassword").value.trim();

    if(!password){

        showError(
            "loginPasswordError",
            "Please enter your FiberNet password."
        );

        return;
    }

    startConnection();
}


/* =========================================================
   LOGIN OTP
========================================================= */

function verifyLoginOTP(){

    const otp =
        getOTP("#screenLoginOTP .otp");

    if(otp.length !== 6){

        showError(
            "loginOTPError",
            "Please enter the complete 6-digit OTP."
        );

        return;
    }

    if(otp !== "123456"){

        showError(
            "loginOTPError",
            "Invalid OTP. For this demo use 123456."
        );

        return;
    }

    $("loginOTPError")
        .classList.remove("show");

    startConnection();
}


function resendLoginOTP(){

    clearOTPGroup(
        "#screenLoginOTP .otp"
    );

    startTimer(
        "loginResendText",
        "loginResendButton",
        resendLoginOTP
    );
}


/* =========================================================
   SIGNUP MAIN
========================================================= */

function showSignup(){

    currentFlow = "signup";

    showScreen("screenSignup");
}


function showSignupPassword(){

    currentFlow = "signup-password";

    clearError("signupPasswordError");

    showScreen("screenSignupPassword");
}


function showSignupOTP(){

    currentFlow = "signup-otp";

    clearError("signupOTPError");

    showScreen("screenSignupOTP");
}


/* =========================================================
   SIGNUP PASSWORD
========================================================= */

function submitSignupPassword(){

    const name =
        $("signupName").value.trim();

    const identity =
        $("signupIdentity").value.trim();

    const password =
        $("signupPassword").value;

    const confirm =
        $("signupConfirm").value;

    const terms =
        $("signupTerms").checked;


    if(!name){

        showError(
            "signupPasswordError",
            "Please enter your full name."
        );

        return;
    }


    if(!identity){

        showError(
            "signupPasswordError",
            "Please enter your email or mobile number."
        );

        return;
    }


    if(!isEmail(identity) && !isMobile(identity)){

        showError(
            "signupPasswordError",
            "Please enter a valid email address or mobile number."
        );

        return;
    }


    if(password.length < 6){

        showError(
            "signupPasswordError",
            "Password must contain at least 6 characters."
        );

        return;
    }


    if(password !== confirm){

        showError(
            "signupPasswordError",
            "Passwords do not match."
        );

        return;
    }


    if(!terms){

        showError(
            "signupPasswordError",
            "Please accept the Terms & Conditions."
        );

        return;
    }


    identifierValue = identity;

    prepareSignupVerification();

}


/* =========================================================
   SIGNUP OTP FLOW
========================================================= */

function sendSignupOTP(){

    const name =
        $("signupOTPName").value.trim();

    const identity =
        $("signupOTPIdentity").value.trim();


    if(!name){

        showError(
            "signupOTPError",
            "Please enter your full name."
        );

        return;
    }


    if(!identity){

        showError(
            "signupOTPError",
            "Please enter your email or mobile number."
        );

        return;
    }


    if(!isEmail(identity) && !isMobile(identity)){

        showError(
            "signupOTPError",
            "Please enter a valid email address or mobile number."
        );

        return;
    }


    identifierValue = identity;

    currentFlow = "signup-otp";

    prepareSignupVerification();
}


function prepareSignupVerification(){

    $("signupVerifyDisplay").innerText =
        maskIdentifier(identifierValue);


    if(identifierValue.includes("@")){

        $("signupVerifyDescription").innerText =
            "We've sent a verification OTP to your email address. Verify it to create your FiberNet account.";

    }else{

        $("signupVerifyDescription").innerText =
            "We've sent a verification OTP to your mobile number. Verify it to create your FiberNet account.";

    }


    clearOTPGroup(
        "#screenSignupVerify .signup-otp"
    );

    $("signupVerifyError")
        .classList.remove("show");

    $("signupVerifySuccess")
        .classList.remove("show");

    startTimer(
        "signupResendText",
        "signupResendButton",
        resendSignupOTP
    );

    showScreen("screenSignupVerify");

    setTimeout(() => {

        const first =
            document.querySelector(
                "#screenSignupVerify .signup-otp"
            );

        if(first){
            first.focus();
        }

    },300);

}


/* =========================================================
   VERIFY SIGNUP
========================================================= */

function verifySignupOTP(){

    const otp =
        getOTP(
            "#screenSignupVerify .signup-otp"
        );

    if(otp.length !== 6){

        showError(
            "signupVerifyError",
            "Please enter the complete 6-digit OTP."
        );

        return;
    }


    if(otp !== "123456"){

        showError(
            "signupVerifyError",
            "Invalid OTP. For this demo use 123456."
        );

        return;
    }


    $("signupVerifyError")
        .classList.remove("show");

    $("signupVerifySuccess")
        .classList.add("show");


    setTimeout(() => {

        startConnection();

    },700);

}


function resendSignupOTP(){

    clearOTPGroup(
        "#screenSignupVerify .signup-otp"
    );

    startTimer(
        "signupResendText",
        "signupResendButton",
        resendSignupOTP
    );

}


/* =========================================================
   FORGOT PASSWORD
========================================================= */

function showForgot(){

    currentFlow = "forgot";

    clearError("forgotError");

    showScreen("screenForgot");

    setTimeout(() => {
        $("forgotIdentity").focus();
    },300);
}


function sendForgotOTP(){

    const identity =
        $("forgotIdentity").value.trim();


    if(!identity){

        showError(
            "forgotError",
            "Please enter your registered email or mobile number."
        );

        return;
    }


    if(!isEmail(identity) && !isMobile(identity)){

        showError(
            "forgotError",
            "Please enter a valid email address or mobile number."
        );

        return;
    }


    identifierValue = identity;


    $("forgotOTPDisplay").innerText =
        maskIdentifier(identity);


    clearOTPGroup(
        "#screenForgotOTP .forgot-otp"
    );


    showScreen("screenForgotOTP");

    setTimeout(() => {

        const first =
            document.querySelector(
                "#screenForgotOTP .forgot-otp"
            );

        if(first){
            first.focus();
        }

    },300);

}


function verifyForgotOTP(){

    const otp =
        getOTP(
            "#screenForgotOTP .forgot-otp"
        );


    if(otp.length !== 6){

        showError(
            "forgotOTPError",
            "Please enter the complete 6-digit OTP."
        );

        return;
    }


    if(otp !== "123456"){

        showError(
            "forgotOTPError",
            "Invalid OTP. For this demo use 123456."
        );

        return;
    }


    showScreen("screenNewPassword");

}


/* =========================================================
   RESET PASSWORD
========================================================= */

function resetPassword(){

    const password =
        $("newPassword").value;

    const confirm =
        $("newPasswordConfirm").value;


    if(password.length < 6){

        showError(
            "newPasswordError",
            "Password must contain at least 6 characters."
        );

        return;
    }


    if(password !== confirm){

        showError(
            "newPasswordError",
            "Passwords do not match."
        );

        return;
    }


    $("newPasswordError")
        .classList.remove("show");

    $("newPasswordSuccess")
        .classList.add("show");


    setTimeout(() => {

        $("newPassword").value = "";
        $("newPasswordConfirm").value = "";

        backToStart();

    },1200);

}


/* =========================================================
   CONNECTION
========================================================= */

function startConnection(){

    showScreen("screenConnecting");

    $("loadingProgress").style.width = "0%";


    setTimeout(() => {

        $("loadingProgress").style.width = "100%";

    },100);


    setTimeout(() => {

        $("successCustomer").innerText =
            identifierValue ||
            "FiberNet Customer";

        showScreen("screenSuccess");

    },3000);

}


/* =========================================================
   DASHBOARD
========================================================= */

function openDashboard(){

    showScreen("screenDashboard");

}


/* =========================================================
   BACK
========================================================= */

function backToStart(){

    clearTimer();

    showScreen("screen1");

}


/* =========================================================
   PASSWORD VISIBILITY
========================================================= */

function togglePassword(id,button){

    const input = $(id);

    if(input.type === "password"){

        input.type = "text";

        button.innerText = "◉";

    }else{

        input.type = "password";

        button.innerText = "◉";

    }

}


/* =========================================================
   ERROR
========================================================= */

function showError(id,message){

    const element = $(id);

    if(!element) return;

    element.innerText = message;

    element.classList.add("show");

}


function clearError(id){

    const element = $(id);

    if(!element) return;

    element.classList.remove("show");

    element.innerText = "";

}


/* =========================================================
   OTP
========================================================= */

function getOTP(selector){

    let result = "";

    document
        .querySelectorAll(selector)
        .forEach(input => {

            result += input.value;

        });

    return result;

}


function clearOTPGroup(selector){

    document
        .querySelectorAll(selector)
        .forEach(input => {

            input.value = "";

        });

}


function setupOTP(selector){

    const inputs =
        document.querySelectorAll(selector);


    inputs.forEach((input,index) => {

        input.addEventListener(
            "input",
            function(){

                this.value =
                    this.value
                    .replace(/\D/g,"")
                    .slice(0,1);


                if(
                    this.value &&
                    index < inputs.length - 1
                ){

                    inputs[index + 1].focus();

                }

            }
        );


        input.addEventListener(
            "keydown",
            function(e){

                if(
                    e.key === "Backspace" &&
                    !this.value &&
                    index > 0
                ){

                    inputs[index - 1].focus();

                }

            }
        );


        input.addEventListener(
            "paste",
            function(e){

                e.preventDefault();

                const pasted =
                    (
                        e.clipboardData ||
                        window.clipboardData
                    )
                    .getData("text")
                    .replace(/\D/g,"")
                    .slice(0,6);


                pasted
                    .split("")
                    .forEach((digit,i) => {

                        if(inputs[i]){
                            inputs[i].value = digit;
                        }

                    });


                if(pasted.length === 6){

                    inputs[5].focus();

                }

            }
        );

    });

}


/* =========================================================
   TIMER
========================================================= */

function startTimer(textId,buttonId,resendFunction){

    clearTimer();

    seconds = 30;

    $(textId).style.display =
        "inline";

    $(buttonId).style.display =
        "none";

    updateTimer(
        textId,
        seconds
    );


    timer = setInterval(() => {

        seconds--;

        updateTimer(
            textId,
            seconds
        );


        if(seconds <= 0){

            clearTimer();

            $(textId).style.display =
                "none";

            $(buttonId).style.display =
                "inline";

        }

    },1000);

}


function updateTimer(id,value){

    $(id).innerText =
        "Resend OTP in 00:" +
        String(value).padStart(2,"0");

}


function clearTimer(){

    if(timer){

        clearInterval(timer);

        timer = null;

    }

}


/* =========================================================
   MASK
========================================================= */

function maskIdentifier(value){

    if(!value){
        return "your registered contact";
    }


    if(value.includes("@")){

        const parts =
            value.split("@");

        const name =
            parts[0];


        const masked =
            name.length > 2
            ? name.substring(0,2) + "•••"
            : "•••";


        return masked +
            "@" +
            parts[1];

    }


    const digits =
        value.replace(/\D/g,"");


    if(digits.length >= 10){

        return "+91 ••••• " +
            digits.slice(-4);

    }


    if(value.length > 4){

        return value.slice(0,3) +
            "•••" +
            value.slice(-2);

    }


    return "••••••";

}


/* =========================================================
   VALIDATION
========================================================= */

function isEmail(value){

    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/
        .test(value);

}


function isMobile(value){

    const digits =
        value.replace(/\D/g,"");

    return digits.length >= 10 &&
           digits.length <= 15;

}


/* =========================================================
   GLOBAL ENTER KEY
========================================================= */

document.addEventListener(
    "keydown",
    function(e){

        if(e.key !== "Enter"){
            return;
        }


        const active =
            document.querySelector(
                ".screen.active"
            );


        if(!active){
            return;
        }


        switch(active.id){

            case "screen1":
                continueLogin();
                break;

            case "screenLoginPassword":
                submitPasswordLogin();
                break;

            case "screenLoginOTP":
                verifyLoginOTP();
                break;

            case "screenSignupPassword":
                submitSignupPassword();
                break;

            case "screenSignupOTP":
                sendSignupOTP();
                break;

            case "screenSignupVerify":
                verifySignupOTP();
                break;

            case "screenForgot":
                sendForgotOTP();
                break;

            case "screenForgotOTP":
                verifyForgotOTP();
                break;

            case "screenNewPassword":
                resetPassword();
                break;

        }

    }
);


/* =========================================================
   INITIALIZE OTP INPUTS
========================================================= */

setupOTP(
    "#screenLoginOTP .otp"
);

setupOTP(
    "#screenSignupVerify .signup-otp"
);

setupOTP(
    "#screenForgotOTP .forgot-otp"
);


/* =========================================================
   INITIAL SCREEN
========================================================= */

updateProgress("screen1");

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<title>FiberNet — ISP Customer Portal</title>

:root{
    --blue:#159ee8;
    --blue-dark:#0879c4;
    --cyan:#42c8ef;
    --green:#35d39a;
    --green-dark:#1eaf78;

--ink:#123449;
    --muted:#7893a3;

--border:#dcecf3;
    --soft:#f4fbfe;
    --white:#fff;

--danger:#ed6b73;

--shadow:
        0 35px 90px rgba(20,115,150,.14);

--radius:30px;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    width:100%;
    min-height:100%;
    scroll-behavior:smooth;
}

body{
    width:100%;
    min-height:100vh;
    font-family:Inter,Arial,sans-serif;
    color:var(--ink);
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(66,200,239,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(53,211,154,.07),
            transparent 28%
        ),
        #f6fcff;

overflow-x:hidden;
}

button,
input{
    font-family:inherit;
}

button{
    cursor:pointer;
}

button:focus-visible,
input:focus-visible{
    outline:3px solid rgba(21,158,232,.15);
}

/* =========================================================
   PAGE
========================================================= */

.page{
    width:100%;
    min-height:100vh;

display:flex;
    align-items:center;
    justify-content:center;

padding:30px;
}

.app{
    width:min(1180px,100%);

min-height:720px;

display:grid;
    grid-template-columns:46% 54%;

overflow:hidden;

background:#fff;

border:1px solid #e1eff5;
    border-radius:var(--radius);

box-shadow:var(--shadow);
}

/* =========================================================
   LEFT ISP AREA
========================================================= */

.connection-area{
    position:relative;

min-width:0;

overflow:hidden;

padding:45px;

background:
        radial-gradient(
            circle at 15% 20%,
            rgba(66,200,239,.18),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(53,211,154,.14),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #f2fbff,
            #f8fffc
        );
}

.ring{
    position:absolute;

border:1px solid rgba(21,158,232,.1);

border-radius:50%;

pointer-events:none;
}

.r1{
    width:500px;
    height:500px;

left:-330px;
    top:100px;
}

.r2{
    width:700px;
    height:700px;

left:-440px;
    top:0;
}

.r3{
    width:900px;
    height:900px;

left:-550px;
    top:-120px;
}

/* =========================================================
   BRAND
========================================================= */

.brand{
    position:relative;
    z-index:10;

display:flex;
    align-items:center;

gap:12px;
}

.logo{
    width:45px;
    height:45px;

flex-shrink:0;

display:grid;
    place-items:center;

color:white;

font-size:19px;
    font-weight:800;

border-radius:14px;

background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

box-shadow:
        0 12px 25px rgba(21,158,232,.2);
}

.brand-name{
    font-size:20px;
    font-weight:800;

letter-spacing:-.7px;
}

.brand-name span{
    color:var(--blue);
}

/* =========================================================
   HERO
========================================================= */

.connection-content{
    position:relative;
    z-index:5;

margin-top:100px;
}

.connection-label{
    display:inline-flex;
    align-items:center;

gap:8px;

padding:8px 13px;

background:#fff;

border:1px solid #dceef4;

border-radius:30px;

color:var(--green-dark);

font-size:10px;
    font-weight:800;

letter-spacing:.8px;
}

.live{
    width:7px;
    height:7px;

flex-shrink:0;

border-radius:50%;

background:var(--green);

box-shadow:
        0 0 0 5px rgba(53,211,154,.12);

animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{
        box-shadow:
            0 0 0 4px rgba(53,211,154,.10);
    }

50%{
        box-shadow:
            0 0 0 8px rgba(53,211,154,.03);
    }
}

.connection-content h1{
    margin-top:20px;

font-size:43px;
    line-height:1.08;

letter-spacing:-2px;
}

.connection-content h1 span{
    color:var(--blue);
}

.connection-content > p{
    max-width:410px;

margin-top:18px;

color:var(--muted);

font-size:13px;
    line-height:1.8;
}

/* =========================================================
   NETWORK
========================================================= */

.network-machine{
    position:relative;

width:100%;
    height:250px;

margin-top:25px;
}

.router{
    position:absolute;

width:108px;
    height:108px;

left:50%;
    top:48%;

transform:translate(-50%,-50%);

display:flex;
    align-items:center;
    justify-content:center;

border-radius:28px;

background:#fff;

border:1px solid #cdebf4;

box-shadow:
        0 0 0 10px rgba(255,255,255,.7),
        0 20px 40px rgba(29,129,163,.15);

z-index:5;

animation:routerFloat 4s ease-in-out infinite;
}

@keyframes routerFloat{
    0%,100%{
        transform:translate(-50%,-50%);
    }

50%{
        transform:translate(-50%,-55%);
    }
}

.router-body{
    position:relative;

width:55px;
    height:40px;

border-radius:10px;

background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

box-shadow:
        0 10px 20px rgba(21,158,232,.25);
}

.router-body:before{
    content:"";

position:absolute;

left:12px;
    right:12px;
    bottom:8px;

height:4px;

border-radius:5px;

background:rgba(255,255,255,.8);
}

.router-body:after{
    content:"";

position:absolute;

width:6px;
    height:6px;

top:8px;
    right:10px;

border-radius:50%;

background:var(--green);
}

.router-antenna{
    position:absolute;

width:2px;
    height:27px;

top:-24px;

background:#74b8d1;
}

.a1{
    left:32px;
    transform:rotate(-15deg);
}

.a2{
    right:32px;
    transform:rotate(15deg);
}

.net-node{
    position:absolute;

width:43px;
    height:43px;

display:grid;
    place-items:center;

border-radius:50%;

background:white;

border:1px solid #d3ebf2;

box-shadow:
        0 10px 25px rgba(33,124,154,.1);

z-index:4;
}

.net-node:after{
    content:"";

width:11px;
    height:11px;

border-radius:50%;

background:var(--green);

box-shadow:
        0 0 0 5px rgba(53,211,154,.1);

animation:nodePulse 2s infinite;
}

@keyframes nodePulse{
    0%,100%{
        transform:scale(1);
    }

50%{
        transform:scale(1.25);
    }
}

.node1{
    left:4%;
    top:45px;
}

.node2{
    right:4%;
    top:30px;
}

.node3{
    left:18%;
    bottom:15px;
}

.node4{
    right:17%;
    bottom:5px;
}

.fiber{
    position:absolute;

height:2px;

transform-origin:left center;

background:
        linear-gradient(
            90deg,
            rgba(21,158,232,.08),
            var(--blue),
            rgba(53,211,154,.15)
        );

z-index:2;
}

.f1{
    width:250px;
    left:9%;
    top:100px;
    transform:rotate(8deg);
}

.f2{
    width:250px;
    left:51%;
    top:90px;
    transform:rotate(-13deg);
}

.f3{
    width:230px;
    left:19%;
    top:145px;
    transform:rotate(24deg);
}

.f4{
    width:220px;
    left:52%;
    top:145px;
    transform:rotate(26deg);
}

.packet{
    position:absolute;

width:8px;
    height:8px;

border-radius:50%;

background:var(--green);

box-shadow:
        0 0 0 5px rgba(53,211,154,.1);

z-index:6;

animation:packetMove 3s linear infinite;
}

.p1{
    top:97px;
    left:14%;
}

.p2{
    top:91px;
    left:63%;

animation-delay:1s;
}

.p3{
    top:148px;
    left:29%;

animation-delay:1.7s;
}

@keyframes packetMove{
    0%{
        opacity:0;
        transform:scale(.5);
    }

20%{
        opacity:1;
    }

70%{
        opacity:1;
        transform:scale(1.2);
    }

100%{
        opacity:0;
        transform:scale(.5);
    }
}

/* =========================================================
   NETWORK STATUS
========================================================= */

.network-status{
    position:relative;

display:flex;
    align-items:center;
    justify-content:space-between;

gap:12px;

padding:14px 16px;

border-radius:16px;

background:rgba(255,255,255,.82);

border:1px solid #dceef3;
}

.status-left{
    min-width:0;

display:flex;
    align-items:center;

gap:10px;
}

.status-icon{
    width:33px;
    height:33px;

flex-shrink:0;

display:grid;
    place-items:center;

border-radius:10px;

color:var(--green-dark);

background:#edfff7;

font-size:13px;
}

.status-title{
    font-size:11px;
    font-weight:800;
}

.status-sub{
    margin-top:3px;

font-size:9px;

color:var(--muted);
}

.status-right{
    flex-shrink:0;

font-size:10px;
    font-weight:800;

color:var(--green-dark);
}

/* =========================================================
   AUTH AREA
========================================================= */

.auth-area{
    position:relative;

min-width:0;

padding:45px;

display:flex;
    align-items:center;
    justify-content:center;

background:#fff;
}

.auth{
    width:100%;
    max-width:420px;
}

/* =========================================================
   PROGRESS
========================================================= */

.progress{
    width:100%;

display:flex;
    align-items:center;

margin-bottom:35px;
}

.progress-item{
    min-width:0;

display:flex;
    align-items:center;

flex:1;
}

.progress-item:last-child{
    flex:0;
}

.progress-circle{
    width:30px;
    height:30px;

min-width:30px;

display:grid;
    place-items:center;

border-radius:50%;

background:#f1f7fa;

border:1px solid #dcecf2;

color:#94a9b6;

font-size:10px;
    font-weight:800;

transition:.4s;
}

.progress-line{
    width:100%;
    height:2px;

margin:0 7px;

background:#e6f0f4;

transition:.5s;
}

.progress-item.active .progress-circle{
    background:var(--blue);

border-color:var(--blue);

color:#fff;

box-shadow:
        0 0 0 5px rgba(21,158,232,.08);
}

.progress-item.done .progress-circle{
    background:var(--green);

border-color:var(--green);

color:#fff;
}

.progress-item.done .progress-line{
    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );
}

/* =========================================================
   SCREENS
========================================================= */

.screen{
    display:none;

animation:
        screenIn .42s cubic-bezier(.2,.8,.2,1);
}

.screen.active{
    display:block;
}

@keyframes screenIn{
    from{
        opacity:0;
        transform:translateX(18px);
    }

to{
        opacity:1;
        transform:translateX(0);
    }
}

.kicker{
    color:var(--blue);

font-size:10px;
    font-weight:800;

letter-spacing:1.4px;

text-transform:uppercase;
}

.auth h2{
    margin-top:9px;

font-size:31px;

line-height:1.15;

letter-spacing:-1.4px;
}

.auth-description{
    margin-top:9px;

color:var(--muted);

font-size:12px;
    line-height:1.7;
}

/* =========================================================
   FORM
========================================================= */

.field{
    margin-top:20px;
}

.field label{
    display:block;

margin-bottom:8px;

color:#527083;

font-size:10px;
    font-weight:800;

letter-spacing:.3px;
}

.input{
    width:100%;
    height:53px;

padding:0 17px;

border:1px solid var(--border);

border-radius:14px;

outline:none;

background:#fbfdfe;

color:var(--ink);

font-size:13px;

transition:.25s;
}

.input::placeholder{
    color:#a7bac4;
}

.input:focus{
    background:#fff;

border-color:#7dccec;

box-shadow:
        0 0 0 4px rgba(21,158,232,.07);
}

/* =========================================================
   SELECTOR
========================================================= */

.customer-type{
    display:grid;

grid-template-columns:1fr 1fr;

gap:8px;

margin-top:22px;
}

.customer-type button{
    min-height:58px;

padding:10px;

border:1px solid var(--border);

background:#fbfdfe;

border-radius:13px;

color:var(--muted);

font-size:10px;
    font-weight:700;

transition:.2s;
}

.customer-type button.selected{
    background:#effaff;

border-color:#91d4ee;

color:var(--blue-dark);

box-shadow:
        inset 0 0 0 1px rgba(21,158,232,.04);
}

/* =========================================================
   AUTH METHODS
========================================================= */

.method-buttons{
    display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

margin-top:22px;
}

.method{
    min-width:0;
    min-height:100px;

padding:15px;

text-align:left;

border:1px solid var(--border);

background:#fbfdfe;

border-radius:14px;

color:var(--muted);

transition:.25s;
}

.method:hover{
    transform:translateY(-3px);

border-color:#8bd3ef;

background:#f5fcff;

box-shadow:
        0 12px 25px rgba(21,158,232,.08);
}

.method strong{
    display:block;

color:var(--ink);

font-size:11px;
}

.method span{
    display:block;

margin-top:8px;

color:var(--muted);

font-size:9px;

line-height:1.5;
}

/* =========================================================
   BUTTONS
========================================================= */

.primary{
    width:100%;
    min-height:54px;

margin-top:20px;

border:0;

border-radius:15px;

color:#fff;

background:
        linear-gradient(
            100deg,
            var(--blue),
            #27b8dd,
            var(--green)
        );

font-size:11px;
    font-weight:800;

letter-spacing:.3px;

box-shadow:
        0 14px 28px rgba(24,164,207,.2);

transition:.25s;
}

.primary:hover{
    transform:translateY(-2px);

box-shadow:
        0 18px 32px rgba(24,164,207,.25);
}

.primary:active{
    transform:translateY(0);
}

.secondary{
    width:100%;
    min-height:48px;

margin-top:10px;

border:1px solid var(--border);

border-radius:13px;

color:var(--blue-dark);

background:#fff;

font-size:10px;
    font-weight:800;
}

.link-row{
    display:flex;
    justify-content:center;
    align-items:center;

flex-wrap:wrap;

gap:5px;

margin-top:18px;

font-size:10px;

color:var(--muted);
}

.link{
    border:0;

background:none;

color:var(--blue-dark);

font-size:10px;
    font-weight:800;
}

.security{
    display:flex;
    justify-content:center;
    align-items:center;

gap:6px;

margin-top:25px;

color:#9aadb7;

font-size:9px;
}

.lock{
    width:15px;
    height:15px;

display:grid;
    place-items:center;

border-radius:5px;

color:var(--green-dark);

background:#edfff7;
}

/* =========================================================
   INLINE AUTH PANEL
========================================================= */

.auth-panel{
    margin-top:22px;

padding:20px;

border-radius:18px;

background:
        linear-gradient(
            145deg,
            #f8fdff,
            #f6fffb
        );

border:1px solid #deeff4;

animation:
        panelIn .35s cubic-bezier(.2,.8,.2,1);
}

@keyframes panelIn{
    from{
        opacity:0;
        transform:translateY(12px) scale(.98);
    }

to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.panel-head{
    display:flex;
    align-items:center;

gap:12px;

margin-bottom:5px;
}

.panel-icon{
    width:38px;
    height:38px;

flex-shrink:0;

display:grid;
    place-items:center;

border-radius:12px;

color:var(--blue-dark);

background:#eaf8fe;

font-size:16px;
}

.panel-title{
    font-size:14px;
    font-weight:800;
}

.panel-subtitle{
    margin-top:3px;

color:var(--muted);

font-size:9px;
}

/* =========================================================
   PASSWORD
========================================================= */

.password-wrap{
    position:relative;
}

.password-wrap .input{
    padding-right:52px;
}

.eye{
    position:absolute;

right:8px;
    top:9px;

width:37px;
    height:35px;

border:0;

background:transparent;

color:var(--muted);

font-size:14px;
}

/* =========================================================
   OTP
========================================================= */

.otp-info{
    margin-top:17px;

padding:11px;

text-align:center;

border-radius:12px;

background:#f4fbfe;

border:1px solid #e0f0f5;

color:var(--muted);

font-size:9px;
}

.otp-info strong{
    color:var(--ink);
}

.otp-inputs{
    display:grid;

grid-template-columns:
        repeat(6,minmax(0,1fr));

gap:7px;

margin-top:18px;
}

.otp{
    width:100%;
    min-width:0;

height:52px;

border:1px solid var(--border);

border-radius:12px;

background:#fbfdfe;

outline:none;

text-align:center;

color:var(--blue-dark);

font-size:17px;
    font-weight:800;
}

.otp:focus{
    border-color:#76caea;

background:#fff;

box-shadow:
        0 0 0 4px rgba(21,158,232,.07);
}

.resend{
    text-align:center;

margin-top:13px;

color:var(--muted);

font-size:9px;
}

.resend button{
    border:0;

background:none;

color:var(--blue-dark);

font-weight:800;
}

/* =========================================================
   CHECKBOX
========================================================= */

.terms{
    display:flex;

gap:8px;

margin-top:15px;

color:var(--muted);

font-size:9px;

line-height:1.5;
}

.terms input{
    flex-shrink:0;

margin-top:2px;

accent-color:var(--blue);
}

/* =========================================================
   ERRORS / SUCCESS
========================================================= */

.error{
    display:none;

margin-top:12px;

padding:10px;

border-radius:10px;

background:#fff3f3;

border:1px solid #ffd5d5;

color:var(--danger);

font-size:9px;
}

.error.show{
    display:block;

animation:
        shake .3s ease;
}

@keyframes shake{
    0%,100%{
        transform:translateX(0);
    }

25%{
        transform:translateX(-4px);
    }

75%{
        transform:translateX(4px);
    }
}

.success{
    display:none;

margin-top:12px;

padding:11px;

border-radius:10px;

background:#edfff7;

border:1px solid #c9f1df;

color:var(--green-dark);

text-align:center;

font-size:9px;
    font-weight:700;
}

.success.show{
    display:block;
}

/* =========================================================
   CONNECTING
========================================================= */

.connect-screen,
.success-screen{
    text-align:center;
}

.connect-screen{
    padding-top:15px;
}

.connect-icon{
    width:100px;
    height:100px;

margin:0 auto 27px;

position:relative;

display:grid;
    place-items:center;

border-radius:50%;

background:#f0fbff;

border:1px solid #c8eaf5;
}

.connect-icon:before,
.connect-icon:after{
    content:"";

position:absolute;

border:1px solid rgba(21,158,232,.25);

border-radius:50%;

animation:ripple 2s infinite;
}

.connect-icon:before{
    inset:-12px;
}

.connect-icon:after{
    inset:-24px;

animation-delay:.5s;
}

@keyframes ripple{
    0%{
        opacity:1;
        transform:scale(.85);
    }

100%{
        opacity:0;
        transform:scale(1.2);
    }
}

.connect-router{
    width:42px;
    height:30px;

position:relative;

border-radius:8px;

background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );
}

.connect-router:after{
    content:"";

position:absolute;

width:5px;
    height:5px;

top:7px;
    right:7px;

border-radius:50%;

background:var(--green);
}

.loading-line{
    width:100%;
    height:5px;

margin-top:25px;

overflow:hidden;

border-radius:10px;

background:#edf5f8;
}

.loading-progress{
    width:0;
    height:100%;

border-radius:10px;

background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green)
        );

transition:
        width 2.8s linear;
}

/* =========================================================
   SUCCESS
========================================================= */

.success-circle{
    width:95px;
    height:95px;

margin:0 auto 25px;

display:grid;
    place-items:center;

border-radius:50%;

background:#edfff7;

border:1px solid #bdeedb;

color:var(--green-dark);

font-size:37px;

animation:successPop .6s ease;
}

@keyframes successPop{
    0%{
        transform:scale(.5);
        opacity:0;
    }

70%{
        transform:scale(1.08);
    }

100%{
        transform:scale(1);
        opacity:1;
    }
}

.connection-card{
    margin-top:25px;

padding:16px;

border-radius:15px;

background:#f7fcfe;

border:1px solid #e2eff4;

text-align:left;
}

.connection-row{
    display:flex;

justify-content:space-between;

gap:15px;

padding:7px 0;

font-size:10px;
}

.connection-row span{
    color:var(--muted);
}

.connection-row strong{
    text-align:right;

color:var(--ink);
}

/* =========================================================
   DASHBOARD DEMO
========================================================= */

.dashboard-card{
    margin-top:25px;

padding:18px;

border-radius:18px;

background:
        linear-gradient(
            135deg,
            #effaff,
            #effff8
        );

border:1px solid #d8edf3;
}

.dashboard-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

gap:10px;
}

.dashboard-plan{
    font-size:16px;
    font-weight:800;
}

.dashboard-speed{
    color:var(--blue-dark);

font-size:10px;
    font-weight:800;
}

.dashboard-grid{
    display:grid;

grid-template-columns:
        repeat(3,1fr);

gap:8px;

margin-top:14px;
}

.dashboard-stat{
    padding:12px 8px;

text-align:center;

border-radius:12px;

background:#fff;

border:1px solid #e2eff4;
}

.dashboard-stat strong{
    display:block;

font-size:12px;
}

.dashboard-stat span{
    display:block;

margin-top:4px;

color:var(--muted);

font-size:8px;
}

/* =========================================================
   MOBILE TOP BAR
========================================================= */

.mobile-brand{
    display:none;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

.page{
        padding:20px;
    }

.app{
        grid-template-columns:44% 56%;

min-height:680px;
    }

.connection-area{
        padding:35px;
    }

.auth-area{
        padding:35px;
    }

.connection-content{
        margin-top:75px;
    }

.connection-content h1{
        font-size:36px;
    }

.network-machine{
        transform:scale(.88);
        transform-origin:left top;

width:114%;
    }
}

/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media(max-width:820px){

body{
        background:#f6fcff;
    }

.page{
        padding:15px;
    }

.app{
        grid-template-columns:1fr;

max-width:650px;

min-height:auto;
    }

.connection-area{
        min-height:460px;

padding:30px;
    }

.connection-content{
        margin-top:55px;
    }

.connection-content h1{
        font-size:38px;
    }

.connection-content > p{
        max-width:520px;
    }

.network-machine{
        height:210px;

transform:scale(.9);
        transform-origin:left top;

width:112%;
    }

.network-status{
        margin-top:-20px;
    }

.auth-area{
        padding:38px 35px 45px;
    }

.auth{
        max-width:520px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:560px){

body{
        background:#fff;
    }

.page{
        padding:0;
        display:block;
    }

.app{
        width:100%;
        max-width:none;

min-height:100vh;

border:0;

border-radius:0;

box-shadow:none;
    }

.connection-area{
        min-height:410px;

padding:
            24px
            20px
            20px;
    }

.logo{
        width:40px;
        height:40px;

border-radius:12px;

font-size:17px;
    }

.brand-name{
        font-size:18px;
    }

.connection-content{
        margin-top:48px;
    }

.connection-label{
        padding:7px 10px;

font-size:8px;
    }

.connection-content h1{
        margin-top:16px;

font-size:32px;

letter-spacing:-1.5px;
    }

.connection-content > p{
        margin-top:13px;

font-size:11px;

line-height:1.65;
    }

.network-machine{
        height:175px;

margin-top:10px;

transform:scale(.68);

transform-origin:left top;

width:145%;
    }

.network-status{
        margin-top:-48px;

padding:11px 12px;
    }

.status-icon{
        width:29px;
        height:29px;
    }

.status-title{
        font-size:10px;
    }

.status-sub{
        font-size:8px;
    }

.status-right{
        font-size:8px;
    }

.auth-area{
        padding:
            30px
            20px
            45px;
    }

.auth{
        max-width:none;
    }

.progress{
        margin-bottom:28px;
    }

.progress-circle{
        width:27px;
        height:27px;
        min-width:27px;

font-size:9px;
    }

.progress-line{
        margin:0 5px;
    }

.auth h2{
        font-size:27px;
    }

.auth-description{
        font-size:11px;
    }

.customer-type{
        gap:7px;
    }

.customer-type button{
        min-height:54px;
    }

.method-buttons{
        grid-template-columns:1fr;
    }

.method{
        min-height:82px;
    }

.primary{
        min-height:53px;
    }

.auth-panel{
        padding:16px;
    }

.otp-inputs{
        gap:5px;
    }

.otp{
        height:48px;

border-radius:10px;

font-size:15px;
    }

.dashboard-grid{
        grid-template-columns:1fr;
    }

.connection-row{
        font-size:9px;
    }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px){

.connection-area{
        min-height:395px;
    }

.connection-content h1{
        font-size:29px;
    }

.network-machine{
        transform:scale(.58);

width:165%;
    }

.network-status{
        margin-top:-58px;
    }

.auth-area{
        padding-left:16px;
        padding-right:16px;
    }

.auth h2{
        font-size:25px;
    }

.progress-circle{
        width:25px;
        height:25px;
        min-width:25px;
    }

.otp{
        height:44px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

*,
    *:before,
    *:after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

scroll-behavior:auto !important;

transition-duration:.01ms !important;
    }
}
</style>
</head>

<body>

<div class="brand-name">
            Fiber<span>Net</span>
        </div>
    </div>

<div class="connection-label">
            <span class="live"></span>
            ISP NETWORK ONLINE
        </div>

<h1>
            Your internet.<br>
            <span>Your control.</span>
        </h1>

<p>
            Securely manage your FiberNet broadband,
            plans, payments and customer services
            from one connected portal.
        </p>

</div>

<div>

<div class="status-title">
                        Fiber Network
                    </div>

<div class="status-sub">
                        Broadband services operational
                    </div>

</div>

<div class="status-right">
                ● STABLE
            </div>

</div>

</section>

</div>

</div>

</div>

</div>

<div class="kicker">
        ISP CUSTOMER PORTAL
    </div>

<h2>
        Welcome to FiberNet
    </h2>

<p class="auth-description">
        Login or create your FiberNet account using
        your registered email or mobile number.
    </p>

<button
            class="selected"
            data-type="mobile"
            onclick="selectIdentifier(this)">
            📱 Mobile Number
        </button>

<button
            data-type="email"
            onclick="selectIdentifier(this)">
            ✉ Email Address
        </button>

</div>

<label id="identifierLabel">
            REGISTERED MOBILE NUMBER
        </label>

</div>

<button
        class="primary"
        onclick="continueLogin()">
        CONTINUE TO LOGIN →
    </button>

<span>
            New FiberNet customer?
        </span>

<button
            class="link"
            onclick="showSignup()">
            Create Account
        </button>

</div>

<button
            class="link"
            onclick="showForgot()">
            Forgot Password?
        </button>

</div>

<div class="security">
        <span class="lock">✓</span>
        Secure ISP customer authentication
    </div>

</div>

<div class="kicker">
        CUSTOMER LOGIN
    </div>

<h2>
        Choose your login
    </h2>

<p class="auth-description">
        Continue with a password or receive a secure
        one-time verification code.
    </p>

<div>

<div class="panel-title">
                    Login options
                </div>

<div class="panel-subtitle">
                    Account: <span id="loginIdentityDisplay">—</span>
                </div>

</div>

<strong>
                    🔐 Login with Password
                </strong>

<span>
                    Use your FiberNet account password
                    to securely sign in.
                </span>

</button>

<strong>
                    📱 Login with OTP
                </strong>

<span>
                    Receive a 6-digit verification code
                    on your registered contact.
                </span>

</button>

</div>

<button
        class="secondary"
        onclick="backToStart()">
        ← CHANGE EMAIL / MOBILE
    </button>

</div>

<div class="kicker">
        LOGIN • PASSWORD
    </div>

<h2>
        Welcome back
    </h2>

<p class="auth-description">
        Enter your FiberNet password to access
        your customer account.
    </p>

<div>

<div class="panel-title">
                    Password authentication
                </div>

</div>

<label>
                ACCOUNT PASSWORD
            </label>

</div>

<button
            class="primary"
            onclick="submitPasswordLogin()">
            LOGIN TO FIBERNET →
        </button>

<button
                class="link"
                onclick="showForgot()">
                Forgot password?
            </button>

</div>

<button
        class="secondary"
        onclick="showLoginMethods()">
        ← OTHER LOGIN METHOD
    </button>

</div>

<div class="kicker">
        LOGIN • OTP
    </div>

<h2>
        Verify your account
    </h2>

<p class="auth-description">
        Enter the verification code sent to your
        registered email or mobile number.
    </p>

<div>

<div class="panel-title">
                    OTP verification
                </div>

</div>

</div>

<div
            class="success"
            id="loginOTPSuccess">
            ✓ OTP verified successfully
        </div>

<button
            class="primary"
            onclick="verifyLoginOTP()">
            VERIFY & LOGIN →
        </button>

<span id="loginResendText">
                Resend OTP in 00:30
            </span>

<button
                id="loginResendButton"
                style="display:none"
                onclick="resendLoginOTP()">
                Resend OTP
            </button>

</div>

<button
        class="secondary"
        onclick="showLoginMethods()">
        ← OTHER LOGIN METHOD
    </button>

</div>

<div class="kicker">
        NEW FIBERNET CUSTOMER
    </div>

<h2>
        Create your account
    </h2>

<p class="auth-description">
        Choose how you want to create your FiberNet
        customer account.
    </p>

<strong>
                    🔐 Signup with Password
                </strong>

<span>
                    Create your account with your
                    details and a secure password.
                </span>

</button>

<strong>
                    📱 Signup with OTP
                </strong>

<span>
                    Create your account using
                    email/mobile OTP verification.
                </span>

</button>

</div>

<button
        class="secondary"
        onclick="backToStart()">
        ← BACK TO LOGIN
    </button>

</div>

<div class="kicker">
        SIGNUP • PASSWORD
    </div>

<h2>
        Create your account
    </h2>

<p class="auth-description">
        Enter your details. After creating your password,
        we'll verify your email or mobile with OTP.
    </p>

</div>

<label>
                EMAIL OR MOBILE NUMBER
            </label>

</div>

<label>
                CREATE PASSWORD
            </label>

</div>

<label>
                CONFIRM PASSWORD
            </label>

</div>

<span>
                I agree to the FiberNet Terms &
                Conditions and Privacy Policy.
            </span>

</label>

<button
            class="primary"
            onclick="submitSignupPassword()">
            CREATE ACCOUNT & VERIFY →
        </button>

</div>

<button
        class="secondary"
        onclick="showSignup()">
        ← OTHER SIGNUP METHOD
    </button>

</div>

<div class="kicker">
        SIGNUP • OTP
    </div>

<h2>
        Create with OTP
    </h2>

<p class="auth-description">
        Enter your name and email/mobile number.
        We'll verify it before creating your account.
    </p>

</div>

<label>
                EMAIL OR MOBILE NUMBER
            </label>

</div>

<button
            class="primary"
            onclick="sendSignupOTP()">
            SEND OTP & VERIFY →
        </button>

</div>

<button
        class="secondary"
        onclick="showSignup()">
        ← OTHER SIGNUP METHOD
    </button>

</div>

<div class="kicker">
        ACCOUNT VERIFICATION
    </div>

<h2>
        Verify your details
    </h2>

<p class="auth-description" id="signupVerifyDescription">
        Enter the OTP sent to your registered contact.
    </p>

<div>

<div class="panel-title">
                    Verify your account
                </div>

</div>

</div>

<div
            class="success"
            id="signupVerifySuccess">
            ✓ Details verified successfully
        </div>

<button
            class="primary"
            onclick="verifySignupOTP()">
            VERIFY & CREATE ACCOUNT →
        </button>

<span id="signupResendText">
                Resend OTP in 00:30
            </span>

<button
                id="signupResendButton"
                style="display:none"
                onclick="resendSignupOTP()">
                Resend OTP
            </button>

</div>

<button
        class="secondary"
        onclick="showSignup()">
        ← CHANGE SIGNUP METHOD
    </button>

</div>

<div class="kicker">
        ACCOUNT RECOVERY
    </div>

<h2>
        Forgot your password?
    </h2>

<p class="auth-description">
        Enter your registered email or mobile number.
        We'll send an OTP to verify your account.
    </p>

<label>
                EMAIL OR MOBILE NUMBER
            </label>

</div>

<button
            class="primary"
            onclick="sendForgotOTP()">
            SEND RECOVERY OTP →
        </button>

</div>

<button
        class="secondary"
        onclick="backToStart()">
        ← BACK TO LOGIN
    </button>

</div>

<div class="kicker">
        PASSWORD RECOVERY
    </div>

<h2>
        Verify your account
    </h2>

<p class="auth-description">
        Enter the OTP sent to your registered
        email or mobile number.
    </p>

</div>

<button
            class="primary"
            onclick="verifyForgotOTP()">
            VERIFY OTP →
        </button>

</div>

<button
        class="secondary"
        onclick="showForgot()">
        ← CHANGE EMAIL / MOBILE
    </button>

</div>

<div class="kicker">
        RECOVERY • NEW PASSWORD
    </div>

<h2>
        Create new password
    </h2>

<p class="auth-description">
        Your account is verified. Create a new secure
        password for your FiberNet account.
    </p>

<label>
                NEW PASSWORD
            </label>

</div>

<label>
                CONFIRM NEW PASSWORD
            </label>

</div>

<div
            class="success"
            id="newPasswordSuccess">
            ✓ Password updated successfully.
        </div>

<button
            class="primary"
            onclick="resetPassword()">
            RESET PASSWORD →
        </button>

</div>

</div>

<div class="kicker">
            AUTHENTICATED
        </div>

<h2>
            Connecting your account
        </h2>

<p class="auth-description">
            We're securely preparing your FiberNet
            customer dashboard.
        </p>

</div>

<div class="kicker">
            CONNECTION VERIFIED
        </div>

<h2>
            You're connected!
        </h2>

<p class="auth-description">
            Your FiberNet account has been successfully
            authenticated.
        </p>

<span>
                    Customer
                </span>

<strong id="successCustomer">
                    FiberNet Customer
                </strong>

</div>

<span>
                    Connection
                </span>

<strong>
                    Fiber Broadband
                </strong>

</div>

<span>
                    Service
                </span>

<strong style="color:#20b87b">
                    ● Active
                </strong>

</div>

<span>
                    Authentication
                </span>

<strong>
                    Verified
                </strong>

</div>

<button
            class="primary"
            onclick="openDashboard()">
            ENTER CUSTOMER DASHBOARD →
        </button>

<div class="security">
            <span class="lock">✓</span>
            Secure ISP session established
        </div>

</div>

<div class="kicker">
        FIBERNET CUSTOMER PORTAL
    </div>

<h2>
        Welcome back 👋
    </h2>

<p class="auth-description">
        Your broadband connection is active.
    </p>

<div class="dashboard-plan">
                FiberNet Pro
            </div>

</div>

<div class="dashboard-stat">
                <strong>₹799</strong>
                <span>Monthly Plan</span>
            </div>

<div class="dashboard-stat">
                <strong>Active</strong>
                <span>Connection</span>
            </div>

<div class="dashboard-stat">
                <strong>12 GB</strong>
                <span>Today's Usage</span>
            </div>

</div>

<button
        class="primary"
        onclick="alert('In Odoo 19 connect this to your customer dashboard route.')">
        OPEN FULL CUSTOMER PORTAL →
    </button>

<button
        class="secondary"
        onclick="backToStart()">
        LOGOUT
    </button>

</div>

</section>

</div>

/* =========================================================
   GLOBAL STATE
========================================================= */

let identifierType = "mobile";
let identifierValue = "";

let currentFlow = "";

let timer = null;
let seconds = 30;

/* =========================================================
   HELPER
========================================================= */

function $(id){
    return document.getElementById(id);
}

/* =========================================================
   SCREEN SYSTEM
========================================================= */

function showScreen(id){

document
        .querySelectorAll(".screen")
        .forEach(screen => {
            screen.classList.remove("active");
        });

const target = $(id);

if(target){
        target.classList.add("active");
    }

updateProgress(id);

setTimeout(() => {

const authArea =
            document.querySelector(".auth-area");

if(
            window.innerWidth <= 820 &&
            authArea
        ){

authArea.scrollIntoView({
                behavior:"smooth",
                block:"start"
            });

}

},80);

}

function updateProgress(id){

const loginScreens = [
        "screen1",
        "screenLoginMethod",
        "screenLoginPassword",
        "screenLoginOTP",
        "screenConnecting",
        "screenSuccess",
        "screenDashboard"
    ];

const signupScreens = [
        "screenSignup",
        "screenSignupPassword",
        "screenSignupOTP",
        "screenSignupVerify",
        "screenConnecting",
        "screenSuccess",
        "screenDashboard"
    ];

let step = 1;

if(
        id === "screenLoginMethod" ||
        id === "screenLoginPassword" ||
        id === "screenLoginOTP" ||
        id === "screenSignup" ||
        id === "screenSignupPassword" ||
        id === "screenSignupOTP" ||
        id === "screenForgot"
    ){
        step = 2;
    }

if(
        id === "screenSignupVerify" ||
        id === "screenForgotOTP" ||
        id === "screenNewPassword"
    ){
        step = 3;
    }

if(
        id === "screenConnecting" ||
        id === "screenSuccess" ||
        id === "screenDashboard"
    ){
        step = 4;
    }

for(let i=1;i<=4;i++){

const element = $("step"+i);

if(!element) continue;

element.classList.remove("active");
        element.classList.remove("done");

if(i < step){
            element.classList.add("done");
        }

if(i === step){
            element.classList.add("active");
        }

}

/* =========================================================
   IDENTIFIER TYPE
========================================================= */

function selectIdentifier(button){

document
        .querySelectorAll(".customer-type button")
        .forEach(btn => {
            btn.classList.remove("selected");
        });

button.classList.add("selected");

identifierType =
        button.dataset.type;

const input =
        $("customerInput");

const label =
        $("identifierLabel");

if(identifierType === "email"){

label.innerText =
            "REGISTERED EMAIL ADDRESS";

input.type = "email";

input.placeholder =
            "you@example.com";

}else{

label.innerText =
            "REGISTERED MOBILE NUMBER";

input.type = "tel";

input.placeholder =
            "+91 98765 43210";

}

/* =========================================================
   LOGIN START
========================================================= */

function continueLogin(){

const value =
        $("customerInput")
        .value
        .trim();

if(!value){

$("customerInput").focus();

return;
    }

identifierValue = value;

$("loginIdentityDisplay").innerText =
        maskIdentifier(value);

showScreen("screenLoginMethod");
}

function showLoginMethods(){

$("loginPasswordError")
        ?.classList.remove("show");

showScreen("screenLoginMethod");
}

function showLoginPassword(){

currentFlow = "login-password";

$("passwordIdentityDisplay").innerText =
        maskIdentifier(identifierValue);

$("loginPassword").value = "";

showScreen("screenLoginPassword");

setTimeout(() => {
        $("loginPassword").focus();
    },300);
}

function showLoginOTP(){

currentFlow = "login-otp";

$("loginOTPDisplay").innerText =
        maskIdentifier(identifierValue);

clearOTPGroup(".otp:not(.signup-otp):not(.forgot-otp)");

$("loginOTPError").classList.remove("show");

startTimer(
        "loginResendText",
        "loginResendButton",
        resendLoginOTP
    );

showScreen("screenLoginOTP");

setTimeout(() => {

const first =
            document.querySelector(
                "#screenLoginOTP .otp"
            );

if(first){
            first.focus();
        }

},300);
}

/* =========================================================
   LOGIN PASSWORD
========================================================= */

function submitPasswordLogin(){

const password =
        $("loginPassword").value.trim();

if(!password){

showError(
            "loginPasswordError",
            "Please enter your FiberNet password."
        );

return;
    }

startConnection();
}

/* =========================================================
   LOGIN OTP
========================================================= */

function verifyLoginOTP(){

const otp =
        getOTP("#screenLoginOTP .otp");

if(otp.length !== 6){

showError(
            "loginOTPError",
            "Please enter the complete 6-digit OTP."
        );

return;
    }

if(otp !== "123456"){

showError(
            "loginOTPError",
            "Invalid OTP. For this demo use 123456."
        );

return;
    }

$("loginOTPError")
        .classList.remove("show");

startConnection();
}

function resendLoginOTP(){

clearOTPGroup(
        "#screenLoginOTP .otp"
    );

startTimer(
        "loginResendText",
        "loginResendButton",
        resendLoginOTP
    );
}

/* =========================================================
   SIGNUP MAIN
========================================================= */

function showSignup(){

currentFlow = "signup";

showScreen("screenSignup");
}

function showSignupPassword(){

currentFlow = "signup-password";

clearError("signupPasswordError");

showScreen("screenSignupPassword");
}

function showSignupOTP(){

currentFlow = "signup-otp";

clearError("signupOTPError");

showScreen("screenSignupOTP");
}

/* =========================================================
   SIGNUP PASSWORD
========================================================= */

function submitSignupPassword(){

const name =
        $("signupName").value.trim();

const identity =
        $("signupIdentity").value.trim();

const password =
        $("signupPassword").value;

const confirm =
        $("signupConfirm").value;

const terms =
        $("signupTerms").checked;

if(!name){

showError(
            "signupPasswordError",
            "Please enter your full name."
        );

return;
    }

if(!identity){

showError(
            "signupPasswordError",
            "Please enter your email or mobile number."
        );

return;
    }

if(!isEmail(identity) && !isMobile(identity)){

showError(
            "signupPasswordError",
            "Please enter a valid email address or mobile number."
        );

return;
    }

if(password.length < 6){

showError(
            "signupPasswordError",
            "Password must contain at least 6 characters."
        );

return;
    }

if(password !== confirm){

showError(
            "signupPasswordError",
            "Passwords do not match."
        );

return;
    }

if(!terms){

showError(
            "signupPasswordError",
            "Please accept the Terms & Conditions."
        );

return;
    }

identifierValue = identity;

prepareSignupVerification();

}

/* =========================================================
   SIGNUP OTP FLOW
========================================================= */

function sendSignupOTP(){

const name =
        $("signupOTPName").value.trim();

const identity =
        $("signupOTPIdentity").value.trim();

if(!name){

showError(
            "signupOTPError",
            "Please enter your full name."
        );

return;
    }

if(!identity){

showError(
            "signupOTPError",
            "Please enter your email or mobile number."
        );

return;
    }

if(!isEmail(identity) && !isMobile(identity)){

showError(
            "signupOTPError",
            "Please enter a valid email address or mobile number."
        );

return;
    }

identifierValue = identity;

currentFlow = "signup-otp";

prepareSignupVerification();
}

function prepareSignupVerification(){

$("signupVerifyDisplay").innerText =
        maskIdentifier(identifierValue);

if(identifierValue.includes("@")){

$("signupVerifyDescription").innerText =
            "We've sent a verification OTP to your email address. Verify it to create your FiberNet account.";

}else{

$("signupVerifyDescription").innerText =
            "We've sent a verification OTP to your mobile number. Verify it to create your FiberNet account.";

}

clearOTPGroup(
        "#screenSignupVerify .signup-otp"
    );

$("signupVerifyError")
        .classList.remove("show");

$("signupVerifySuccess")
        .classList.remove("show");

startTimer(
        "signupResendText",
        "signupResendButton",
        resendSignupOTP
    );

showScreen("screenSignupVerify");

setTimeout(() => {

const first =
            document.querySelector(
                "#screenSignupVerify .signup-otp"
            );

if(first){
            first.focus();
        }

},300);

}

/* =========================================================
   VERIFY SIGNUP
========================================================= */

function verifySignupOTP(){

const otp =
        getOTP(
            "#screenSignupVerify .signup-otp"
        );

if(otp.length !== 6){

showError(
            "signupVerifyError",
            "Please enter the complete 6-digit OTP."
        );

return;
    }

if(otp !== "123456"){

showError(
            "signupVerifyError",
            "Invalid OTP. For this demo use 123456."
        );

return;
    }

$("signupVerifyError")
        .classList.remove("show");

$("signupVerifySuccess")
        .classList.add("show");

setTimeout(() => {

startConnection();

},700);

}

function resendSignupOTP(){

clearOTPGroup(
        "#screenSignupVerify .signup-otp"
    );

startTimer(
        "signupResendText",
        "signupResendButton",
        resendSignupOTP
    );

}

/* =========================================================
   FORGOT PASSWORD
========================================================= */

function showForgot(){

currentFlow = "forgot";

clearError("forgotError");

showScreen("screenForgot");

setTimeout(() => {
        $("forgotIdentity").focus();
    },300);
}

function sendForgotOTP(){

const identity =
        $("forgotIdentity").value.trim();

if(!identity){

showError(
            "forgotError",
            "Please enter your registered email or mobile number."
        );

return;
    }

if(!isEmail(identity) && !isMobile(identity)){

showError(
            "forgotError",
            "Please enter a valid email address or mobile number."
        );

return;
    }

identifierValue = identity;

$("forgotOTPDisplay").innerText =
        maskIdentifier(identity);

clearOTPGroup(
        "#screenForgotOTP .forgot-otp"
    );

showScreen("screenForgotOTP");

setTimeout(() => {

const first =
            document.querySelector(
                "#screenForgotOTP .forgot-otp"
            );

if(first){
            first.focus();
        }

},300);

}

function verifyForgotOTP(){

const otp =
        getOTP(
            "#screenForgotOTP .forgot-otp"
        );

if(otp.length !== 6){

showError(
            "forgotOTPError",
            "Please enter the complete 6-digit OTP."
        );

return;
    }

if(otp !== "123456"){

showError(
            "forgotOTPError",
            "Invalid OTP. For this demo use 123456."
        );

return;
    }

showScreen("screenNewPassword");

}

/* =========================================================
   RESET PASSWORD
========================================================= */

function resetPassword(){

const password =
        $("newPassword").value;

const confirm =
        $("newPasswordConfirm").value;

if(password.length < 6){

showError(
            "newPasswordError",
            "Password must contain at least 6 characters."
        );

return;
    }

if(password !== confirm){

showError(
            "newPasswordError",
            "Passwords do not match."
        );

return;
    }

$("newPasswordError")
        .classList.remove("show");

$("newPasswordSuccess")
        .classList.add("show");

setTimeout(() => {

$("newPassword").value = "";
        $("newPasswordConfirm").value = "";

backToStart();

},1200);

}

/* =========================================================
   CONNECTION
========================================================= */

function startConnection(){

showScreen("screenConnecting");

$("loadingProgress").style.width = "0%";

setTimeout(() => {

$("loadingProgress").style.width = "100%";

},100);

setTimeout(() => {

$("successCustomer").innerText =
            identifierValue ||
            "FiberNet Customer";

showScreen("screenSuccess");

},3000);

}

/* =========================================================
   DASHBOARD
========================================================= */

function openDashboard(){

showScreen("screenDashboard");

}

/* =========================================================
   BACK
========================================================= */

function backToStart(){

clearTimer();

showScreen("screen1");

}

/* =========================================================
   PASSWORD VISIBILITY
========================================================= */

function togglePassword(id,button){

const input = $(id);

if(input.type === "password"){

input.type = "text";

button.innerText = "◉";

}else{

input.type = "password";

button.innerText = "◉";

}

/* =========================================================
   ERROR
========================================================= */

function showError(id,message){

const element = $(id);

if(!element) return;

element.innerText = message;

element.classList.add("show");

}

function clearError(id){

const element = $(id);

if(!element) return;

element.classList.remove("show");

element.innerText = "";

}

/* =========================================================
   OTP
========================================================= */

function getOTP(selector){

let result = "";

document
        .querySelectorAll(selector)
        .forEach(input => {

result += input.value;

});

return result;

}

function clearOTPGroup(selector){

document
        .querySelectorAll(selector)
        .forEach(input => {

input.value = "";

});

}

function setupOTP(selector){

const inputs =
        document.querySelectorAll(selector);

inputs.forEach((input,index) => {

input.addEventListener(
            "input",
            function(){

this.value =
                    this.value
                    .replace(/\D/g,"")
                    .slice(0,1);

if(
                    this.value &&
                    index < inputs.length - 1
                ){

inputs[index + 1].focus();

}

}
        );

input.addEventListener(
            "keydown",
            function(e){

if(
                    e.key === "Backspace" &&
                    !this.value &&
                    index > 0
                ){

inputs[index - 1].focus();

}

}
        );

input.addEventListener(
            "paste",
            function(e){

e.preventDefault();

pasted
                    .split("")
                    .forEach((digit,i) => {

if(inputs[i]){
                            inputs[i].value = digit;
                        }

});

if(pasted.length === 6){

inputs[5].focus();

}

}
        );

});

}

/* =========================================================
   TIMER
========================================================= */

function startTimer(textId,buttonId,resendFunction){

clearTimer();

seconds = 30;

$(textId).style.display =
        "inline";

$(buttonId).style.display =
        "none";

updateTimer(
        textId,
        seconds
    );

timer = setInterval(() => {

seconds--;

updateTimer(
            textId,
            seconds
        );

if(seconds <= 0){

clearTimer();

$(textId).style.display =
                "none";

$(buttonId).style.display =
                "inline";

}

},1000);

}

function updateTimer(id,value){

$(id).innerText =
        "Resend OTP in 00:" +
        String(value).padStart(2,"0");

}

function clearTimer(){

if(timer){

clearInterval(timer);

timer = null;

}

/* =========================================================
   MASK
========================================================= */

function maskIdentifier(value){

if(!value){
        return "your registered contact";
    }

if(value.includes("@")){

const parts =
            value.split("@");

const name =
            parts[0];

const masked =
            name.length > 2
            ? name.substring(0,2) + "•••"
            : "•••";

return masked +
            "@" +
            parts[1];

}

const digits =
        value.replace(/\D/g,"");

if(digits.length >= 10){

return "+91 ••••• " +
            digits.slice(-4);

}

if(value.length > 4){

return value.slice(0,3) +
            "•••" +
            value.slice(-2);

}

return "••••••";

}

/* =========================================================
   VALIDATION
========================================================= */

function isEmail(value){

return /^[^\s@]+@[^\s@]+\.[^\s@]+$/
        .test(value);

}

function isMobile(value){

const digits =
        value.replace(/\D/g,"");

return digits.length >= 10 &&
           digits.length <= 15;

}

/* =========================================================
   GLOBAL ENTER KEY
========================================================= */

document.addEventListener(
    "keydown",
    function(e){

if(e.key !== "Enter"){
            return;
        }

const active =
            document.querySelector(
                ".screen.active"
            );

if(!active){
            return;
        }

switch(active.id){

case "screen1":
                continueLogin();
                break;

case "screenLoginPassword":
                submitPasswordLogin();
                break;

case "screenLoginOTP":
                verifyLoginOTP();
                break;

case "screenSignupPassword":
                submitSignupPassword();
                break;

case "screenSignupOTP":
                sendSignupOTP();
                break;

case "screenSignupVerify":
                verifySignupOTP();
                break;

case "screenForgot":
                sendForgotOTP();
                break;

case "screenForgotOTP":
                verifyForgotOTP();
                break;

case "screenNewPassword":
                resetPassword();
                break;

}

}
);

/* =========================================================
   INITIALIZE OTP INPUTS
========================================================= */

setupOTP(
    "#screenLoginOTP .otp"
);

setupOTP(
    "#screenSignupVerify .signup-otp"
);

setupOTP(
    "#screenForgotOTP .forgot-otp"
);

/* =========================================================
   INITIAL SCREEN
========================================================= */

updateProgress("screen1");

</script>

</body>
</html>

Rate this design:

LOGIN5 by VEDANT SOMANI 09/07/2026

0.0 (0)

Rudra Fiber — Customer Gateway

RudraFiber

Network Online

24/7 Support

NEXT GENERATION FIBER NETWORK

Stay connected. Stay ahead. Always.

Your connection starts here. Manage your broadband account, view your current plan, pay bills, upgrade your speed and keep your entire home connected.

1 Gbps MAX SPEED

99.9% UPTIME

24/7 SUPPORT

Welcome back

Connect to your customer account

First name

Last name

Mobile number

Email address

Create password

By creating an account you agree to the Terms of Service, Privacy Policy and broadband service conditions.

Secure encrypted customer gateway

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Rudra Fiber — Customer Gateway</title>

<style>

/* =========================================================
   ROOT
========================================================= */

:root{
    --blue:#159FE8;
    --blue-dark:#087FC5;
    --blue-soft:#EAF8FF;

    --green:#38CF91;
    --green-dark:#1DAE72;
    --green-soft:#ECFFF6;

    --white:#FFFFFF;
    --bg:#F5FBFD;

    --text:#14354B;
    --muted:#71899A;
    --border:#DCECF3;

    --shadow:0 25px 70px rgba(20,87,116,.11);
}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color:var(--text);

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(21,159,232,.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(56,207,145,.10),
            transparent 25%
        ),
        var(--bg);

    overflow-x:hidden;
}


/* =========================================================
   BACKGROUND NETWORK
========================================================= */

.background{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
}

.bg-grid{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(30,150,190,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(30,150,190,.025) 1px,
            transparent 1px
        );

    background-size:55px 55px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black,
            transparent 78%
        );
}

.bg-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(2px);
}

.bg-orb.one{
    width:430px;
    height:430px;
    left:-210px;
    top:30%;
    background:rgba(21,159,232,.055);
}

.bg-orb.two{
    width:500px;
    height:500px;
    right:-250px;
    bottom:-180px;
    background:rgba(56,207,145,.06);
}


/* =========================================================
   HEADER
========================================================= */

header{
    position:relative;
    z-index:20;

    width:min(1250px,calc(100% - 40px));
    height:78px;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:11px;
}

.logo-box{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

    box-shadow:
        0 10px 25px rgba(21,159,232,.18);
}

.logo-box svg{
    width:24px;
    color:white;
}

.logo-name{
    font-size:20px;
    font-weight:900;
    letter-spacing:-.7px;
}

.logo-name span{
    color:var(--blue);
}

.header-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.header-pill{
    display:flex;
    align-items:center;
    gap:8px;

    padding:9px 13px;

    border-radius:30px;

    background:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.95);

    box-shadow:
        0 7px 25px rgba(25,90,120,.05);

    font-size:10px;
    font-weight:800;
    color:#6E8797;
}

.live-dot{
    width:7px;
    height:7px;
    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 0 5px rgba(56,207,145,.12);
}


/* =========================================================
   MAIN
========================================================= */

.main{
    position:relative;
    z-index:5;

    width:min(1250px,calc(100% - 40px));

    min-height:
        calc(100vh - 78px);

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr
        430px;

    align-items:center;

    gap:70px;

    padding:
        25px 0
        65px;
}


/* =========================================================
   LEFT NETWORK SECTION
========================================================= */

.network-section{
    position:relative;
    min-height:600px;

    display:flex;
    align-items:center;
}


/* text */

.hero{
    position:relative;
    z-index:4;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 13px;

    margin-bottom:21px;

    border-radius:30px;

    background:white;

    border:1px solid var(--border);

    color:var(--blue-dark);

    font-size:10px;
    font-weight:900;
    letter-spacing:.7px;

    box-shadow:
        0 8px 24px rgba(30,90,120,.05);
}

.hero-badge i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);
}

.hero h1{
    max-width:650px;

    font-size:
        clamp(44px,5vw,72px);

    line-height:.98;

    letter-spacing:-4px;

    margin-bottom:23px;
}

.hero h1 .blue{
    color:var(--blue);
}

.hero h1 .green{
    color:var(--green-dark);
}

.hero-text{
    max-width:535px;

    font-size:15px;

    color:var(--muted);

    line-height:1.8;
}


/* =========================================================
   FIBER VISUAL
========================================================= */

.fiber-visual{
    position:absolute;

    width:560px;
    height:560px;

    right:-30px;
    top:50%;

    transform:
        translateY(-50%);

    pointer-events:none;
}


/* outer circles */

.fiber-circle{
    position:absolute;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    border:1px solid rgba(21,159,232,.13);
}

.fiber-circle.c1{
    width:530px;
    height:530px;

    animation:
        spin 35s linear infinite;
}

.fiber-circle.c2{
    width:430px;
    height:430px;

    border-color:
        rgba(56,207,145,.15);

    animation:
        spinReverse 25s linear infinite;
}

.fiber-circle.c3{
    width:320px;
    height:320px;

    border:
        1px dashed rgba(21,159,232,.17);

    animation:
        spin 18s linear infinite;
}

@keyframes spin{
    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}

@keyframes spinReverse{
    to{
        transform:
            translate(-50%,-50%)
            rotate(-360deg);
    }
}


/* =========================================================
   FIBER ROUTES
========================================================= */

.route{
    position:absolute;

    left:50%;
    top:50%;

    height:2px;

    width:275px;

    transform-origin:left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(21,159,232,.38),
            rgba(56,207,145,.15)
        );
}

.route::after{
    content:"";

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    top:-2px;

    background:var(--green);

    box-shadow:
        0 0 15px var(--green);

    animation:
        packet 3.5s linear infinite;
}

@keyframes packet{

    0%{
        left:0;
        opacity:0;
    }

    12%{
        opacity:1;
    }

    85%{
        opacity:1;
    }

    100%{
        left:100%;
        opacity:0;
    }
}

.route.r1{
    transform:rotate(-35deg);
}

.route.r2{
    transform:rotate(35deg);
}

.route.r3{
    transform:rotate(145deg);
}

.route.r4{
    transform:rotate(215deg);
}

.route.r2::after{
    animation-delay:.8s;
}

.route.r3::after{
    animation-delay:1.6s;
}

.route.r4::after{
    animation-delay:2.2s;
}


/* =========================================================
   CENTER ROUTER
========================================================= */

.router{
    position:absolute;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    width:145px;
    height:115px;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F0FAFE
        );

    border:1px solid #DCEFF5;

    box-shadow:
        0 30px 65px rgba(25,90,120,.15);

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    animation:
        routerFloat 4s ease-in-out infinite;
}

@keyframes routerFloat{

    0%,100%{
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

    50%{
        transform:
            translate(-50%,-50%)
            translateY(-8px);
    }
}

.router-top{
    display:flex;
    gap:7px;

    margin-bottom:14px;
}

.router-led{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#CFE0E8;
}

.router-led.active{
    background:var(--green);

    box-shadow:
        0 0 12px rgba(56,207,145,.7);
}

.router-body{
    width:85px;
    height:33px;

    border-radius:10px;

    background:
        linear-gradient(
            100deg,
            #E9F8FF,
            #EFFFF8
        );

    display:flex;
    justify-content:center;
    align-items:center;
}

.router-body svg{
    width:30px;
    color:var(--blue);
}


/* =========================================================
   NETWORK NODES
========================================================= */

.device{
    position:absolute;

    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:
        rgba(255,255,255,.90);

    border:
        1px solid rgba(255,255,255,.95);

    box-shadow:
        0 13px 30px rgba(25,90,120,.10);

    animation:
        deviceFloat 4s ease-in-out infinite;
}

.device svg{
    width:21px;
}

.device.d1{
    left:12px;
    top:42%;
}

.device.d2{
    left:105px;
    top:5%;
    animation-delay:.6s;
}

.device.d3{
    right:25px;
    top:23%;
    animation-delay:1s;
}

.device.d4{
    right:5px;
    bottom:27%;
    animation-delay:1.5s;
}

.device.d5{
    left:95px;
    bottom:6%;
    animation-delay:2s;
}

@keyframes deviceFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-7px);
    }
}


/* =========================================================
   NETWORK INFO
========================================================= */

.network-stats{
    position:absolute;

    left:10px;
    bottom:30px;

    display:flex;
    gap:10px;
}

.stat{
    padding:11px 14px;

    border-radius:14px;

    background:
        rgba(255,255,255,.78);

    border:1px solid rgba(255,255,255,.95);

    box-shadow:
        0 10px 28px rgba(25,90,120,.06);
}

.stat strong{
    display:block;

    color:var(--text);

    font-size:13px;
}

.stat span{
    color:#8298A6;

    font-size:9px;
}


/* =========================================================
   AUTH
========================================================= */

.auth-area{
    position:relative;
    z-index:10;
}

.auth-card{
    position:relative;

    width:100%;

    padding:31px;

    border-radius:31px;

    background:
        rgba(255,255,255,.90);

    border:
        1px solid rgba(255,255,255,.98);

    backdrop-filter:
        blur(22px);

    box-shadow:
        var(--shadow);

    overflow:hidden;
}

.auth-card::before{
    content:"";

    position:absolute;

    left:30px;
    right:30px;
    top:0;

    height:2px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            var(--green),
            transparent
        );
}

.auth-card::after{
    content:"";

    position:absolute;

    width:150px;
    height:150px;

    border-radius:50%;

    right:-80px;
    top:-80px;

    background:
        rgba(56,207,145,.08);
}


/* =========================================================
   AUTH HEADER
========================================================= */

.auth-header{
    position:relative;
    z-index:2;

    text-align:center;

    margin-bottom:22px;
}

.auth-symbol{
    width:48px;
    height:48px;

    margin:
        0 auto
        13px;

    display:grid;
    place-items:center;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            var(--blue-soft),
            var(--green-soft)
        );
}

.auth-symbol svg{
    width:25px;
    color:var(--blue);
}

.auth-header h2{
    font-size:25px;

    letter-spacing:-1px;

    margin-bottom:5px;
}

.auth-header p{
    color:var(--muted);

    font-size:11px;
}


/* =========================================================
   AUTH SWITCH
========================================================= */

.auth-switch{
    position:relative;

    display:grid;
    grid-template-columns:1fr 1fr;

    padding:4px;

    background:#EEF7FA;

    border-radius:13px;

    margin-bottom:22px;
}

.switch-slider{
    position:absolute;

    left:4px;
    top:4px;

    width:
        calc(50% - 4px);

    height:
        calc(100% - 8px);

    border-radius:10px;

    background:white;

    box-shadow:
        0 4px 13px rgba(20,80,110,.08);

    transition:
        .4s cubic-bezier(.2,.8,.2,1);
}

.auth-switch.signup
.switch-slider{
    left:50%;
}

.auth-switch button{
    position:relative;
    z-index:2;

    border:0;

    background:transparent;

    padding:10px;

    cursor:pointer;

    color:#7D94A3;

    font-size:11px;

    font-weight:900;
}

.auth-switch button.active{
    color:var(--blue-dark);
}


/* =========================================================
   FORM
========================================================= */

.form{
    display:none;
}

.form.active{
    display:block;

    animation:
        formIn .4s ease;
}

@keyframes formIn{
    from{
        opacity:0;
        transform:
            translateY(10px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.field{
    margin-bottom:15px;
}

.field label{
    display:block;

    margin-bottom:7px;

    color:#587486;

    font-size:9px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.7px;
}

.input-wrap{
    position:relative;
}

.input-icon{
    position:absolute;

    left:14px;
    top:50%;

    transform:
        translateY(-50%);

    width:17px;

    color:#8DA5B4;
}

.input-wrap input{
    width:100%;
    height:47px;

    border:
        1px solid var(--border);

    border-radius:12px;

    outline:none;

    background:#FBFDFE;

    color:var(--text);

    font-size:12px;

    padding:
        0 43px;

    transition:.25s;
}

.input-wrap input:focus{
    background:white;

    border-color:#6DC6EC;

    box-shadow:
        0 0 0 4px
        rgba(21,159,232,.07);
}

.password-eye{
    position:absolute;

    right:12px;
    top:50%;

    transform:
        translateY(-50%);

    border:0;
    background:none;

    color:#8CA3B1;

    cursor:pointer;
}

.password-eye svg{
    width:17px;
}


/* =========================================================
   LOGIN OPTIONS
========================================================= */

.form-options{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin:
        0 0
        17px;
}

.remember{
    display:flex;
    align-items:center;
    gap:6px;

    color:#8195A1;

    font-size:9px;
}

.remember input{
    accent-color:var(--green);
}

.forgot{
    border:0;
    background:none;

    cursor:pointer;

    color:var(--blue-dark);

    font-size:9px;
    font-weight:800;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.primary{
    width:100%;
    height:49px;

    border:0;
    border-radius:13px;

    cursor:pointer;

    color:white;

    font-size:11px;

    font-weight:900;

    letter-spacing:.3px;

    background:
        linear-gradient(
            100deg,
            var(--blue),
            var(--green)
        );

    box-shadow:
        0 13px 28px
        rgba(21,159,232,.18);

    transition:.3s;

    overflow:hidden;

    position:relative;
}

.primary::before{
    content:"";

    position:absolute;

    left:-100%;
    top:0;

    width:65%;
    height:100%;

    transform:
        skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transition:.7s;
}

.primary:hover::before{
    left:140%;
}

.primary:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 35px
        rgba(21,159,232,.24);
}


/* =========================================================
   DIVIDER
========================================================= */

.divider{
    display:flex;
    align-items:center;
    gap:10px;

    margin:19px 0;

    color:#A1B1BB;

    font-size:8px;
}

.divider::before,
.divider::after{
    content:"";

    height:1px;

    flex:1;

    background:#E2EDF2;
}


/* =========================================================
   OTP BUTTON
========================================================= */

.otp-button{
    width:100%;
    height:43px;

    border:
        1px solid var(--border);

    background:white;

    border-radius:12px;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    color:#5F7889;

    font-size:10px;
    font-weight:900;

    transition:.25s;
}

.otp-button:hover{
    color:var(--blue-dark);

    border-color:#8BD1EC;
}

.otp-button svg{
    width:16px;
}


/* =========================================================
   SIGNUP
========================================================= */

.two-columns{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:10px;
}

.terms{
    color:#879AA7;

    font-size:8px;

    line-height:1.65;

    margin:
        -1px 0
        16px;
}

.terms a{
    color:var(--blue-dark);

    text-decoration:none;

    font-weight:800;
}


/* =========================================================
   SECURITY
========================================================= */

.security{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    margin-top:17px;

    color:#9AACB6;

    font-size:8px;
}

.security svg{
    width:12px;

    color:var(--green);
}


/* =========================================================
   OTP MODAL
========================================================= */

.modal{
    position:fixed;

    inset:0;

    z-index:100;

    display:none;

    align-items:center;
    justify-content:center;

    background:
        rgba(10,44,62,.17);

    backdrop-filter:
        blur(8px);
}

.modal.show{
    display:flex;
}

.otp-box{
    position:relative;

    width:370px;
    max-width:
        calc(100% - 30px);

    padding:29px;

    border-radius:27px;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid white;

    box-shadow:
        0 35px 90px
        rgba(10,60,85,.20);

    animation:
        modalIn .35s ease;
}

@keyframes modalIn{
    from{
        opacity:0;
        transform:
            scale(.9)
            translateY(20px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.close-modal{
    position:absolute;

    right:16px;
    top:16px;

    width:30px;
    height:30px;

    border:0;

    border-radius:50%;

    background:#F0F7FA;

    color:#75909F;

    cursor:pointer;
}

.otp-icon{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    margin:0 auto 15px;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            var(--blue-soft),
            var(--green-soft)
        );
}

.otp-icon svg{
    width:27px;
    color:var(--blue);
}

.otp-box h3{
    text-align:center;

    font-size:23px;

    margin-bottom:6px;
}

.otp-box > p{
    text-align:center;

    color:var(--muted);

    font-size:10px;

    line-height:1.6;

    margin-bottom:20px;
}

.otp-inputs{
    display:flex;

    justify-content:center;

    gap:7px;

    margin-bottom:17px;
}

.otp-inputs input{
    width:40px;
    height:47px;

    text-align:center;

    font-size:19px;
    font-weight:800;

    border:
        1px solid var(--border);

    border-radius:10px;

    outline:none;
}

.otp-inputs input:focus{
    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(21,159,232,.07);
}

.verify{
    width:100%;
    height:45px;

    border:0;

    border-radius:12px;

    background:
        linear-gradient(
            100deg,
            var(--blue),
            var(--green)
        );

    color:white;

    font-size:10px;
    font-weight:900;

    cursor:pointer;
}

.resend{
    display:block;

    margin:15px auto 0;

    border:0;
    background:none;

    color:var(--blue-dark);

    font-size:9px;

    font-weight:800;

    cursor:pointer;
}


/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

    right:20px;
    bottom:20px;

    z-index:200;

    padding:
        12px 16px;

    border-radius:12px;

    background:
        rgba(12,45,62,.94);

    color:white;

    font-size:10px;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.15);

    transform:
        translateY(80px);

    opacity:0;

    transition:.35s;
}

.toast.show{
    transform:none;
    opacity:1;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    body{
        overflow:auto;
    }

    .main{
        grid-template-columns:1fr;

        padding:
            25px 0
            50px;
    }

    .network-section{
        min-height:520px;
    }

    .hero{
        text-align:center;
    }

    .hero-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .hero h1,
    .hero-text{
        margin-left:auto;
        margin-right:auto;
    }

    .fiber-visual{
        opacity:.45;

        right:50%;

        transform:
            translate(50%,-50%);
    }

    .network-stats{
        left:50%;

        transform:
            translateX(-50%);
    }

    .auth-area{
        width:430px;
        max-width:100%;

        margin:
            0 auto;
    }
}


@media(max-width:600px){

    header{
        width:
            calc(100% - 28px);

        height:68px;
    }

    .header-pill{
        display:none;
    }

    .main{
        width:
            calc(100% - 28px);
    }

    .network-section{
        min-height:430px;
    }

    .hero h1{
        font-size:43px;

        letter-spacing:-2.5px;
    }

    .hero-text{
        font-size:13px;
    }

    .fiber-visual{
        width:430px;
        height:430px;
    }

    .fiber-circle.c1{
        width:400px;
        height:400px;
    }

    .fiber-circle.c2{
        width:325px;
        height:325px;
    }

    .fiber-circle.c3{
        width:240px;
        height:240px;
    }

    .device{
        transform:scale(.75);
    }

    .router{
        transform:
            translate(-50%,-50%)
            scale(.8);
    }

    .network-stats{
        bottom:5px;
    }

    .stat{
        padding:9px 11px;
    }

    .stat strong{
        font-size:11px;
    }

    .stat span{
        font-size:7px;
    }

    .auth-card{
        padding:25px 18px;

        border-radius:25px;
    }

    .two-columns{
        grid-template-columns:1fr;
        gap:0;
    }
}


@media(max-width:380px){

    .hero h1{
        font-size:36px;
    }

    .fiber-visual{
        width:360px;
        height:360px;
    }

    .fiber-circle.c1{
        width:330px;
        height:330px;
    }

    .fiber-circle.c2{
        width:270px;
        height:270px;
    }

    .fiber-circle.c3{
        width:200px;
        height:200px;
    }

    .network-stats{
        display:none;
    }

    .otp-inputs{
        gap:5px;
    }

    .otp-inputs input{
        width:35px;
        height:43px;
    }
}

</style>
</head>


<body>


<!-- =========================================================
     BACKGROUND
========================================================= -->

<div class="background">

    <div class="bg-grid"></div>

    <div class="bg-orb one"></div>

    <div class="bg-orb two"></div>

</div>



<!-- =========================================================
     HEADER
========================================================= -->

<header>

    <div class="logo">

        <div class="logo-box">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">

                <path d="M3 12h18"/>
                <path d="M12 3v18"/>
                <circle cx="12" cy="12" r="8"/>

            </svg>

        </div>

        <div class="logo-name">
            Rudra<span>Fiber</span>
        </div>

    </div>


    <div class="header-right">

        <div class="header-pill">

            <span class="live-dot"></span>

            Network Online

        </div>

        <div class="header-pill">

            24/7 Support

        </div>

    </div>

</header>



<!-- =========================================================
     MAIN
========================================================= -->

<main class="main">


<!-- =========================================================
     NETWORK SECTION
========================================================= -->

<section class="network-section">


    <div class="hero">

        <div class="hero-badge">

            <i></i>

            NEXT GENERATION FIBER NETWORK

        </div>


        <h1>

            Stay connected.
            <span class="blue">
                Stay ahead.
            </span>
            <span class="green">
                Always.
            </span>

        </h1>


        <p class="hero-text">

            Your connection starts here.
            Manage your broadband account,
            view your current plan, pay bills,
            upgrade your speed and keep your
            entire home connected.

        </p>

    </div>



    <!-- =====================================================
         FIBER VISUAL
    ====================================================== -->

    <div class="fiber-visual">


        <div class="fiber-circle c1"></div>

        <div class="fiber-circle c2"></div>

        <div class="fiber-circle c3"></div>


        <div class="route r1"></div>
        <div class="route r2"></div>
        <div class="route r3"></div>
        <div class="route r4"></div>


        <!-- HOME -->

        <div class="device d1">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="#159FE8"
                stroke-width="1.8"
                stroke-linecap="round"
                stroke-linejoin="round">

                <path d="M3 11l9-8 9 8"/>
                <path d="M5 10v10h14V10"/>
                <path d="M9 20v-6h6v6"/>

            </svg>

        </div>


        <!-- CLOUD -->

        <div class="device d2">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="#38CF91"
                stroke-width="1.8"
                stroke-linecap="round">

                <path
                    d="M7 18h10a4 4 0 0 0 .5-7.97
                    A6 6 0 0 0 6 9.5
                    A4.5 4.5 0 0 0 7 18z"/>

            </svg>

        </div>


        <!-- WIFI -->

        <div class="device d3">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="#159FE8"
                stroke-width="1.8"
                stroke-linecap="round">

                <path d="M4 9a12 12 0 0 1 16 0"/>
                <path d="M7 12a8 8 0 0 1 10 0"/>
                <path d="M10 15a4 4 0 0 1 4 0"/>
                <circle cx="12" cy="18" r="1"/>

            </svg>

        </div>


        <!-- TV -->

        <div class="device d4">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="#38CF91"
                stroke-width="1.8"
                stroke-linecap="round">

                <rect
                    x="3"
                    y="5"
                    width="18"
                    height="13"
                    rx="2"/>

                <path d="M8 21h8"/>
                <path d="M12 18v3"/>

            </svg>

        </div>


        <!-- MOBILE -->

        <div class="device d5">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="#159FE8"
                stroke-width="1.8"
                stroke-linecap="round">

                <rect
                    x="7"
                    y="2"
                    width="10"
                    height="20"
                    rx="2"/>

                <path d="M10 18h4"/>

            </svg>

        </div>


        <!-- ROUTER -->

        <div class="router">

            <div class="router-top">

                <span class="router-led active"></span>
                <span class="router-led active"></span>
                <span class="router-led"></span>
                <span class="router-led active"></span>

            </div>


            <div class="router-body">

                <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.8"
                    stroke-linecap="round">

                    <rect
                        x="3"
                        y="8"
                        width="18"
                        height="9"
                        rx="2"/>

                    <path d="M7 12h.01"/>
                    <path d="M11 12h.01"/>
                    <path d="M15 12h.01"/>

                    <path d="M8 5c2.5-2 5.5-2 8 0"/>

                </svg>

            </div>

        </div>

    </div>



    <!-- NETWORK STATS -->

    <div class="network-stats">

        <div class="stat">

            <strong>1 Gbps</strong>

            <span>MAX SPEED</span>

        </div>


        <div class="stat">

            <strong>99.9%</strong>

            <span>UPTIME</span>

        </div>


        <div class="stat">

            <strong>24/7</strong>

            <span>SUPPORT</span>

        </div>

    </div>


</section>



<!-- =========================================================
     AUTH AREA
========================================================= -->

<section class="auth-area">


<div class="auth-card">


    <!-- HEADER -->

    <div class="auth-header">

        <div class="auth-symbol">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.8"
                stroke-linecap="round">

                <circle cx="12" cy="12" r="8"/>

                <path d="M12 4v4"/>
                <path d="M12 16v4"/>
                <path d="M4 12h4"/>
                <path d="M16 12h4"/>

            </svg>

        </div>


        <h2 id="authTitle">
            Welcome back
        </h2>


        <p id="authSubtitle">
            Connect to your customer account
        </p>

    </div>



    <!-- LOGIN / SIGNUP -->

    <div
        class="auth-switch"
        id="authSwitch">

        <div class="switch-slider"></div>


        <button
            id="loginTab"
            class="active"
            onclick="switchAuth('login')">

            LOGIN

        </button>


        <button
            id="signupTab"
            onclick="switchAuth('signup')">

            SIGN UP

        </button>

    </div>



    <!-- =====================================================
         LOGIN
    ====================================================== -->

    <form
        id="loginForm"
        class="form active"
        onsubmit="login(event)">


        <!-- identifier -->

        <div class="field">

            <label>
                Customer ID / Mobile / Email
            </label>


            <div class="input-wrap">

                <svg
                    class="input-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2">

                    <circle
                        cx="12"
                        cy="8"
                        r="4"/>

                    <path
                        d="M4 21c0-4 3-7 8-7s8 3 8 7"/>

                </svg>


                <input
                    id="loginIdentifier"
                    type="text"
                    placeholder="Customer ID, mobile or email"
                    autocomplete="username"
                    required>

            </div>

        </div>



        <!-- password -->

        <div class="field">

            <label>
                Password
            </label>


            <div class="input-wrap">

                <svg
                    class="input-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2">

                    <rect
                        x="4"
                        y="10"
                        width="16"
                        height="11"
                        rx="2"/>

                    <path
                        d="M8 10V7a4 4 0 0 1 8 0v3"/>

                </svg>


                <input
                    id="loginPassword"
                    type="password"
                    placeholder="Enter password"
                    autocomplete="current-password"
                    required>


                <button
                    type="button"
                    class="password-eye"
                    onclick="togglePassword(
                        'loginPassword',
                        this
                    )">

                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2">

                        <path
                            d="M2 12s3-7 10-7
                            10 7 10 7-3 7-10 7S2 12 2 12z"/>

                        <circle
                            cx="12"
                            cy="12"
                            r="3"/>

                    </svg>

                </button>

            </div>

        </div>



        <!-- options -->

        <div class="form-options">

            <label class="remember">

                <input type="checkbox">

                Remember me

            </label>


            <button
                type="button"
                class="forgot"
                onclick="openRecovery()">

                Forgot password?

            </button>

        </div>



        <!-- login -->

        <button
            class="primary"
            type="submit">

            LOGIN TO MY ACCOUNT

        </button>



        <!-- divider -->

        <div class="divider">
            OR
        </div>



        <!-- OTP -->

        <button
            type="button"
            class="otp-button"
            onclick="openOTP('login')">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2">

                <rect
                    x="5"
                    y="3"
                    width="14"
                    height="18"
                    rx="2"/>

                <path d="M8 8h8"/>
                <path d="M8 12h8"/>
                <path d="M8 16h4"/>

            </svg>

            LOGIN WITH OTP

        </button>


    </form>



    <!-- =====================================================
         SIGNUP
    ====================================================== -->

    <form
        id="signupForm"
        class="form"
        onsubmit="signup(event)">


        <div class="two-columns">


            <div class="field">

                <label>
                    First name
                </label>

                <div class="input-wrap">

                    <input
                        style="padding-left:14px"
                        type="text"
                        placeholder="First name"
                        required>

                </div>

            </div>


            <div class="field">

                <label>
                    Last name
                </label>

                <div class="input-wrap">

                    <input
                        style="padding-left:14px"
                        type="text"
                        placeholder="Last name"
                        required>

                </div>

            </div>

        </div>



        <div class="field">

            <label>
                Mobile number
            </label>


            <div class="input-wrap">

                <svg
                    class="input-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2">

                    <rect
                        x="7"
                        y="2"
                        width="10"
                        height="20"
                        rx="2"/>

                    <path d="M10 18h4"/>

                </svg>


                <input
                    type="tel"
                    placeholder="+91 98765 43210"
                    required>

            </div>

        </div>



        <div class="field">

            <label>
                Email address
            </label>


            <div class="input-wrap">

                <svg
                    class="input-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2">

                    <rect
                        x="3"
                        y="5"
                        width="18"
                        height="14"
                        rx="2"/>

                    <path d="M3 7l9 6 9-6"/>

                </svg>


                <input
                    type="email"
                    placeholder="you@example.com"
                    required>

            </div>

        </div>



        <div class="field">

            <label>
                Create password
            </label>


            <div class="input-wrap">

                <svg
                    class="input-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2">

                    <rect
                        x="4"
                        y="10"
                        width="16"
                        height="11"
                        rx="2"/>

                    <path
                        d="M8 10V7a4 4 0 0 1 8 0v3"/>

                </svg>


                <input
                    id="signupPassword"
                    type="password"
                    placeholder="Create a password"
                    required>


                <button
                    type="button"
                    class="password-eye"
                    onclick="togglePassword(
                        'signupPassword',
                        this
                    )">

                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2">

                        <path
                            d="M2 12s3-7 10-7
                            10 7 10 7-3 7-10 7S2 12 2 12z"/>

                        <circle
                            cx="12"
                            cy="12"
                            r="3"/>

                    </svg>

                </button>

            </div>

        </div>



        <div class="terms">

            By creating an account you agree to the
            <a href="#">Terms of Service</a>,
            <a href="#">Privacy Policy</a>
            and broadband service conditions.

        </div>



        <button
            class="primary"
            type="submit">

            CREATE MY ACCOUNT

        </button>


    </form>



    <!-- SECURITY -->

    <div class="security">

        <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2">

            <rect
                x="5"
                y="10"
                width="14"
                height="11"
                rx="2"/>

            <path
                d="M8 10V7a4 4 0 0 1 8 0v3"/>

        </svg>

        Secure encrypted customer gateway

    </div>


</div>

</section>

</main>



<!-- =========================================================
     OTP MODAL
========================================================= -->

<div
    class="modal"
    id="otpModal">


    <div class="otp-box">


        <button
            class="close-modal"
            onclick="closeOTP()">

            ×

        </button>


        <div class="otp-icon">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.8">

                <rect
                    x="5"
                    y="3"
                    width="14"
                    height="18"
                    rx="2"/>

                <path d="M8 8h8"/>
                <path d="M8 12h8"/>
                <path d="M8 16h4"/>

            </svg>

        </div>


        <h3>
            Verify your OTP
        </h3>


        <p id="otpDescription">

            Enter the 6-digit verification code
            sent to your registered mobile number.

        </p>


        <div class="otp-inputs">

            <input
                maxlength="1"
                inputmode="numeric">

            <input
                maxlength="1"
                inputmode="numeric">

            <input
                maxlength="1"
                inputmode="numeric">

            <input
                maxlength="1"
                inputmode="numeric">

            <input
                maxlength="1"
                inputmode="numeric">

            <input
                maxlength="1"
                inputmode="numeric">

        </div>


        <button
            class="verify"
            onclick="verifyOTP()">

            VERIFY & CONTINUE

        </button>


        <button
            class="resend"
            onclick="resendOTP()">

            Resend OTP

        </button>

    </div>

</div>



<!-- =========================================================
     RECOVERY MODAL
========================================================= -->

<div
    class="modal"
    id="recoveryModal">


    <div class="otp-box">


        <button
            class="close-modal"
            onclick="closeRecovery()">

            ×

        </button>


        <div class="otp-icon">

            <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.8">

                <rect
                    x="4"
                    y="5"
                    width="16"
                    height="14"
                    rx="2"/>

                <path d="M4 7l8 6 8-6"/>

            </svg>

        </div>


        <h3>
            Recover account
        </h3>


        <p>

            Enter your registered mobile number,
            email or customer ID.

        </p>


        <div class="field">

            <div class="input-wrap">

                <input
                    id="recoveryInput"
                    style="padding-left:14px"
                    type="text"
                    placeholder="Customer ID / Mobile / Email">

            </div>

        </div>


        <button
            class="verify"
            onclick="sendRecovery()">

            SEND RECOVERY OTP

        </button>

    </div>

</div>



<!-- =========================================================
     TOAST
========================================================= -->

<div
    class="toast"
    id="toast">
</div>



<script>

/* =========================================================
   AUTH SWITCH
========================================================= */

function switchAuth(type){

    const switchBox =
        document.getElementById("authSwitch");

    const loginForm =
        document.getElementById("loginForm");

    const signupForm =
        document.getElementById("signupForm");

    const loginTab =
        document.getElementById("loginTab");

    const signupTab =
        document.getElementById("signupTab");

    const title =
        document.getElementById("authTitle");

    const subtitle =
        document.getElementById("authSubtitle");


    if(type === "signup"){

        switchBox.classList.add("signup");

        loginForm.classList.remove("active");

        signupForm.classList.add("active");

        loginTab.classList.remove("active");

        signupTab.classList.add("active");

        title.textContent =
            "Create your account";

        subtitle.textContent =
            "Join the RudraFiber network";

    }else{

        switchBox.classList.remove("signup");

        signupForm.classList.remove("active");

        loginForm.classList.add("active");

        signupTab.classList.remove("active");

        loginTab.classList.add("active");

        title.textContent =
            "Welcome back";

        subtitle.textContent =
            "Connect to your customer account";
    }

}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

function togglePassword(id,button){

    const input =
        document.getElementById(id);

    if(input.type === "password"){

        input.type = "text";

        button.style.color =
            "#159FE8";

    }else{

        input.type = "password";

        button.style.color =
            "#8CA3B1";
    }

}


/* =========================================================
   LOGIN
========================================================= */

function login(event){

    event.preventDefault();

    const button =
        event.target.querySelector(".primary");

    const original =
        button.textContent;

    button.disabled = true;

    button.textContent =
        "CONNECTING...";


    setTimeout(()=>{

        button.disabled = false;

        button.textContent =
            "✓ LOGIN REQUEST READY";

        showToast(
            "Demo login completed"
        );


        setTimeout(()=>{

            button.textContent =
                original;

        },1800);

    },1000);

}


/* =========================================================
   SIGNUP
========================================================= */

function signup(event){

    event.preventDefault();

    const button =
        event.target.querySelector(".primary");

    const original =
        button.textContent;

    button.disabled = true;

    button.textContent =
        "CREATING ACCOUNT...";


    setTimeout(()=>{

        button.disabled = false;

        button.textContent =
            "✓ ACCOUNT READY";

        showToast(
            "Demo signup completed"
        );


        setTimeout(()=>{

            button.textContent =
                original;

        },1800);

    },1000);

}


/* =========================================================
   OTP OPEN
========================================================= */

function openOTP(type){

    const modal =
        document.getElementById("otpModal");

    const description =
        document.getElementById(
            "otpDescription"
        );


    description.textContent =
        type === "signup"

        ? "Enter the 6-digit code sent to verify your mobile number."

        : "Enter the 6-digit verification code sent to your registered mobile number.";


    modal.classList.add("show");


    const first =
        document.querySelector(
            ".otp-inputs input"
        );

    setTimeout(()=>{
        first.focus();
    },150);

}


/* =========================================================
   OTP CLOSE
========================================================= */

function closeOTP(){

    document
        .getElementById("otpModal")
        .classList.remove("show");

}


/* =========================================================
   OTP INPUT AUTO MOVE
========================================================= */

document
.querySelectorAll(".otp-inputs input")
.forEach((input,index,inputs)=>{

    input.addEventListener(
        "input",
        function(){

            this.value =
                this.value.replace(
                    /[^0-9]/g,
                    ""
                );

            if(
                this.value &&
                index < inputs.length - 1
            ){

                inputs[index + 1].focus();

            }

        }
    );


    input.addEventListener(
        "keydown",
        function(event){

            if(
                event.key === "Backspace" &&
                !this.value &&
                index > 0
            ){

                inputs[index - 1].focus();

            }

        }
    );

});


/* =========================================================
   VERIFY OTP
========================================================= */

function verifyOTP(){

    const inputs =
        document.querySelectorAll(
            ".otp-inputs input"
        );

    let otp = "";

    inputs.forEach(input=>{
        otp += input.value;
    });


    if(otp.length !== 6){

        showToast(
            "Please enter all 6 digits"
        );

        return;
    }


    closeOTP();

    showToast(
        "OTP verified successfully"
    );

}


/* =========================================================
   RESEND OTP
========================================================= */

function resendOTP(){

    showToast(
        "A new OTP has been requested"
    );

}


/* =========================================================
   RECOVERY
========================================================= */

function openRecovery(){

    document
        .getElementById("recoveryModal")
        .classList.add("show");

}


function closeRecovery(){

    document
        .getElementById("recoveryModal")
        .classList.remove("show");

}


function sendRecovery(){

    const value =
        document
        .getElementById("recoveryInput")
        .value
        .trim();


    if(!value){

        showToast(
            "Enter your customer ID, mobile or email"
        );

        return;
    }


    closeRecovery();

    showToast(
        "Recovery OTP request sent"
    );

}


/* =========================================================
   TOAST
========================================================= */

let toastTimer;

function showToast(message){

    const toast =
        document.getElementById("toast");

    toast.textContent =
        message;

    toast.classList.add("show");

    clearTimeout(toastTimer);

    toastTimer =
        setTimeout(()=>{

            toast.classList.remove("show");

        },2800);

}


/* =========================================================
   CLOSE MODALS OUTSIDE
========================================================= */

document
.getElementById("otpModal")
.addEventListener(
    "click",
    function(event){

        if(event.target === this){
            closeOTP();
        }

    }
);


document
.getElementById("recoveryModal")
.addEventListener(
    "click",
    function(event){

        if(event.target === this){
            closeRecovery();
        }

    }
);


/* =========================================================
   ESCAPE
========================================================= */

document.addEventListener(
    "keydown",
    function(event){

        if(event.key === "Escape"){

            closeOTP();

            closeRecovery();

        }

    }
);


/* =========================================================
   NETWORK PARALLAX
========================================================= */

document.addEventListener(
    "mousemove",
    function(event){

        if(window.innerWidth < 1000)
            return;


        const x =
            (event.clientX /
            window.innerWidth - .5);

        const y =
            (event.clientY /
            window.innerHeight - .5);


        const visual =
            document.querySelector(
                ".fiber-visual"
            );


        visual.style.marginLeft =
            `${x * 10}px`;

        visual.style.marginTop =
            `${y * 10}px`;

    }
);

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Rudra Fiber — Customer Gateway</title>

<style>

/* =========================================================
   ROOT
========================================================= */

:root{
    --blue:#159FE8;
    --blue-dark:#087FC5;
    --blue-soft:#EAF8FF;

--green:#38CF91;
    --green-dark:#1DAE72;
    --green-soft:#ECFFF6;

--white:#FFFFFF;
    --bg:#F5FBFD;

--text:#14354B;
    --muted:#71899A;
    --border:#DCECF3;

--shadow:0 25px 70px rgba(20,87,116,.11);
}

/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

color:var(--text);

background:
        radial-gradient(
            circle at 8% 15%,
            rgba(21,159,232,.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(56,207,145,.10),
            transparent 25%
        ),
        var(--bg);

overflow-x:hidden;
}

/* =========================================================
   BACKGROUND NETWORK
========================================================= */

.background{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
}

.bg-grid{
    position:absolute;
    inset:0;

background-image:
        linear-gradient(
            rgba(30,150,190,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(30,150,190,.025) 1px,
            transparent 1px
        );

background-size:55px 55px;

mask-image:
        radial-gradient(
            ellipse at center,
            black,
            transparent 78%
        );
}

.bg-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(2px);
}

.bg-orb.one{
    width:430px;
    height:430px;
    left:-210px;
    top:30%;
    background:rgba(21,159,232,.055);
}

.bg-orb.two{
    width:500px;
    height:500px;
    right:-250px;
    bottom:-180px;
    background:rgba(56,207,145,.06);
}

/* =========================================================
   HEADER
========================================================= */

header{
    position:relative;
    z-index:20;

width:min(1250px,calc(100% - 40px));
    height:78px;

margin:auto;

display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:11px;
}

.logo-box{
    width:42px;
    height:42px;

display:grid;
    place-items:center;

border-radius:14px;

background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

box-shadow:
        0 10px 25px rgba(21,159,232,.18);
}

.logo-box svg{
    width:24px;
    color:white;
}

.logo-name{
    font-size:20px;
    font-weight:900;
    letter-spacing:-.7px;
}

.logo-name span{
    color:var(--blue);
}

.header-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.header-pill{
    display:flex;
    align-items:center;
    gap:8px;

padding:9px 13px;

border-radius:30px;

background:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.95);

box-shadow:
        0 7px 25px rgba(25,90,120,.05);

font-size:10px;
    font-weight:800;
    color:#6E8797;
}

.live-dot{
    width:7px;
    height:7px;
    border-radius:50%;

background:var(--green);

box-shadow:
        0 0 0 5px rgba(56,207,145,.12);
}

/* =========================================================
   MAIN
========================================================= */

.main{
    position:relative;
    z-index:5;

width:min(1250px,calc(100% - 40px));

min-height:
        calc(100vh - 78px);

margin:auto;

display:grid;

grid-template-columns:
        1fr
        430px;

align-items:center;

gap:70px;

padding:
        25px 0
        65px;
}

/* =========================================================
   LEFT NETWORK SECTION
========================================================= */

.network-section{
    position:relative;
    min-height:600px;

display:flex;
    align-items:center;
}

/* text */

.hero{
    position:relative;
    z-index:4;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

padding:8px 13px;

margin-bottom:21px;

border-radius:30px;

background:white;

border:1px solid var(--border);

color:var(--blue-dark);

font-size:10px;
    font-weight:900;
    letter-spacing:.7px;

box-shadow:
        0 8px 24px rgba(30,90,120,.05);
}

.hero-badge i{
    width:7px;
    height:7px;

border-radius:50%;

background:var(--green);
}

.hero h1{
    max-width:650px;

font-size:
        clamp(44px,5vw,72px);

line-height:.98;

letter-spacing:-4px;

margin-bottom:23px;
}

.hero h1 .blue{
    color:var(--blue);
}

.hero h1 .green{
    color:var(--green-dark);
}

.hero-text{
    max-width:535px;

font-size:15px;

color:var(--muted);

line-height:1.8;
}

/* =========================================================
   FIBER VISUAL
========================================================= */

.fiber-visual{
    position:absolute;

width:560px;
    height:560px;

right:-30px;
    top:50%;

transform:
        translateY(-50%);

pointer-events:none;
}

/* outer circles */

.fiber-circle{
    position:absolute;

left:50%;
    top:50%;

transform:
        translate(-50%,-50%);

border-radius:50%;

border:1px solid rgba(21,159,232,.13);
}

.fiber-circle.c1{
    width:530px;
    height:530px;

animation:
        spin 35s linear infinite;
}

.fiber-circle.c2{
    width:430px;
    height:430px;

border-color:
        rgba(56,207,145,.15);

animation:
        spinReverse 25s linear infinite;
}

.fiber-circle.c3{
    width:320px;
    height:320px;

border:
        1px dashed rgba(21,159,232,.17);

animation:
        spin 18s linear infinite;
}

@keyframes spin{
    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}

@keyframes spinReverse{
    to{
        transform:
            translate(-50%,-50%)
            rotate(-360deg);
    }
}

/* =========================================================
   FIBER ROUTES
========================================================= */

.route{
    position:absolute;

left:50%;
    top:50%;

height:2px;

width:275px;

transform-origin:left center;

background:
        linear-gradient(
            90deg,
            transparent,
            rgba(21,159,232,.38),
            rgba(56,207,145,.15)
        );
}

.route::after{
    content:"";

position:absolute;

width:6px;
    height:6px;

border-radius:50%;

top:-2px;

background:var(--green);

box-shadow:
        0 0 15px var(--green);

animation:
        packet 3.5s linear infinite;
}

@keyframes packet{

0%{
        left:0;
        opacity:0;
    }

12%{
        opacity:1;
    }

85%{
        opacity:1;
    }

100%{
        left:100%;
        opacity:0;
    }
}

.route.r1{
    transform:rotate(-35deg);
}

.route.r2{
    transform:rotate(35deg);
}

.route.r3{
    transform:rotate(145deg);
}

.route.r4{
    transform:rotate(215deg);
}

.route.r2::after{
    animation-delay:.8s;
}

.route.r3::after{
    animation-delay:1.6s;
}

.route.r4::after{
    animation-delay:2.2s;
}

/* =========================================================
   CENTER ROUTER
========================================================= */

.router{
    position:absolute;

left:50%;
    top:50%;

transform:
        translate(-50%,-50%);

width:145px;
    height:115px;

border-radius:28px;

background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F0FAFE
        );

border:1px solid #DCEFF5;

box-shadow:
        0 30px 65px rgba(25,90,120,.15);

display:flex;
    flex-direction:column;

align-items:center;
    justify-content:center;

animation:
        routerFloat 4s ease-in-out infinite;
}

@keyframes routerFloat{

0%,100%{
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

50%{
        transform:
            translate(-50%,-50%)
            translateY(-8px);
    }
}

.router-top{
    display:flex;
    gap:7px;

margin-bottom:14px;
}

.router-led{
    width:7px;
    height:7px;

border-radius:50%;

background:#CFE0E8;
}

.router-led.active{
    background:var(--green);

box-shadow:
        0 0 12px rgba(56,207,145,.7);
}

.router-body{
    width:85px;
    height:33px;

border-radius:10px;

background:
        linear-gradient(
            100deg,
            #E9F8FF,
            #EFFFF8
        );

display:flex;
    justify-content:center;
    align-items:center;
}

.router-body svg{
    width:30px;
    color:var(--blue);
}

/* =========================================================
   NETWORK NODES
========================================================= */

.device{
    position:absolute;

width:48px;
    height:48px;

display:grid;
    place-items:center;

border-radius:15px;

background:
        rgba(255,255,255,.90);

border:
        1px solid rgba(255,255,255,.95);

box-shadow:
        0 13px 30px rgba(25,90,120,.10);

animation:
        deviceFloat 4s ease-in-out infinite;
}

.device svg{
    width:21px;
}

.device.d1{
    left:12px;
    top:42%;
}

.device.d2{
    left:105px;
    top:5%;
    animation-delay:.6s;
}

.device.d3{
    right:25px;
    top:23%;
    animation-delay:1s;
}

.device.d4{
    right:5px;
    bottom:27%;
    animation-delay:1.5s;
}

.device.d5{
    left:95px;
    bottom:6%;
    animation-delay:2s;
}

@keyframes deviceFloat{

0%,100%{
        transform:translateY(0);
    }

50%{
        transform:translateY(-7px);
    }
}

/* =========================================================
   NETWORK INFO
========================================================= */

.network-stats{
    position:absolute;

left:10px;
    bottom:30px;

display:flex;
    gap:10px;
}

.stat{
    padding:11px 14px;

border-radius:14px;

background:
        rgba(255,255,255,.78);

border:1px solid rgba(255,255,255,.95);

box-shadow:
        0 10px 28px rgba(25,90,120,.06);
}

.stat strong{
    display:block;

color:var(--text);

font-size:13px;
}

.stat span{
    color:#8298A6;

font-size:9px;
}

/* =========================================================
   AUTH
========================================================= */

.auth-area{
    position:relative;
    z-index:10;
}

.auth-card{
    position:relative;

width:100%;

padding:31px;

border-radius:31px;

background:
        rgba(255,255,255,.90);

border:
        1px solid rgba(255,255,255,.98);

backdrop-filter:
        blur(22px);

box-shadow:
        var(--shadow);

overflow:hidden;
}

.auth-card::before{
    content:"";

position:absolute;

left:30px;
    right:30px;
    top:0;

height:2px;

border-radius:10px;

background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            var(--green),
            transparent
        );
}

.auth-card::after{
    content:"";

position:absolute;

width:150px;
    height:150px;

border-radius:50%;

right:-80px;
    top:-80px;

background:
        rgba(56,207,145,.08);
}

/* =========================================================
   AUTH HEADER
========================================================= */

.auth-header{
    position:relative;
    z-index:2;

text-align:center;

margin-bottom:22px;
}

.auth-symbol{
    width:48px;
    height:48px;

margin:
        0 auto
        13px;

display:grid;
    place-items:center;

border-radius:16px;

background:
        linear-gradient(
            135deg,
            var(--blue-soft),
            var(--green-soft)
        );
}

.auth-symbol svg{
    width:25px;
    color:var(--blue);
}

.auth-header h2{
    font-size:25px;

letter-spacing:-1px;

margin-bottom:5px;
}

.auth-header p{
    color:var(--muted);

font-size:11px;
}

/* =========================================================
   AUTH SWITCH
========================================================= */

.auth-switch{
    position:relative;

display:grid;
    grid-template-columns:1fr 1fr;

padding:4px;

background:#EEF7FA;

border-radius:13px;

margin-bottom:22px;
}

.switch-slider{
    position:absolute;

left:4px;
    top:4px;

width:
        calc(50% - 4px);

height:
        calc(100% - 8px);

border-radius:10px;

background:white;

box-shadow:
        0 4px 13px rgba(20,80,110,.08);

transition:
        .4s cubic-bezier(.2,.8,.2,1);
}

.auth-switch.signup
.switch-slider{
    left:50%;
}

.auth-switch button{
    position:relative;
    z-index:2;

border:0;

background:transparent;

padding:10px;

cursor:pointer;

color:#7D94A3;

font-size:11px;

font-weight:900;
}

.auth-switch button.active{
    color:var(--blue-dark);
}

/* =========================================================
   FORM
========================================================= */

.form{
    display:none;
}

.form.active{
    display:block;

animation:
        formIn .4s ease;
}

@keyframes formIn{
    from{
        opacity:0;
        transform:
            translateY(10px);
    }

to{
        opacity:1;
        transform:none;
    }
}

.field{
    margin-bottom:15px;
}

.field label{
    display:block;

margin-bottom:7px;

color:#587486;

font-size:9px;

font-weight:900;

text-transform:uppercase;

letter-spacing:.7px;
}

.input-wrap{
    position:relative;
}

.input-icon{
    position:absolute;

left:14px;
    top:50%;

transform:
        translateY(-50%);

width:17px;

color:#8DA5B4;
}

.input-wrap input{
    width:100%;
    height:47px;

border:
        1px solid var(--border);

border-radius:12px;

outline:none;

background:#FBFDFE;

color:var(--text);

font-size:12px;

padding:
        0 43px;

transition:.25s;
}

.input-wrap input:focus{
    background:white;

border-color:#6DC6EC;

box-shadow:
        0 0 0 4px
        rgba(21,159,232,.07);
}

.password-eye{
    position:absolute;

right:12px;
    top:50%;

transform:
        translateY(-50%);

border:0;
    background:none;

color:#8CA3B1;

cursor:pointer;
}

.password-eye svg{
    width:17px;
}

/* =========================================================
   LOGIN OPTIONS
========================================================= */

.form-options{
    display:flex;
    align-items:center;
    justify-content:space-between;

margin:
        0 0
        17px;
}

.remember{
    display:flex;
    align-items:center;
    gap:6px;

color:#8195A1;

font-size:9px;
}

.remember input{
    accent-color:var(--green);
}

.forgot{
    border:0;
    background:none;

cursor:pointer;

color:var(--blue-dark);

font-size:9px;
    font-weight:800;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.primary{
    width:100%;
    height:49px;

border:0;
    border-radius:13px;

cursor:pointer;

color:white;

font-size:11px;

font-weight:900;

letter-spacing:.3px;

background:
        linear-gradient(
            100deg,
            var(--blue),
            var(--green)
        );

box-shadow:
        0 13px 28px
        rgba(21,159,232,.18);

transition:.3s;

overflow:hidden;

position:relative;
}

.primary::before{
    content:"";

position:absolute;

left:-100%;
    top:0;

width:65%;
    height:100%;

transform:
        skewX(-20deg);

background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

transition:.7s;
}

.primary:hover::before{
    left:140%;
}

.primary:hover{
    transform:
        translateY(-2px);

box-shadow:
        0 18px 35px
        rgba(21,159,232,.24);
}

/* =========================================================
   DIVIDER
========================================================= */

.divider{
    display:flex;
    align-items:center;
    gap:10px;

margin:19px 0;

color:#A1B1BB;

font-size:8px;
}

.divider::before,
.divider::after{
    content:"";

height:1px;

flex:1;

background:#E2EDF2;
}

/* =========================================================
   OTP BUTTON
========================================================= */

.otp-button{
    width:100%;
    height:43px;

border:
        1px solid var(--border);

background:white;

border-radius:12px;

cursor:pointer;

display:flex;
    align-items:center;
    justify-content:center;

gap:8px;

color:#5F7889;

font-size:10px;
    font-weight:900;

transition:.25s;
}

.otp-button:hover{
    color:var(--blue-dark);

border-color:#8BD1EC;
}

.otp-button svg{
    width:16px;
}

/* =========================================================
   SIGNUP
========================================================= */

.two-columns{
    display:grid;

grid-template-columns:
        1fr
        1fr;

gap:10px;
}

.terms{
    color:#879AA7;

font-size:8px;

line-height:1.65;

margin:
        -1px 0
        16px;
}

.terms a{
    color:var(--blue-dark);

text-decoration:none;

font-weight:800;
}

/* =========================================================
   SECURITY
========================================================= */

.security{
    display:flex;

align-items:center;
    justify-content:center;

gap:6px;

margin-top:17px;

color:#9AACB6;

font-size:8px;
}

.security svg{
    width:12px;

color:var(--green);
}

/* =========================================================
   OTP MODAL
========================================================= */

.modal{
    position:fixed;

inset:0;

z-index:100;

display:none;

align-items:center;
    justify-content:center;

background:
        rgba(10,44,62,.17);

backdrop-filter:
        blur(8px);
}

.modal.show{
    display:flex;
}

.otp-box{
    position:relative;

width:370px;
    max-width:
        calc(100% - 30px);

padding:29px;

border-radius:27px;

background:
        rgba(255,255,255,.97);

border:
        1px solid white;

box-shadow:
        0 35px 90px
        rgba(10,60,85,.20);

animation:
        modalIn .35s ease;
}

@keyframes modalIn{
    from{
        opacity:0;
        transform:
            scale(.9)
            translateY(20px);
    }

to{
        opacity:1;
        transform:none;
    }
}

.close-modal{
    position:absolute;

right:16px;
    top:16px;

width:30px;
    height:30px;

border:0;

border-radius:50%;

background:#F0F7FA;

color:#75909F;

cursor:pointer;
}

.otp-icon{
    width:52px;
    height:52px;

display:grid;
    place-items:center;

margin:0 auto 15px;

border-radius:17px;

background:
        linear-gradient(
            135deg,
            var(--blue-soft),
            var(--green-soft)
        );
}

.otp-icon svg{
    width:27px;
    color:var(--blue);
}

.otp-box h3{
    text-align:center;

font-size:23px;

margin-bottom:6px;
}

.otp-box > p{
    text-align:center;

color:var(--muted);

font-size:10px;

line-height:1.6;

margin-bottom:20px;
}

.otp-inputs{
    display:flex;

justify-content:center;

gap:7px;

margin-bottom:17px;
}

.otp-inputs input{
    width:40px;
    height:47px;

text-align:center;

font-size:19px;
    font-weight:800;

border:
        1px solid var(--border);

border-radius:10px;

outline:none;
}

.otp-inputs input:focus{
    border-color:
        var(--blue);

box-shadow:
        0 0 0 3px
        rgba(21,159,232,.07);
}

.verify{
    width:100%;
    height:45px;

border:0;

border-radius:12px;

background:
        linear-gradient(
            100deg,
            var(--blue),
            var(--green)
        );

color:white;

font-size:10px;
    font-weight:900;

cursor:pointer;
}

.resend{
    display:block;

margin:15px auto 0;

border:0;
    background:none;

color:var(--blue-dark);

font-size:9px;

font-weight:800;

cursor:pointer;
}

/* =========================================================
   TOAST
========================================================= */

.toast{
    position:fixed;

right:20px;
    bottom:20px;

z-index:200;

padding:
        12px 16px;

border-radius:12px;

background:
        rgba(12,45,62,.94);

color:white;

font-size:10px;

box-shadow:
        0 15px 40px
        rgba(0,0,0,.15);

transform:
        translateY(80px);

opacity:0;

transition:.35s;
}

.toast.show{
    transform:none;
    opacity:1;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

body{
        overflow:auto;
    }

.main{
        grid-template-columns:1fr;

padding:
            25px 0
            50px;
    }

.network-section{
        min-height:520px;
    }

.hero{
        text-align:center;
    }

.hero-badge{
        margin-left:auto;
        margin-right:auto;
    }

.hero h1,
    .hero-text{
        margin-left:auto;
        margin-right:auto;
    }

.fiber-visual{
        opacity:.45;

right:50%;

transform:
            translate(50%,-50%);
    }

.network-stats{
        left:50%;

transform:
            translateX(-50%);
    }

.auth-area{
        width:430px;
        max-width:100%;

margin:
            0 auto;
    }
}

@media(max-width:600px){

header{
        width:
            calc(100% - 28px);

height:68px;
    }

.header-pill{
        display:none;
    }

.main{
        width:
            calc(100% - 28px);
    }

.network-section{
        min-height:430px;
    }

.hero h1{
        font-size:43px;

letter-spacing:-2.5px;
    }

.hero-text{
        font-size:13px;
    }

.fiber-visual{
        width:430px;
        height:430px;
    }

.fiber-circle.c1{
        width:400px;
        height:400px;
    }

.fiber-circle.c2{
        width:325px;
        height:325px;
    }

.fiber-circle.c3{
        width:240px;
        height:240px;
    }

.device{
        transform:scale(.75);
    }

.router{
        transform:
            translate(-50%,-50%)
            scale(.8);
    }

.network-stats{
        bottom:5px;
    }

.stat{
        padding:9px 11px;
    }

.stat strong{
        font-size:11px;
    }

.stat span{
        font-size:7px;
    }

.auth-card{
        padding:25px 18px;

border-radius:25px;
    }

.two-columns{
        grid-template-columns:1fr;
        gap:0;
    }
}

@media(max-width:380px){

.hero h1{
        font-size:36px;
    }

.fiber-visual{
        width:360px;
        height:360px;
    }

.fiber-circle.c1{
        width:330px;
        height:330px;
    }

.fiber-circle.c2{
        width:270px;
        height:270px;
    }

.fiber-circle.c3{
        width:200px;
        height:200px;
    }

.network-stats{
        display:none;
    }

.otp-inputs{
        gap:5px;
    }

.otp-inputs input{
        width:35px;
        height:43px;
    }
}

</style>
</head>

<body>

</div>

</svg>

</div>

<div class="logo-name">
            Rudra<span>Fiber</span>
        </div>

</div>

Network Online

</div>

24/7 Support

</div>

</header>

<i></i>

NEXT GENERATION FIBER NETWORK

</div>

<h1>

Stay connected.
            <span class="blue">
                Stay ahead.
            </span>
            <span class="green">
                Always.
            </span>

</h1>

Your connection starts here.
            Manage your broadband account,
            view your current plan, pay bills,
            upgrade your speed and keep your
            entire home connected.

</p>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</div>

</svg>

</div>

<span>MAX SPEED</span>

</div>

<span>UPTIME</span>

</div>

<span>SUPPORT</span>

</div>

</section>

</svg>

</div>

<h2 id="authTitle">
            Welcome back
        </h2>

<p id="authSubtitle">
            Connect to your customer account
        </p>

</div>

</button>

</button>

</div>

<label>
                Customer ID / Mobile / Email
            </label>

</svg>

</div>

<label>
                Password
            </label>

</svg>

</svg>

</button>

</div>

Remember me

</label>

Forgot password?

</button>

</div>

</button>

</svg>

</button>

</form>

<label>
                    First name
                </label>

</div>

</div>

<label>
                Mobile number
            </label>

</svg>

</div>

<label>
                Email address
            </label>

</svg>

</div>

<label>
                Create password
            </label>

</svg>

</svg>

</button>

</div>

By creating an account you agree to the
            <a href="#">Terms of Service</a>,
            <a href="#">Privacy Policy</a>
            and broadband service conditions.

</div>

CREATE MY ACCOUNT

</button>

</form>

</svg>

Secure encrypted customer gateway

</div>

</section>

</main>

</button>

</svg>

</div>

<h3>
            Verify your OTP
        </h3>

Enter the 6-digit verification code
            sent to your registered mobile number.

</p>

</div>

VERIFY & CONTINUE

</button>

Resend OTP

</button>

</div>

</button>

</svg>

</div>

<h3>
            Recover account
        </h3>

<p>

Enter your registered mobile number,
            email or customer ID.

</p>

</div>

SEND RECOVERY OTP

</button>

</div>

/* =========================================================
   AUTH SWITCH
========================================================= */

function switchAuth(type){

const switchBox =
        document.getElementById("authSwitch");

const loginForm =
        document.getElementById("loginForm");

const signupForm =
        document.getElementById("signupForm");

const loginTab =
        document.getElementById("loginTab");

const signupTab =
        document.getElementById("signupTab");

const title =
        document.getElementById("authTitle");

const subtitle =
        document.getElementById("authSubtitle");

if(type === "signup"){

switchBox.classList.add("signup");

loginForm.classList.remove("active");

signupForm.classList.add("active");

loginTab.classList.remove("active");

signupTab.classList.add("active");

title.textContent =
            "Create your account";

subtitle.textContent =
            "Join the RudraFiber network";

}else{

switchBox.classList.remove("signup");

signupForm.classList.remove("active");

loginForm.classList.add("active");

signupTab.classList.remove("active");

loginTab.classList.add("active");

title.textContent =
            "Welcome back";

subtitle.textContent =
            "Connect to your customer account";
    }

}

/* =========================================================
   PASSWORD TOGGLE
========================================================= */

function togglePassword(id,button){

const input =
        document.getElementById(id);

if(input.type === "password"){

input.type = "text";

button.style.color =
            "#159FE8";

}else{

input.type = "password";

button.style.color =
            "#8CA3B1";
    }

}

/* =========================================================
   LOGIN
========================================================= */

function login(event){

event.preventDefault();

const button =
        event.target.querySelector(".primary");

const original =
        button.textContent;

button.disabled = true;

button.textContent =
        "CONNECTING...";

setTimeout(()=>{

button.disabled = false;

button.textContent =
            "✓ LOGIN REQUEST READY";

showToast(
            "Demo login completed"
        );

setTimeout(()=>{

button.textContent =
                original;

},1800);

},1000);

}

/* =========================================================
   SIGNUP
========================================================= */

function signup(event){

event.preventDefault();

const button =
        event.target.querySelector(".primary");

const original =
        button.textContent;

button.disabled = true;

button.textContent =
        "CREATING ACCOUNT...";

setTimeout(()=>{

button.disabled = false;

button.textContent =
            "✓ ACCOUNT READY";

showToast(
            "Demo signup completed"
        );

setTimeout(()=>{

button.textContent =
                original;

},1800);

},1000);

}

/* =========================================================
   OTP OPEN
========================================================= */

function openOTP(type){

const modal =
        document.getElementById("otpModal");

const description =
        document.getElementById(
            "otpDescription"
        );

description.textContent =
        type === "signup"

? "Enter the 6-digit code sent to verify your mobile number."

: "Enter the 6-digit verification code sent to your registered mobile number.";

modal.classList.add("show");

const first =
        document.querySelector(
            ".otp-inputs input"
        );

setTimeout(()=>{
        first.focus();
    },150);

}

/* =========================================================
   OTP CLOSE
========================================================= */

function closeOTP(){

document
        .getElementById("otpModal")
        .classList.remove("show");

}

/* =========================================================
   OTP INPUT AUTO MOVE
========================================================= */

document
.querySelectorAll(".otp-inputs input")
.forEach((input,index,inputs)=>{

input.addEventListener(
        "input",
        function(){

this.value =
                this.value.replace(
                    /[^0-9]/g,
                    ""
                );

if(
                this.value &&
                index < inputs.length - 1
            ){

inputs[index + 1].focus();

}

}
    );

input.addEventListener(
        "keydown",
        function(event){

if(
                event.key === "Backspace" &&
                !this.value &&
                index > 0
            ){

inputs[index - 1].focus();

}

}
    );

});

/* =========================================================
   VERIFY OTP
========================================================= */

function verifyOTP(){

const inputs =
        document.querySelectorAll(
            ".otp-inputs input"
        );

let otp = "";

inputs.forEach(input=>{
        otp += input.value;
    });

if(otp.length !== 6){

showToast(
            "Please enter all 6 digits"
        );

return;
    }

closeOTP();

showToast(
        "OTP verified successfully"
    );

}

/* =========================================================
   RESEND OTP
========================================================= */

function resendOTP(){

showToast(
        "A new OTP has been requested"
    );

}

/* =========================================================
   RECOVERY
========================================================= */

function openRecovery(){

document
        .getElementById("recoveryModal")
        .classList.add("show");

}

function closeRecovery(){

document
        .getElementById("recoveryModal")
        .classList.remove("show");

}

function sendRecovery(){

const value =
        document
        .getElementById("recoveryInput")
        .value
        .trim();

if(!value){

showToast(
            "Enter your customer ID, mobile or email"
        );

return;
    }

closeRecovery();

showToast(
        "Recovery OTP request sent"
    );

}

/* =========================================================
   TOAST
========================================================= */

let toastTimer;

function showToast(message){

const toast =
        document.getElementById("toast");

toast.textContent =
        message;

toast.classList.add("show");

clearTimeout(toastTimer);

toastTimer =
        setTimeout(()=>{

toast.classList.remove("show");

},2800);

}

/* =========================================================
   CLOSE MODALS OUTSIDE
========================================================= */

document
.getElementById("otpModal")
.addEventListener(
    "click",
    function(event){

if(event.target === this){
            closeOTP();
        }

}
);

document
.getElementById("recoveryModal")
.addEventListener(
    "click",
    function(event){

if(event.target === this){
            closeRecovery();
        }

}
);

/* =========================================================
   ESCAPE
========================================================= */

document.addEventListener(
    "keydown",
    function(event){

if(event.key === "Escape"){

closeOTP();

closeRecovery();

}

}
);

/* =========================================================
   NETWORK PARALLAX
========================================================= */

document.addEventListener(
    "mousemove",
    function(event){

if(window.innerWidth < 1000)
            return;

const x =
            (event.clientX /
            window.innerWidth - .5);

const y =
            (event.clientY /
            window.innerHeight - .5);

const visual =
            document.querySelector(
                ".fiber-visual"
            );

visual.style.marginLeft =
            `${x * 10}px`;

visual.style.marginTop =
            `${y * 10}px`;

}
);

</script>

</body>
</html>

Rate this design:

LOGIN6 by VEDANT SOMANI 09/07/2026

0.0 (0)

NetFiber — Customer Portal

NetFiber

Welcome back

Access your broadband account and manage your connection.

MOBILE NUMBER / EMAIL

✉

PASSWORD

●

Keep me logged in Forgot Password?

FULL NAME

●

MOBILE NUMBER

☎

EMAIL ADDRESS

✉

CREATE PASSWORD

●

YOUR CONNECTION

Fast internet.
Built around you.

Experience a reliable fiber connection with high speed, low latency and intelligent network monitoring.

⚡ Fiber Connected

✓ Network Protected

LIVE NETWORK

Your connection is ready.

Monitor your plan, connection status, usage and payments from one place.

1 Gbps Fiber

Network Online

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>NetFiber — Customer Portal</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --blue:#36b9ed;
    --blue-dark:#168dcc;
    --green:#43d39b;
    --green-dark:#20b87b;
    --dark:#07151c;
    --text:#123c50;
    --muted:#75909d;
}

body{
    min-height:100vh;
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden;
    color:white;

    background:
        radial-gradient(
            circle at 10% 15%,
            #69dfff 0,
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 15%,
            #8ce9bd 0,
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #43bdec,
            #56dba7 48%,
            #dff9f0
        );
}


/* =========================================================
   BACKGROUND NETWORK GRID
========================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size:45px 45px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    pointer-events:none;
}


/* =========================================================
   MAIN
========================================================= */

.page{
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:55px;
}


/* =========================================================
   MAIN GLASS CONTAINER
========================================================= */

.portal{
    position:relative;

    width:min(1280px,100%);
    min-height:760px;

    display:grid;
    grid-template-columns:52% 48%;

    overflow:hidden;

    border-radius:38px;

    background:
        linear-gradient(
            135deg,
            rgba(5,36,48,.63),
            rgba(11,62,68,.48)
        );

    border:
        1px solid rgba(255,255,255,.34);

    box-shadow:
        0 45px 100px rgba(8,72,91,.28),
        inset 0 1px 0 rgba(255,255,255,.35);

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
}


/* =========================================================
   LEFT SIDE
========================================================= */

.left{
    position:relative;

    padding:58px 75px 50px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    z-index:10;
}


/* =========================================================
   LOGO
========================================================= */

.logo{
    position:absolute;

    top:48px;
    left:72px;

    display:flex;
    align-items:center;
    gap:12px;
}

.logo-symbol{
    position:relative;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

    box-shadow:
        0 12px 30px rgba(45,199,190,.3);

    font-weight:800;
    font-size:17px;
}

.logo-symbol::before,
.logo-symbol::after{
    content:"";

    position:absolute;

    border-radius:20px;

    background:white;
}

.logo-symbol::before{
    width:5px;
    height:22px;

    transform:rotate(35deg);
}

.logo-symbol::after{
    width:5px;
    height:14px;

    transform:
        rotate(35deg)
        translate(10px,-6px);
}

.logo-text{
    font-size:19px;
    font-weight:800;
    letter-spacing:-.7px;
}

.logo-text span{
    color:#55e1ad;
}


/* =========================================================
   AUTH CONTENT
========================================================= */

.auth{
    width:100%;
    max-width:500px;
}

.welcome{
    margin-bottom:30px;
}

.welcome h1{
    font-size:45px;
    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:10px;
}

.welcome p{
    font-size:14px;
    color:rgba(255,255,255,.72);
}


/* =========================================================
   LOGIN SIGNUP TABS
========================================================= */

.tabs{
    display:flex;

    width:270px;

    padding:5px;

    margin-bottom:25px;

    border-radius:15px;

    background:rgba(0,0,0,.17);

    border:
        1px solid rgba(255,255,255,.1);
}

.tabs button{
    flex:1;

    height:40px;

    border:0;
    border-radius:11px;

    background:transparent;

    color:rgba(255,255,255,.58);

    font-size:11px;
    font-weight:800;

    cursor:pointer;

    transition:.3s;
}

.tabs button.active{
    color:#123b4c;

    background:white;

    box-shadow:
        0 8px 20px rgba(0,0,0,.12);
}


/* =========================================================
   FORMS
========================================================= */

.form{
    display:none;

    animation:
        formIn .4s ease;
}

.form.active{
    display:block;
}

@keyframes formIn{

    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.field{
    margin-bottom:17px;
}

.field label{
    display:block;

    margin-bottom:8px;

    color:rgba(255,255,255,.83);

    font-size:11px;
    font-weight:600;
}

.input{
    width:100%;
    height:59px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:0 18px;

    border-radius:30px;

    background:
        rgba(0,0,0,.60);

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        inset 0 5px 15px rgba(0,0,0,.22),
        0 4px 15px rgba(0,0,0,.06);

    transition:.3s;
}

.input:focus-within{
    border-color:
        rgba(82,220,239,.75);

    box-shadow:
        0 0 0 4px rgba(63,199,225,.1),
        inset 0 5px 15px rgba(0,0,0,.22);
}

.input-icon{
    color:#58dcae;
    font-size:17px;
}

.input input{
    width:100%;

    border:0;
    outline:0;

    background:transparent;

    color:white;

    font-size:12px;
}

.input input::placeholder{
    color:rgba(255,255,255,.5);
}


/* =========================================================
   FORGOT
========================================================= */

.form-options{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin:3px 4px 24px;

    font-size:10px;
}

.remember{
    display:flex;
    align-items:center;
    gap:7px;

    color:rgba(255,255,255,.7);
}

.remember input{
    accent-color:#42d49d;
}

.forgot{
    color:white;
    text-decoration:underline;

    cursor:pointer;
}


/* =========================================================
   MAIN BUTTON
========================================================= */

.sign-btn{
    position:relative;

    width:100%;
    height:59px;

    overflow:hidden;

    border:0;
    border-radius:30px;

    color:#072f3d;

    background:
        linear-gradient(
            100deg,
            #ffb09c,
            #ff8791
        );

    font-size:14px;
    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 15px 30px rgba(0,0,0,.14);

    transition:.3s;
}

.sign-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.2);
}

.sign-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-120px;

    width:90px;
    height:100%;

    background:
        rgba(255,255,255,.4);

    transform:skewX(-20deg);

    animation:
        shine 3s infinite;
}

@keyframes shine{

    0%,35%{
        left:-120px;
    }

    75%,100%{
        left:120%;
    }
}


/* =========================================================
   QUICK LOGIN
========================================================= */

.quick{
    display:flex;
    justify-content:center;
    gap:13px;

    margin-top:25px;
}

.quick button{
    width:47px;
    height:47px;

    border:0;
    border-radius:50%;

    background:white;

    color:#123c50;

    font-size:16px;
    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 8px 20px rgba(0,0,0,.13);

    transition:.3s;
}

.quick button:hover{
    transform:
        translateY(-4px)
        scale(1.04);
}


/* =========================================================
   OTP LINK
========================================================= */

.otp{
    display:block;

    margin-top:17px;

    text-align:center;

    color:#aef3db;

    font-size:10px;
    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.right{
    position:relative;

    min-height:760px;

    padding:55px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(3,12,16,.98),
            rgba(5,24,32,.91)
        );

    border-radius:0 38px 38px 0;
}


/* =========================================================
   RIGHT HEADER
========================================================= */

.network-heading{
    position:relative;

    z-index:20;
}

.network-heading .small{
    color:#55ddb0;

    font-size:10px;
    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:16px;
}

.network-heading h2{
    max-width:430px;

    font-size:42px;
    line-height:1.1;

    letter-spacing:-2px;
}

.network-heading p{
    max-width:390px;

    margin-top:16px;

    color:rgba(255,255,255,.57);

    font-size:12px;
    line-height:1.7;
}


/* =========================================================
   3D NETWORK CORE
========================================================= */

.network-scene{
    position:absolute;

    left:50%;
    top:53%;

    width:450px;
    height:450px;

    transform:
        translate(-50%,-50%);

    perspective:900px;
}

.core{
    position:absolute;

    left:50%;
    top:50%;

    width:105px;
    height:105px;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0,
            #72e9ff 13%,
            #31b9eb 36%,
            #1a65aa 68%,
            #0b2747 100%
        );

    box-shadow:
        0 0 35px rgba(55,211,245,.9),
        0 0 100px rgba(55,211,245,.5),
        0 0 180px rgba(61,210,166,.25);

    animation:
        corePulse 3s ease-in-out infinite;

    z-index:10;
}

@keyframes corePulse{

    0%,100%{
        transform:
            translate(-50%,-50%)
            scale(1);
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.12);
    }
}


/* =========================================================
   ORBIT RINGS
========================================================= */

.orbit{
    position:absolute;

    left:50%;
    top:50%;

    width:340px;
    height:340px;

    border:1px solid rgba(68,209,238,.35);

    border-radius:50%;

    transform:
        translate(-50%,-50%)
        rotateX(65deg)
        rotateZ(10deg);

    box-shadow:
        0 0 30px rgba(48,193,226,.08);

    animation:
        orbitSpin 10s linear infinite;
}

.orbit:nth-child(2){
    width:270px;
    height:390px;

    transform:
        translate(-50%,-50%)
        rotateX(65deg)
        rotateY(35deg)
        rotateZ(-20deg);

    animation-duration:13s;
}

.orbit:nth-child(3){
    width:390px;
    height:260px;

    transform:
        translate(-50%,-50%)
        rotateX(60deg)
        rotateY(-35deg)
        rotateZ(20deg);

    animation-duration:16s;
}

@keyframes orbitSpin{

    to{
        transform:
            translate(-50%,-50%)
            rotateX(65deg)
            rotateZ(370deg);
    }
}


/* =========================================================
   NETWORK NODES
========================================================= */

.node{
    position:absolute;

    width:16px;
    height:16px;

    border-radius:50%;

    background:#fff;

    border:4px solid #4cdbad;

    box-shadow:
        0 0 15px #48dbad,
        0 0 35px rgba(72,219,173,.7);

    z-index:15;

    animation:
        nodePulse 2s ease-in-out infinite;
}

.node:nth-child(5){
    left:24%;
    top:27%;
}

.node:nth-child(6){
    right:15%;
    top:35%;

    border-color:#4dd1f0;

    box-shadow:
        0 0 15px #4dd1f0;
}

.node:nth-child(7){
    left:20%;
    bottom:25%;

    animation-delay:.7s;
}

.node:nth-child(8){
    right:23%;
    bottom:20%;

    border-color:#4dd1f0;

    animation-delay:1.2s;
}

@keyframes nodePulse{

    50%{
        transform:scale(1.5);
    }
}


/* =========================================================
   DATA PARTICLES
========================================================= */

.particle{
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#70e7ff;

    box-shadow:
        0 0 15px #70e7ff;

    animation:
        particleMove 4s linear infinite;
}

.p1{
    left:20%;
    top:50%;
}

.p2{
    left:70%;
    top:25%;

    animation-delay:1s;
}

.p3{
    left:75%;
    top:70%;

    animation-delay:2s;
}

.p4{
    left:35%;
    top:75%;

    animation-delay:3s;
}

@keyframes particleMove{

    0%,100%{
        opacity:.15;
        transform:scale(.6);
    }

    50%{
        opacity:1;
        transform:scale(1.5);
    }
}


/* =========================================================
   SPEED CARD
========================================================= */

.speed-card{
    position:absolute;

    right:32px;
    bottom:30px;

    width:370px;

    padding:25px 28px;

    border-radius:25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(219,255,241,.9)
        );

    color:#11394a;

    box-shadow:
        0 25px 55px rgba(0,0,0,.28);

    z-index:30;
}

.speed-card .tag{
    color:#22ad78;

    font-size:9px;
    font-weight:800;

    letter-spacing:1px;
}

.speed-card h3{
    margin-top:8px;

    font-size:22px;

    line-height:1.2;

    letter-spacing:-1px;
}

.speed-card p{
    margin-top:10px;

    color:#78909b;

    font-size:10px;

    line-height:1.6;
}

.speed-info{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:18px;
}

.speed{
    font-size:24px;
    font-weight:800;
}

.speed span{
    color:#21b77c;
    font-size:11px;
}

.status{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:9px;
    font-weight:800;
}

.status-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#3ed39b;

    box-shadow:
        0 0 12px #3ed39b;
}


/* =========================================================
   FLOATING ISP BADGES
========================================================= */

.badge{
    position:absolute;

    z-index:25;

    padding:10px 14px;

    border-radius:13px;

    color:white;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.13);

    backdrop-filter:blur(12px);

    font-size:9px;
    font-weight:700;

    animation:
        badgeFloat 4s ease-in-out infinite;
}

.badge.one{
    top:42%;
    left:8%;
}

.badge.two{
    top:61%;
    right:7%;

    animation-delay:1.2s;
}

@keyframes badgeFloat{

    50%{
        transform:translateY(-9px);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .page{
        padding:25px;
    }

    .portal{
        grid-template-columns:1fr;
    }

    .left{
        min-height:700px;
    }

    .right{
        min-height:650px;

        border-radius:
            0 0 38px 38px;
    }

    .logo{
        left:45px;
    }
}


@media(max-width:650px){

    .page{
        padding:10px;
    }

    .portal{
        border-radius:25px;
    }

    .left{
        padding:
            110px 24px 45px;

        min-height:auto;
    }

    .logo{
        top:30px;
        left:25px;
    }

    .welcome h1{
        font-size:34px;
    }

    .welcome p{
        font-size:12px;
    }

    .tabs{
        width:100%;
    }

    .right{
        min-height:580px;

        padding:35px 22px;

        border-radius:
            0 0 25px 25px;
    }

    .network-heading h2{
        font-size:31px;
    }

    .network-heading p{
        font-size:10px;
    }

    .network-scene{
        width:330px;
        height:330px;

        top:51%;
    }

    .orbit{
        width:260px;
        height:260px;
    }

    .speed-card{
        left:50%;
        right:auto;
        bottom:20px;

        width:
            calc(100% - 35px);

        transform:
            translateX(-50%);

        padding:18px 20px;
    }

    .speed-card h3{
        font-size:17px;
    }

    .badge{
        display:none;
    }
}


@media(max-width:400px){

    .left{
        padding-left:18px;
        padding-right:18px;
    }

    .welcome h1{
        font-size:30px;
    }

    .input{
        height:54px;
    }

    .sign-btn{
        height:55px;
    }

    .right{
        min-height:540px;
    }

    .network-heading h2{
        font-size:27px;
    }
}

</style>
</head>


<body>


<div class="page">

    <main class="portal">


        <!-- =================================================
             LEFT — LOGIN
        ================================================== -->

        <section class="left">


            <div class="logo">

                <div class="logo-symbol">
                    N
                </div>

                <div class="logo-text">
                    Net<span>Fiber</span>
                </div>

            </div>


            <div class="auth">


                <div class="welcome">

                    <h1>
                        Welcome back
                    </h1>

                    <p>
                        Access your broadband account
                        and manage your connection.
                    </p>

                </div>


                <!-- LOGIN / SIGNUP -->

                <div class="tabs">

                    <button
                        class="active"
                        onclick="switchAuth('login')"
                    >
                        Login
                    </button>

                    <button
                        onclick="switchAuth('signup')"
                    >
                        Sign Up
                    </button>

                </div>


                <!-- =================================================
                     LOGIN FORM
                ================================================== -->

                <form
                    id="loginForm"
                    class="form active"
                >

                    <div class="field">

                        <label>
                            MOBILE NUMBER / EMAIL
                        </label>

                        <div class="input">

                            <span class="input-icon">
                                ✉
                            </span>

                            <input
                                type="text"
                                placeholder="98765 43210"
                            >

                        </div>

                    </div>


                    <div class="field">

                        <label>
                            PASSWORD
                        </label>

                        <div class="input">

                            <span class="input-icon">
                                ●
                            </span>

                            <input
                                type="password"
                                placeholder="Enter your password"
                            >

                        </div>

                    </div>


                    <div class="form-options">

                        <label class="remember">

                            <input
                                type="checkbox"
                            >

                            Keep me logged in

                        </label>

                        <span class="forgot">
                            Forgot Password?
                        </span>

                    </div>


                    <button
                        type="button"
                        class="sign-btn"
                        onclick="connectAccount(this)"
                    >
                        Sign in to my account
                    </button>


                    <a
                        href="#"
                        class="otp"
                    >
                        Login with OTP instead →
                    </a>


                    <div class="quick">

                        <button
                            type="button"
                            title="Google"
                        >
                            G
                        </button>

                        <button
                            type="button"
                            title="Customer ID"
                        >
                            ID
                        </button>

                        <button
                            type="button"
                            title="OTP"
                        >
                            ✦
                        </button>

                    </div>

                </form>


                <!-- =================================================
                     SIGNUP FORM
                ================================================== -->

                <form
                    id="signupForm"
                    class="form"
                >

                    <div class="field">

                        <label>
                            FULL NAME
                        </label>

                        <div class="input">

                            <span class="input-icon">
                                ●
                            </span>

                            <input
                                type="text"
                                placeholder="Your full name"
                            >

                        </div>

                    </div>


                    <div class="field">

                        <label>
                            MOBILE NUMBER
                        </label>

                        <div class="input">

                            <span class="input-icon">
                                ☎
                            </span>

                            <input
                                type="tel"
                                placeholder="+91 98765 43210"
                            >

                        </div>

                    </div>


                    <div class="field">

                        <label>
                            EMAIL ADDRESS
                        </label>

                        <div class="input">

                            <span class="input-icon">
                                ✉
                            </span>

                            <input
                                type="email"
                                placeholder="you@example.com"
                            >

                        </div>

                    </div>


                    <div class="field">

                        <label>
                            CREATE PASSWORD
                        </label>

                        <div class="input">

                            <span class="input-icon">
                                ●
                            </span>

                            <input
                                type="password"
                                placeholder="Create password"
                            >

                        </div>

                    </div>


                    <button
                        type="button"
                        class="sign-btn"
                        onclick="connectAccount(this)"
                    >
                        Create my account
                    </button>


                    <a
                        href="#"
                        class="otp"
                    >
                        Register using OTP →
                    </a>

                </form>

            </div>

        </section>



        <!-- =================================================
             RIGHT — ISP NETWORK
        ================================================== -->

        <section class="right">


            <div class="network-heading">

                <div class="small">
                    YOUR CONNECTION
                </div>

                <h2>
                    Fast internet.<br>
                    Built around you.
                </h2>

                <p>
                    Experience a reliable fiber connection
                    with high speed, low latency and
                    intelligent network monitoring.
                </p>

            </div>


            <!-- 3D NETWORK -->

            <div class="network-scene">

                <div class="orbit"></div>

                <div class="orbit"></div>

                <div class="orbit"></div>


                <div class="core"></div>


                <div class="node"></div>
                <div class="node"></div>
                <div class="node"></div>
                <div class="node"></div>


                <div class="particle p1"></div>
                <div class="particle p2"></div>
                <div class="particle p3"></div>
                <div class="particle p4"></div>

            </div>


            <!-- FLOATING BADGES -->

            <div class="badge one">
                ⚡ Fiber Connected
            </div>

            <div class="badge two">
                ✓ Network Protected
            </div>


            <!-- SPEED CARD -->

            <div class="speed-card">

                <div class="tag">
                    LIVE NETWORK
                </div>

                <h3>
                    Your connection is ready.
                </h3>

                <p>
                    Monitor your plan, connection status,
                    usage and payments from one place.
                </p>


                <div class="speed-info">

                    <div class="speed">
                        1 Gbps
                        <span>
                            Fiber
                        </span>
                    </div>

                    <div class="status">

                        <span class="status-dot"></span>

                        Network Online

                    </div>

                </div>

            </div>

        </section>

    </main>

</div>



<script>

/* =========================================================
   LOGIN / SIGNUP
========================================================= */

function switchAuth(type){

    const buttons =
        document.querySelectorAll(
            ".tabs button"
        );

    const login =
        document.getElementById(
            "loginForm"
        );

    const signup =
        document.getElementById(
            "signupForm"
        );


    buttons.forEach(
        button =>
        button.classList.remove(
            "active"
        )
    );


    if(type === "login"){

        buttons[0]
            .classList.add("active");

        login
            .classList.add("active");

        signup
            .classList.remove("active");

    }else{

        buttons[1]
            .classList.add("active");

        signup
            .classList.add("active");

        login
            .classList.remove("active");

    }

}


/* =========================================================
   DEMO BUTTON
========================================================= */

function connectAccount(button){

    const original =
        button.innerHTML;

    button.innerHTML =
        "Connecting...";

    button.style.pointerEvents =
        "none";


    setTimeout(()=>{

        button.innerHTML =
            "✓ Connection Ready";

        setTimeout(()=>{

            button.innerHTML =
                original;

            button.style.pointerEvents =
                "auto";

        },1400);

    },900);

}


/* =========================================================
   MOUSE 3D PARALLAX
========================================================= */

document.addEventListener(
    "mousemove",
    function(e){

        const x =
            e.clientX /
            window.innerWidth -
            .5;

        const y =
            e.clientY /
            window.innerHeight -
            .5;


        const scene =
            document.querySelector(
                ".network-scene"
            );

        const core =
            document.querySelector(
                ".core"
            );


        if(scene){

            scene.style.marginLeft =
                `${x * 25}px`;

            scene.style.marginTop =
                `${y * 18}px`;

        }


        if(core){

            core.style.marginLeft =
                `${x * 12}px`;

            core.style.marginTop =
                `${y * 10}px`;

        }

    }
);

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>NetFiber — Customer Portal</title>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --blue:#36b9ed;
    --blue-dark:#168dcc;
    --green:#43d39b;
    --green-dark:#20b87b;
    --dark:#07151c;
    --text:#123c50;
    --muted:#75909d;
}

body{
    min-height:100vh;
    font-family:Inter,Arial,sans-serif;
    overflow-x:hidden;
    color:white;

background:
        radial-gradient(
            circle at 10% 15%,
            #69dfff 0,
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 15%,
            #8ce9bd 0,
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #43bdec,
            #56dba7 48%,
            #dff9f0
        );
}

/* =========================================================
   BACKGROUND NETWORK GRID
========================================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;

background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

background-size:45px 45px;

mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

pointer-events:none;
}

/* =========================================================
   MAIN
========================================================= */

.page{
    min-height:100vh;

display:flex;
    align-items:center;
    justify-content:center;

padding:55px;
}

/* =========================================================
   MAIN GLASS CONTAINER
========================================================= */

.portal{
    position:relative;

width:min(1280px,100%);
    min-height:760px;

display:grid;
    grid-template-columns:52% 48%;

overflow:hidden;

border-radius:38px;

background:
        linear-gradient(
            135deg,
            rgba(5,36,48,.63),
            rgba(11,62,68,.48)
        );

border:
        1px solid rgba(255,255,255,.34);

box-shadow:
        0 45px 100px rgba(8,72,91,.28),
        inset 0 1px 0 rgba(255,255,255,.35);

backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
}

/* =========================================================
   LEFT SIDE
========================================================= */

.left{
    position:relative;

padding:58px 75px 50px;

display:flex;
    flex-direction:column;
    justify-content:center;

z-index:10;
}

/* =========================================================
   LOGO
========================================================= */

.logo{
    position:absolute;

top:48px;
    left:72px;

display:flex;
    align-items:center;
    gap:12px;
}

.logo-symbol{
    position:relative;

width:42px;
    height:42px;

display:flex;
    align-items:center;
    justify-content:center;

border-radius:14px;

background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

box-shadow:
        0 12px 30px rgba(45,199,190,.3);

font-weight:800;
    font-size:17px;
}

.logo-symbol::before,
.logo-symbol::after{
    content:"";

position:absolute;

border-radius:20px;

background:white;
}

.logo-symbol::before{
    width:5px;
    height:22px;

transform:rotate(35deg);
}

.logo-symbol::after{
    width:5px;
    height:14px;

transform:
        rotate(35deg)
        translate(10px,-6px);
}

.logo-text{
    font-size:19px;
    font-weight:800;
    letter-spacing:-.7px;
}

.logo-text span{
    color:#55e1ad;
}

/* =========================================================
   AUTH CONTENT
========================================================= */

.auth{
    width:100%;
    max-width:500px;
}

.welcome{
    margin-bottom:30px;
}

.welcome h1{
    font-size:45px;
    line-height:1.08;

letter-spacing:-2px;

margin-bottom:10px;
}

.welcome p{
    font-size:14px;
    color:rgba(255,255,255,.72);
}

/* =========================================================
   LOGIN SIGNUP TABS
========================================================= */

.tabs{
    display:flex;

width:270px;

padding:5px;

margin-bottom:25px;

border-radius:15px;

background:rgba(0,0,0,.17);

border:
        1px solid rgba(255,255,255,.1);
}

.tabs button{
    flex:1;

height:40px;

border:0;
    border-radius:11px;

background:transparent;

color:rgba(255,255,255,.58);

font-size:11px;
    font-weight:800;

cursor:pointer;

transition:.3s;
}

.tabs button.active{
    color:#123b4c;

background:white;

box-shadow:
        0 8px 20px rgba(0,0,0,.12);
}

/* =========================================================
   FORMS
========================================================= */

.form{
    display:none;

animation:
        formIn .4s ease;
}

.form.active{
    display:block;
}

@keyframes formIn{

from{
        opacity:0;
        transform:translateY(12px);
    }

to{
        opacity:1;
        transform:none;
    }
}

.field{
    margin-bottom:17px;
}

.field label{
    display:block;

margin-bottom:8px;

color:rgba(255,255,255,.83);

font-size:11px;
    font-weight:600;
}

.input{
    width:100%;
    height:59px;

display:flex;
    align-items:center;

gap:12px;

padding:0 18px;

border-radius:30px;

background:
        rgba(0,0,0,.60);

border:
        1px solid rgba(255,255,255,.08);

box-shadow:
        inset 0 5px 15px rgba(0,0,0,.22),
        0 4px 15px rgba(0,0,0,.06);

transition:.3s;
}

.input:focus-within{
    border-color:
        rgba(82,220,239,.75);

box-shadow:
        0 0 0 4px rgba(63,199,225,.1),
        inset 0 5px 15px rgba(0,0,0,.22);
}

.input-icon{
    color:#58dcae;
    font-size:17px;
}

.input input{
    width:100%;

border:0;
    outline:0;

background:transparent;

color:white;

font-size:12px;
}

.input input::placeholder{
    color:rgba(255,255,255,.5);
}

/* =========================================================
   FORGOT
========================================================= */

.form-options{
    display:flex;
    align-items:center;
    justify-content:space-between;

margin:3px 4px 24px;

font-size:10px;
}

.remember{
    display:flex;
    align-items:center;
    gap:7px;

color:rgba(255,255,255,.7);
}

.remember input{
    accent-color:#42d49d;
}

.forgot{
    color:white;
    text-decoration:underline;

cursor:pointer;
}

/* =========================================================
   MAIN BUTTON
========================================================= */

.sign-btn{
    position:relative;

width:100%;
    height:59px;

overflow:hidden;

border:0;
    border-radius:30px;

color:#072f3d;

background:
        linear-gradient(
            100deg,
            #ffb09c,
            #ff8791
        );

font-size:14px;
    font-weight:800;

cursor:pointer;

box-shadow:
        0 15px 30px rgba(0,0,0,.14);

transition:.3s;
}

.sign-btn:hover{
    transform:translateY(-2px);

box-shadow:
        0 20px 40px rgba(0,0,0,.2);
}

.sign-btn::before{
    content:"";

position:absolute;

top:0;
    left:-120px;

width:90px;
    height:100%;

background:
        rgba(255,255,255,.4);

transform:skewX(-20deg);

animation:
        shine 3s infinite;
}

@keyframes shine{

0%,35%{
        left:-120px;
    }

75%,100%{
        left:120%;
    }
}

/* =========================================================
   QUICK LOGIN
========================================================= */

.quick{
    display:flex;
    justify-content:center;
    gap:13px;

margin-top:25px;
}

.quick button{
    width:47px;
    height:47px;

border:0;
    border-radius:50%;

background:white;

color:#123c50;

font-size:16px;
    font-weight:800;

cursor:pointer;

box-shadow:
        0 8px 20px rgba(0,0,0,.13);

transition:.3s;
}

.quick button:hover{
    transform:
        translateY(-4px)
        scale(1.04);
}

/* =========================================================
   OTP LINK
========================================================= */

.otp{
    display:block;

margin-top:17px;

text-align:center;

color:#aef3db;

font-size:10px;
    font-weight:700;

text-decoration:none;
}

/* =========================================================
   RIGHT SIDE
========================================================= */

.right{
    position:relative;

min-height:760px;

padding:55px;

overflow:hidden;

background:
        linear-gradient(
            145deg,
            rgba(3,12,16,.98),
            rgba(5,24,32,.91)
        );

border-radius:0 38px 38px 0;
}

/* =========================================================
   RIGHT HEADER
========================================================= */

.network-heading{
    position:relative;

z-index:20;
}

.network-heading .small{
    color:#55ddb0;

font-size:10px;
    font-weight:800;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:16px;
}

.network-heading h2{
    max-width:430px;

font-size:42px;
    line-height:1.1;

letter-spacing:-2px;
}

.network-heading p{
    max-width:390px;

margin-top:16px;

color:rgba(255,255,255,.57);

font-size:12px;
    line-height:1.7;
}

/* =========================================================
   3D NETWORK CORE
========================================================= */

.network-scene{
    position:absolute;

left:50%;
    top:53%;

width:450px;
    height:450px;

transform:
        translate(-50%,-50%);

perspective:900px;
}

.core{
    position:absolute;

left:50%;
    top:50%;

width:105px;
    height:105px;

transform:
        translate(-50%,-50%);

border-radius:50%;

background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0,
            #72e9ff 13%,
            #31b9eb 36%,
            #1a65aa 68%,
            #0b2747 100%
        );

box-shadow:
        0 0 35px rgba(55,211,245,.9),
        0 0 100px rgba(55,211,245,.5),
        0 0 180px rgba(61,210,166,.25);

animation:
        corePulse 3s ease-in-out infinite;

z-index:10;
}

@keyframes corePulse{

0%,100%{
        transform:
            translate(-50%,-50%)
            scale(1);
    }

50%{
        transform:
            translate(-50%,-50%)
            scale(1.12);
    }
}

/* =========================================================
   ORBIT RINGS
========================================================= */

.orbit{
    position:absolute;

left:50%;
    top:50%;

width:340px;
    height:340px;

border:1px solid rgba(68,209,238,.35);

border-radius:50%;

transform:
        translate(-50%,-50%)
        rotateX(65deg)
        rotateZ(10deg);

box-shadow:
        0 0 30px rgba(48,193,226,.08);

animation:
        orbitSpin 10s linear infinite;
}

.orbit:nth-child(2){
    width:270px;
    height:390px;

transform:
        translate(-50%,-50%)
        rotateX(65deg)
        rotateY(35deg)
        rotateZ(-20deg);

animation-duration:13s;
}

.orbit:nth-child(3){
    width:390px;
    height:260px;

transform:
        translate(-50%,-50%)
        rotateX(60deg)
        rotateY(-35deg)
        rotateZ(20deg);

animation-duration:16s;
}

@keyframes orbitSpin{

to{
        transform:
            translate(-50%,-50%)
            rotateX(65deg)
            rotateZ(370deg);
    }
}

/* =========================================================
   NETWORK NODES
========================================================= */

.node{
    position:absolute;

width:16px;
    height:16px;

border-radius:50%;

background:#fff;

border:4px solid #4cdbad;

box-shadow:
        0 0 15px #48dbad,
        0 0 35px rgba(72,219,173,.7);

z-index:15;

animation:
        nodePulse 2s ease-in-out infinite;
}

.node:nth-child(5){
    left:24%;
    top:27%;
}

.node:nth-child(6){
    right:15%;
    top:35%;

border-color:#4dd1f0;

box-shadow:
        0 0 15px #4dd1f0;
}

.node:nth-child(7){
    left:20%;
    bottom:25%;

animation-delay:.7s;
}

.node:nth-child(8){
    right:23%;
    bottom:20%;

border-color:#4dd1f0;

animation-delay:1.2s;
}

@keyframes nodePulse{

50%{
        transform:scale(1.5);
    }
}

/* =========================================================
   DATA PARTICLES
========================================================= */

.particle{
    position:absolute;

width:7px;
    height:7px;

border-radius:50%;

background:#70e7ff;

box-shadow:
        0 0 15px #70e7ff;

animation:
        particleMove 4s linear infinite;
}

.p1{
    left:20%;
    top:50%;
}

.p2{
    left:70%;
    top:25%;

animation-delay:1s;
}

.p3{
    left:75%;
    top:70%;

animation-delay:2s;
}

.p4{
    left:35%;
    top:75%;

animation-delay:3s;
}

@keyframes particleMove{

0%,100%{
        opacity:.15;
        transform:scale(.6);
    }

50%{
        opacity:1;
        transform:scale(1.5);
    }
}

/* =========================================================
   SPEED CARD
========================================================= */

.speed-card{
    position:absolute;

right:32px;
    bottom:30px;

width:370px;

padding:25px 28px;

border-radius:25px;

background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(219,255,241,.9)
        );

color:#11394a;

box-shadow:
        0 25px 55px rgba(0,0,0,.28);

z-index:30;
}

.speed-card .tag{
    color:#22ad78;

font-size:9px;
    font-weight:800;

letter-spacing:1px;
}

.speed-card h3{
    margin-top:8px;

font-size:22px;

line-height:1.2;

letter-spacing:-1px;
}

.speed-card p{
    margin-top:10px;

color:#78909b;

font-size:10px;

line-height:1.6;
}

.speed-info{
    display:flex;
    align-items:center;
    justify-content:space-between;

margin-top:18px;
}

.speed{
    font-size:24px;
    font-weight:800;
}

.speed span{
    color:#21b77c;
    font-size:11px;
}

.status{
    display:flex;
    align-items:center;
    gap:6px;

font-size:9px;
    font-weight:800;
}

.status-dot{
    width:8px;
    height:8px;

border-radius:50%;

background:#3ed39b;

box-shadow:
        0 0 12px #3ed39b;
}

/* =========================================================
   FLOATING ISP BADGES
========================================================= */

.badge{
    position:absolute;

z-index:25;

padding:10px 14px;

border-radius:13px;

color:white;

background:
        rgba(255,255,255,.08);

border:
        1px solid rgba(255,255,255,.13);

backdrop-filter:blur(12px);

font-size:9px;
    font-weight:700;

animation:
        badgeFloat 4s ease-in-out infinite;
}

.badge.one{
    top:42%;
    left:8%;
}

.badge.two{
    top:61%;
    right:7%;

animation-delay:1.2s;
}

@keyframes badgeFloat{

50%{
        transform:translateY(-9px);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

.page{
        padding:25px;
    }

.portal{
        grid-template-columns:1fr;
    }

.left{
        min-height:700px;
    }

.right{
        min-height:650px;

border-radius:
            0 0 38px 38px;
    }

.logo{
        left:45px;
    }
}

@media(max-width:650px){

.page{
        padding:10px;
    }

.portal{
        border-radius:25px;
    }

.left{
        padding:
            110px 24px 45px;

min-height:auto;
    }

.logo{
        top:30px;
        left:25px;
    }

.welcome h1{
        font-size:34px;
    }

.welcome p{
        font-size:12px;
    }

.tabs{
        width:100%;
    }

.right{
        min-height:580px;

padding:35px 22px;

border-radius:
            0 0 25px 25px;
    }

.network-heading h2{
        font-size:31px;
    }

.network-heading p{
        font-size:10px;
    }

.network-scene{
        width:330px;
        height:330px;

top:51%;
    }

.orbit{
        width:260px;
        height:260px;
    }

.speed-card{
        left:50%;
        right:auto;
        bottom:20px;

width:
            calc(100% - 35px);

transform:
            translateX(-50%);

padding:18px 20px;
    }

.speed-card h3{
        font-size:17px;
    }

.badge{
        display:none;
    }
}

@media(max-width:400px){

.left{
        padding-left:18px;
        padding-right:18px;
    }

.welcome h1{
        font-size:30px;
    }

.input{
        height:54px;
    }

.sign-btn{
        height:55px;
    }

.right{
        min-height:540px;
    }

.network-heading h2{
        font-size:27px;
    }
}

</style>
</head>

<body>

<div class="logo-text">
                    Net<span>Fiber</span>
                </div>

</div>

<h1>
                        Welcome back
                    </h1>

<p>
                        Access your broadband account
                        and manage your connection.
                    </p>

</div>

<button
                        class="active"
                        onclick="switchAuth('login')"
                    >
                        Login
                    </button>

</div>

<label>
                            MOBILE NUMBER / EMAIL
                        </label>

</div>

<label>
                            PASSWORD
                        </label>

</div>

Keep me logged in

</label>

<span class="forgot">
                            Forgot Password?
                        </span>

</div>

<button
                        type="button"
                        class="sign-btn"
                        onclick="connectAccount(this)"
                    >
                        Sign in to my account
                    </button>

<a
                        href="#"
                        class="otp"
                    >
                        Login with OTP instead →
                    </a>

</div>

</form>

</div>

<label>
                            MOBILE NUMBER
                        </label>

</div>

<label>
                            EMAIL ADDRESS
                        </label>

</div>

<label>
                            CREATE PASSWORD
                        </label>

</div>

<button
                        type="button"
                        class="sign-btn"
                        onclick="connectAccount(this)"
                    >
                        Create my account
                    </button>

<a
                        href="#"
                        class="otp"
                    >
                        Register using OTP →
                    </a>

</form>

</div>

</section>

<div class="small">
                    YOUR CONNECTION
                </div>

<h2>
                    Fast internet.<br>
                    Built around you.
                </h2>

<p>
                    Experience a reliable fiber connection
                    with high speed, low latency and
                    intelligent network monitoring.
                </p>

</div>

</div>

<div class="badge one">
                ⚡ Fiber Connected
            </div>

<div class="badge two">
                ✓ Network Protected
            </div>

<div class="tag">
                    LIVE NETWORK
                </div>

<h3>
                    Your connection is ready.
                </h3>

<p>
                    Monitor your plan, connection status,
                    usage and payments from one place.
                </p>

<div class="speed">
                        1 Gbps
                        <span>
                            Fiber
                        </span>
                    </div>

Network Online

</div>

</section>

</main>

</div>

/* =========================================================
   LOGIN / SIGNUP
========================================================= */

function switchAuth(type){

const buttons =
        document.querySelectorAll(
            ".tabs button"
        );

const login =
        document.getElementById(
            "loginForm"
        );

const signup =
        document.getElementById(
            "signupForm"
        );

buttons.forEach(
        button =>
        button.classList.remove(
            "active"
        )
    );

if(type === "login"){

buttons[0]
            .classList.add("active");

signup
            .classList.remove("active");

}else{

buttons[1]
            .classList.add("active");

signup
            .classList.add("active");

}

/* =========================================================
   DEMO BUTTON
========================================================= */

function connectAccount(button){

const original =
        button.innerHTML;

button.innerHTML =
        "Connecting...";

button.style.pointerEvents =
        "none";

setTimeout(()=>{

button.innerHTML =
            "✓ Connection Ready";

setTimeout(()=>{

button.innerHTML =
                original;

button.style.pointerEvents =
                "auto";

},1400);

},900);

}

/* =========================================================
   MOUSE 3D PARALLAX
========================================================= */

document.addEventListener(
    "mousemove",
    function(e){

const x =
            e.clientX /
            window.innerWidth -
            .5;

const y =
            e.clientY /
            window.innerHeight -
            .5;

const scene =
            document.querySelector(
                ".network-scene"
            );

const core =
            document.querySelector(
                ".core"
            );

if(scene){

scene.style.marginLeft =
                `${x * 25}px`;

scene.style.marginTop =
                `${y * 18}px`;

}

if(core){

core.style.marginLeft =
                `${x * 12}px`;

core.style.marginTop =
                `${y * 10}px`;

}

}
);

</script>

</body>
</html>

Rate this design:

LOGIN7 by VEDANT SOMANI 09/07/2026

0.0 (0)

⚡ Speed 1 Gbps

● Network Online

✓ Connection Secure

◉ Latency 8 ms

NetFiber

Welcome to
your network.

Manage your fiber connection, plans, payments and connected services.

MOBILE NUMBER / EMAIL

✉

PASSWORD

⌑

Remember me Forgot password?

FULL NAME

●

MOBILE NUMBER

☎

✉

CREATE PASSWORD

⌑

<!-- =========================================================
     DESIGN 04 — 3D GLASS ISLAND + TRANSPARENT AUTH BOX
========================================================= -->

<style>

/* ---------- DESIGN 04 ---------- */

#screen4{
    min-height:100vh;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255,255,255,.95) 0%,
            rgba(231,249,255,.95) 42%,
            rgba(226,255,244,.95) 100%
        );

    overflow:hidden;
}

/* 3D WORLD */

.s4-world{
    position:absolute;
    inset:0;

    perspective:1400px;
    overflow:hidden;
}

/* LARGE GLASS PLATFORM */

.s4-island{
    position:absolute;

    left:50%;
    top:58%;

    width:850px;
    height:510px;

    transform:
        translate(-50%,-50%)
        rotateX(62deg)
        rotateZ(-5deg);

    transform-style:preserve-3d;

    border-radius:65px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.76),
            rgba(193,234,242,.42)
        );

    border:
        1px solid rgba(255,255,255,.95);

    box-shadow:
        0 80px 120px rgba(31,111,140,.20),
        inset 0 2px 5px rgba(255,255,255,.95);

    animation:
        s4IslandFloat 7s ease-in-out infinite;
}

@keyframes s4IslandFloat{

    0%,100%{
        transform:
            translate(-50%,-50%)
            rotateX(62deg)
            rotateZ(-5deg);
    }

    50%{
        transform:
            translate(-50%,-56%)
            rotateX(62deg)
            rotateZ(-5deg);
    }

}

/* GRID ON ISLAND */

.s4-grid{
    position:absolute;
    inset:28px;

    border-radius:45px;

    background:
        linear-gradient(
            rgba(48,181,216,.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(48,181,216,.11) 1px,
            transparent 1px
        );

    background-size:40px 40px;
}

/* CENTER GLOW */

.s4-center-glow{
    position:absolute;

    width:420px;
    height:420px;

    left:50%;
    top:53%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(65,205,235,.25),
            rgba(69,215,159,.12) 35%,
            transparent 70%
        );

    filter:blur(12px);

    animation:s4Glow 4s ease-in-out infinite;
}

@keyframes s4Glow{

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.18);

        opacity:.65;
    }

}


/* =========================================================
   TRANSPARENT LOGIN CONTAINER
========================================================= */

.s4-auth-box{

    position:absolute;

    z-index:50;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    width:410px;

    padding:30px;

    border-radius:30px;

    /*
       TRANSPARENT GLASS
    */

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.42),
            rgba(255,255,255,.17)
        );

    border:
        1px solid rgba(255,255,255,.78);

    backdrop-filter:
        blur(24px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(150%);

    box-shadow:
        0 35px 90px rgba(24,108,136,.18),
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(255,255,255,.22);

    animation:
        s4AuthFloat 5s ease-in-out infinite;
}

@keyframes s4AuthFloat{

    0%,100%{
        margin-top:0;
    }

    50%{
        margin-top:-9px;
    }

}


/* GLASS LIGHT */

.s4-auth-box::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    left:-80px;
    top:-90px;

    border-radius:50%;

    background:
        rgba(75,208,239,.15);

    filter:blur(25px);

    pointer-events:none;
}


/* LOGO */

.s4-logo{
    display:flex;
    align-items:center;
    gap:11px;
}

.s4-logo-icon{

    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border-radius:14px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #36b9ec,
            #43d59c
        );

    box-shadow:
        0 12px 28px rgba(53,193,205,.30);

    font-size:18px;
    font-weight:800;
}

.s4-logo-name{

    font-size:20px;
    font-weight:800;

    letter-spacing:-.7px;

    color:#173e51;
}

.s4-logo-name span{
    color:#27bd83;
}


/* TITLE */

.s4-auth-box h1{

    margin-top:28px;

    color:#173d50;

    font-size:34px;
    line-height:1.08;

    letter-spacing:-1.7px;
}

.s4-auth-box .s4-intro{

    margin-top:11px;
    margin-bottom:22px;

    color:#678391;

    font-size:12px;
    line-height:1.7;
}


/* LOGIN / SIGNUP SWITCH */

.s4-tabs{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:4px;

    padding:4px;

    margin-bottom:19px;

    border:
        1px solid rgba(255,255,255,.65);

    border-radius:14px;

    background:
        rgba(255,255,255,.27);
}

.s4-tabs button{

    height:39px;

    border:0;

    border-radius:10px;

    background:transparent;

    color:#718996;

    font-size:10px;
    font-weight:800;

    cursor:pointer;

    transition:.3s;
}

.s4-tabs button.active{

    color:#148bc4;

    background:
        rgba(255,255,255,.72);

    box-shadow:
        0 7px 18px rgba(37,126,150,.10);
}


/* FORM */

.s4-form{
    display:none;

    animation:
        s4FormIn .4s ease;
}

.s4-form.active{
    display:block;
}

@keyframes s4FormIn{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


/* INPUT */

.s4-field{
    margin-bottom:13px;
}

.s4-field label{

    display:block;

    margin-bottom:7px;

    color:#587483;

    font-size:9px;
    font-weight:800;

    letter-spacing:.3px;
}

.s4-input{

    height:50px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:0 14px;

    border:
        1px solid rgba(255,255,255,.72);

    border-radius:14px;

    background:
        rgba(255,255,255,.38);

    transition:.25s;
}

.s4-input:focus-within{

    background:
        rgba(255,255,255,.62);

    border-color:
        rgba(52,185,226,.55);

    box-shadow:
        0 0 0 4px
        rgba(55,190,227,.08);
}

.s4-input-icon{
    color:#6f9bab;
    font-size:14px;
}

.s4-input input{

    width:100%;

    border:0;
    outline:0;

    background:transparent;

    color:#214a5e;

    font-size:11px;
}

.s4-input input::placeholder{
    color:#91a8b3;
}


/* FORGOT */

.s4-forgot-row{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin:7px 0 17px;

    font-size:9px;
}

.s4-remember{

    display:flex;
    align-items:center;
    gap:6px;

    color:#718894;
}

.s4-remember input{
    accent-color:#32c78e;
}

.s4-forgot{

    color:#168fca;

    text-decoration:none;

    font-weight:800;
}


/* BUTTON */

.s4-submit{

    position:relative;

    width:100%;
    height:51px;

    overflow:hidden;

    border:0;
    border-radius:15px;

    color:#fff;

    background:
        linear-gradient(
            105deg,
            #32afe7,
            #42d39b
        );

    box-shadow:
        0 15px 30px
        rgba(44,188,174,.22);

    font-size:10px;
    font-weight:800;

    cursor:pointer;

    transition:.3s;
}

.s4-submit:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 20px 38px
        rgba(44,188,174,.30);
}

.s4-submit::after{

    content:"";

    position:absolute;

    top:0;
    left:-120px;

    width:80px;
    height:100%;

    background:
        rgba(255,255,255,.30);

    transform:
        skewX(-20deg);

    animation:
        s4ButtonLight 3.2s infinite;
}

@keyframes s4ButtonLight{

    0%,40%{
        left:-120px;
    }

    75%,100%{
        left:130%;
    }

}


/* QUICK LOGIN */

.s4-quick{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:14px;
}

.s4-quick button{

    height:40px;

    border:
        1px solid rgba(255,255,255,.75);

    border-radius:12px;

    background:
        rgba(255,255,255,.32);

    color:#5e7887;

    font-size:9px;
    font-weight:800;

    cursor:pointer;

    transition:.25s;
}

.s4-quick button:hover{

    background:
        rgba(255,255,255,.68);

    transform:
        translateY(-1px);
}


/* =========================================================
   FLOATING STATUS CARDS
========================================================= */

.s4-status{

    position:absolute;

    z-index:20;

    padding:11px 15px;

    border:
        1px solid rgba(255,255,255,.85);

    border-radius:14px;

    background:
        rgba(255,255,255,.42);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 35px rgba(36,116,141,.12);

    color:#52717f;

    font-size:9px;
    font-weight:800;

    animation:
        s4StatusFloat 4s ease-in-out infinite;
}

.s4-status strong{
    color:#1d9d73;
}

.s4-status.one{
    left:15%;
    top:28%;
}

.s4-status.two{
    right:14%;
    top:27%;

    animation-delay:1s;
}

.s4-status.three{
    left:17%;
    bottom:23%;

    animation-delay:1.7s;
}

.s4-status.four{
    right:17%;
    bottom:21%;

    animation-delay:2.4s;
}

@keyframes s4StatusFloat{

    50%{
        transform:
            translateY(-12px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    #screen4{
        min-height:100vh;
    }

    .s4-island{

        width:650px;
        height:400px;

        top:60%;
    }

    .s4-auth-box{

        width:
            calc(100% - 30px);

        max-width:400px;

        padding:23px;

        top:47%;

        border-radius:25px;
    }

    .s4-auth-box h1{
        font-size:29px;
    }

    .s4-status{
        transform:scale(.78);
    }

    .s4-status.one{
        left:-2%;
        top:25%;
    }

    .s4-status.two{
        right:-2%;
        top:25%;
    }

    .s4-status.three{
        left:-2%;
        bottom:16%;
    }

    .s4-status.four{
        right:-2%;
        bottom:16%;
    }

}

@media(max-width:430px){

    .s4-auth-box{
        padding:20px;
    }

    .s4-logo-icon{
        width:40px;
        height:40px;
    }

    .s4-logo-name{
        font-size:18px;
    }

    .s4-auth-box h1{
        font-size:26px;
        margin-top:21px;
    }

    .s4-auth-box .s4-intro{
        font-size:11px;
        margin-bottom:17px;
    }

    .s4-island{
        width:570px;
        height:350px;
    }

}

</style>


<section id="screen4" class="screen">

    <!-- 3D WORLD -->

    <div class="s4-world">

        <div class="s4-center-glow"></div>

        <!-- 3D GLASS ISLAND -->

        <div class="s4-island">

            <div class="s4-grid"></div>

        </div>


        <!-- FLOATING NETWORK STATUS -->

        <div class="s4-status one">
            ⚡ Speed&nbsp; <strong>1 Gbps</strong>
        </div>

        <div class="s4-status two">
            ● Network&nbsp; <strong>Online</strong>
        </div>

        <div class="s4-status three">
            ✓ Connection&nbsp; <strong>Secure</strong>
        </div>

        <div class="s4-status four">
            ◉ Latency&nbsp; <strong>8 ms</strong>
        </div>

    </div>


    <!-- =====================================================
         TRANSPARENT LOGIN / SIGNUP CONTAINER
    ====================================================== -->

    <div class="s4-auth-box">

        <!-- LOGO -->

        <div class="s4-logo">

            <div class="s4-logo-icon">
                N
            </div>

            <div class="s4-logo-name">
                Net<span>Fiber</span>
            </div>

        </div>


        <!-- TITLE -->

        <h1>
            Welcome to<br>
            your network.
        </h1>

        <p class="s4-intro">
            Manage your fiber connection, plans,
            payments and connected services.
        </p>


        <!-- LOGIN / SIGNUP -->

        <div class="s4-tabs">

            <button
                class="active"
                onclick="s4SwitchAuth('login')"
            >
                LOGIN
            </button>

            <button
                onclick="s4SwitchAuth('signup')"
            >
                SIGN UP
            </button>

        </div>


        <!-- ================= LOGIN ================= -->

        <form
            id="s4-login"
            class="s4-form active"
        >

            <div class="s4-field">

                <label>
                    MOBILE NUMBER / EMAIL
                </label>

                <div class="s4-input">

                    <span class="s4-input-icon">
                        ✉
                    </span>

                    <input
                        type="text"
                        placeholder="98765 43210"
                    >

                </div>

            </div>


            <div class="s4-field">

                <label>
                    PASSWORD
                </label>

                <div class="s4-input">

                    <span class="s4-input-icon">
                        ⌑
                    </span>

                    <input
                        type="password"
                        placeholder="Enter password"
                    >

                </div>

            </div>


            <div class="s4-forgot-row">

                <label class="s4-remember">

                    <input type="checkbox">

                    Remember me

                </label>

                <a
                    href="#"
                    class="s4-forgot"
                >
                    Forgot password?
                </a>

            </div>


            <button
                type="button"
                class="s4-submit"
                onclick="s4Connect(this)"
            >
                CONNECT TO MY ACCOUNT →
            </button>


            <div class="s4-quick">

                <button type="button">
                    LOGIN WITH OTP
                </button>

                <button type="button">
                    GOOGLE
                </button>

            </div>

        </form>


        <!-- ================= SIGN UP ================= -->

        <form
            id="s4-signup"
            class="s4-form"
        >

            <div class="s4-field">

                <label>
                    FULL NAME
                </label>

                <div class="s4-input">

                    <span class="s4-input-icon">
                        ●
                    </span>

                    <input
                        type="text"
                        placeholder="Your full name"
                    >

                </div>

            </div>


            <div class="s4-field">

                <label>
                    MOBILE NUMBER
                </label>

                <div class="s4-input">

                    <span class="s4-input-icon">
                        ☎
                    </span>

                    <input
                        type="tel"
                        placeholder="+91 98765 43210"
                    >

                </div>

            </div>


            <div class="s4-field">

                <label>
                    EMAIL
                </label>

                <div class="s4-input">

                    <span class="s4-input-icon">
                        ✉
                    </span>

                    <input
                        type="email"
                        placeholder="you@example.com"
                    >

                </div>

            </div>


            <div class="s4-field">

                <label>
                    CREATE PASSWORD
                </label>

                <div class="s4-input">

                    <span class="s4-input-icon">
                        ⌑
                    </span>

                    <input
                        type="password"
                        placeholder="Create password"
                    >

                </div>

            </div>


            <button
                type="button"
                class="s4-submit"
                onclick="s4Connect(this)"
            >
                CREATE MY ACCOUNT →
            </button>


            <div class="s4-quick">

                <button type="button">
                    REGISTER WITH OTP
                </button>

                <button type="button">
                    GOOGLE
                </button>

            </div>

        </form>

    </div>

</section>


<script>

/* =========================================================
   LOGIN / SIGNUP SWITCH
========================================================= */

function s4SwitchAuth(type){

    const tabs =
        document.querySelectorAll(
            ".s4-tabs button"
        );

    const login =
        document.getElementById(
            "s4-login"
        );

    const signup =
        document.getElementById(
            "s4-signup"
        );


    tabs.forEach(tab=>{
        tab.classList.remove("active");
    });


    if(type === "login"){

        tabs[0].classList.add("active");

        login.classList.add("active");
        signup.classList.remove("active");

    }else{

        tabs[1].classList.add("active");

        signup.classList.add("active");
        login.classList.remove("active");

    }

}


/* =========================================================
   DEMO CONNECT BUTTON
========================================================= */

function s4Connect(button){

    const oldText =
        button.innerHTML;

    button.innerHTML =
        "CONNECTING...";

    button.style.pointerEvents =
        "none";


    setTimeout(()=>{

        button.innerHTML =
            "✓ CONNECTION READY";

        setTimeout(()=>{

            button.innerHTML =
                oldText;

            button.style.pointerEvents =
                "auto";

        },1400);

    },900);

}


/* =========================================================
   3D MOUSE PARALLAX
========================================================= */

document.addEventListener(
    "mousemove",
    function(e){

        const screen =
            document.getElementById(
                "screen4"
            );

        if(
            !screen.classList.contains(
                "active"
            )
        ){
            return;
        }


        const x =
            (e.clientX /
            window.innerWidth - .5);

        const y =
            (e.clientY /
            window.innerHeight - .5);


        const island =
            document.querySelector(
                ".s4-island"
            );

        const glow =
            document.querySelector(
                ".s4-center-glow"
            );


        island.style.marginLeft =
            `${x * 25}px`;

        island.style.marginTop =
            `${y * 18}px`;


        glow.style.marginLeft =
            `${x * 15}px`;

        glow.style.marginTop =
            `${y * 12}px`;

    }
);

</script>

<style>

/* ---------- DESIGN 04 ---------- */

#screen4{
    min-height:100vh;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255,255,255,.95) 0%,
            rgba(231,249,255,.95) 42%,
            rgba(226,255,244,.95) 100%
        );

overflow:hidden;
}

/* 3D WORLD */

.s4-world{
    position:absolute;
    inset:0;

perspective:1400px;
    overflow:hidden;
}

/* LARGE GLASS PLATFORM */

.s4-island{
    position:absolute;

left:50%;
    top:58%;

width:850px;
    height:510px;

transform:
        translate(-50%,-50%)
        rotateX(62deg)
        rotateZ(-5deg);

transform-style:preserve-3d;

border-radius:65px;

background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.76),
            rgba(193,234,242,.42)
        );

border:
        1px solid rgba(255,255,255,.95);

box-shadow:
        0 80px 120px rgba(31,111,140,.20),
        inset 0 2px 5px rgba(255,255,255,.95);

animation:
        s4IslandFloat 7s ease-in-out infinite;
}

@keyframes s4IslandFloat{

0%,100%{
        transform:
            translate(-50%,-50%)
            rotateX(62deg)
            rotateZ(-5deg);
    }

50%{
        transform:
            translate(-50%,-56%)
            rotateX(62deg)
            rotateZ(-5deg);
    }

}

/* GRID ON ISLAND */

.s4-grid{
    position:absolute;
    inset:28px;

border-radius:45px;

background:
        linear-gradient(
            rgba(48,181,216,.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(48,181,216,.11) 1px,
            transparent 1px
        );

background-size:40px 40px;
}

/* CENTER GLOW */

.s4-center-glow{
    position:absolute;

width:420px;
    height:420px;

left:50%;
    top:53%;

transform:translate(-50%,-50%);

border-radius:50%;

background:
        radial-gradient(
            circle,
            rgba(65,205,235,.25),
            rgba(69,215,159,.12) 35%,
            transparent 70%
        );

filter:blur(12px);

animation:s4Glow 4s ease-in-out infinite;
}

@keyframes s4Glow{

50%{
        transform:
            translate(-50%,-50%)
            scale(1.18);

opacity:.65;
    }

}

/* =========================================================
   TRANSPARENT LOGIN CONTAINER
========================================================= */

.s4-auth-box{

position:absolute;

z-index:50;

left:50%;
    top:50%;

transform:
        translate(-50%,-50%);

width:410px;

padding:30px;

border-radius:30px;

/*
       TRANSPARENT GLASS
    */

background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.42),
            rgba(255,255,255,.17)
        );

border:
        1px solid rgba(255,255,255,.78);

backdrop-filter:
        blur(24px)
        saturate(150%);

-webkit-backdrop-filter:
        blur(24px)
        saturate(150%);

box-shadow:
        0 35px 90px rgba(24,108,136,.18),
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -1px 0 rgba(255,255,255,.22);

animation:
        s4AuthFloat 5s ease-in-out infinite;
}

@keyframes s4AuthFloat{

0%,100%{
        margin-top:0;
    }

50%{
        margin-top:-9px;
    }

}

/* GLASS LIGHT */

.s4-auth-box::before{

content:"";

position:absolute;

width:180px;
    height:180px;

left:-80px;
    top:-90px;

border-radius:50%;

background:
        rgba(75,208,239,.15);

filter:blur(25px);

pointer-events:none;
}

/* LOGO */

.s4-logo{
    display:flex;
    align-items:center;
    gap:11px;
}

.s4-logo-icon{

width:44px;
    height:44px;

display:grid;
    place-items:center;

border-radius:14px;

color:#fff;

background:
        linear-gradient(
            135deg,
            #36b9ec,
            #43d59c
        );

box-shadow:
        0 12px 28px rgba(53,193,205,.30);

font-size:18px;
    font-weight:800;
}

.s4-logo-name{

font-size:20px;
    font-weight:800;

letter-spacing:-.7px;

color:#173e51;
}

.s4-logo-name span{
    color:#27bd83;
}

/* TITLE */

.s4-auth-box h1{

margin-top:28px;

color:#173d50;

font-size:34px;
    line-height:1.08;

letter-spacing:-1.7px;
}

.s4-auth-box .s4-intro{

margin-top:11px;
    margin-bottom:22px;

color:#678391;

font-size:12px;
    line-height:1.7;
}

/* LOGIN / SIGNUP SWITCH */

.s4-tabs{

display:grid;
    grid-template-columns:1fr 1fr;

gap:4px;

padding:4px;

margin-bottom:19px;

border:
        1px solid rgba(255,255,255,.65);

border-radius:14px;

background:
        rgba(255,255,255,.27);
}

.s4-tabs button{

height:39px;

border:0;

border-radius:10px;

background:transparent;

color:#718996;

font-size:10px;
    font-weight:800;

cursor:pointer;

transition:.3s;
}

.s4-tabs button.active{

color:#148bc4;

background:
        rgba(255,255,255,.72);

box-shadow:
        0 7px 18px rgba(37,126,150,.10);
}

/* FORM */

.s4-form{
    display:none;

animation:
        s4FormIn .4s ease;
}

.s4-form.active{
    display:block;
}

@keyframes s4FormIn{

from{
        opacity:0;
        transform:translateY(10px);
    }

to{
        opacity:1;
        transform:none;
    }

}

/* INPUT */

.s4-field{
    margin-bottom:13px;
}

.s4-field label{

display:block;

margin-bottom:7px;

color:#587483;

font-size:9px;
    font-weight:800;

letter-spacing:.3px;
}

.s4-input{

height:50px;

display:flex;
    align-items:center;

gap:10px;

padding:0 14px;

border:
        1px solid rgba(255,255,255,.72);

border-radius:14px;

background:
        rgba(255,255,255,.38);

transition:.25s;
}

.s4-input:focus-within{

background:
        rgba(255,255,255,.62);

border-color:
        rgba(52,185,226,.55);

box-shadow:
        0 0 0 4px
        rgba(55,190,227,.08);
}

.s4-input-icon{
    color:#6f9bab;
    font-size:14px;
}

.s4-input input{

width:100%;

border:0;
    outline:0;

background:transparent;

color:#214a5e;

font-size:11px;
}

.s4-input input::placeholder{
    color:#91a8b3;
}

/* FORGOT */

.s4-forgot-row{

display:flex;
    justify-content:space-between;
    align-items:center;

margin:7px 0 17px;

font-size:9px;
}

.s4-remember{

display:flex;
    align-items:center;
    gap:6px;

color:#718894;
}

.s4-remember input{
    accent-color:#32c78e;
}

.s4-forgot{

color:#168fca;

text-decoration:none;

font-weight:800;
}

/* BUTTON */

.s4-submit{

position:relative;

width:100%;
    height:51px;

overflow:hidden;

border:0;
    border-radius:15px;

color:#fff;

background:
        linear-gradient(
            105deg,
            #32afe7,
            #42d39b
        );

box-shadow:
        0 15px 30px
        rgba(44,188,174,.22);

font-size:10px;
    font-weight:800;

cursor:pointer;

transition:.3s;
}

.s4-submit:hover{

transform:
        translateY(-2px);

box-shadow:
        0 20px 38px
        rgba(44,188,174,.30);
}

.s4-submit::after{

content:"";

position:absolute;

top:0;
    left:-120px;

width:80px;
    height:100%;

background:
        rgba(255,255,255,.30);

transform:
        skewX(-20deg);

animation:
        s4ButtonLight 3.2s infinite;
}

@keyframes s4ButtonLight{

0%,40%{
        left:-120px;
    }

75%,100%{
        left:130%;
    }

}

/* QUICK LOGIN */

.s4-quick{

display:grid;

grid-template-columns:1fr 1fr;

gap:8px;

margin-top:14px;
}

.s4-quick button{

height:40px;

border:
        1px solid rgba(255,255,255,.75);

border-radius:12px;

background:
        rgba(255,255,255,.32);

color:#5e7887;

font-size:9px;
    font-weight:800;

cursor:pointer;

transition:.25s;
}

.s4-quick button:hover{

background:
        rgba(255,255,255,.68);

transform:
        translateY(-1px);
}

/* =========================================================
   FLOATING STATUS CARDS
========================================================= */

.s4-status{

position:absolute;

z-index:20;

padding:11px 15px;

border:
        1px solid rgba(255,255,255,.85);

border-radius:14px;

background:
        rgba(255,255,255,.42);

backdrop-filter:
        blur(18px);

box-shadow:
        0 15px 35px rgba(36,116,141,.12);

color:#52717f;

font-size:9px;
    font-weight:800;

animation:
        s4StatusFloat 4s ease-in-out infinite;
}

.s4-status strong{
    color:#1d9d73;
}

.s4-status.one{
    left:15%;
    top:28%;
}

.s4-status.two{
    right:14%;
    top:27%;

animation-delay:1s;
}

.s4-status.three{
    left:17%;
    bottom:23%;

animation-delay:1.7s;
}

.s4-status.four{
    right:17%;
    bottom:21%;

animation-delay:2.4s;
}

@keyframes s4StatusFloat{

50%{
        transform:
            translateY(-12px);
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

#screen4{
        min-height:100vh;
    }

.s4-island{

width:650px;
        height:400px;

top:60%;
    }

.s4-auth-box{

width:
            calc(100% - 30px);

max-width:400px;

padding:23px;

top:47%;

border-radius:25px;
    }

.s4-auth-box h1{
        font-size:29px;
    }

.s4-status{
        transform:scale(.78);
    }

.s4-status.one{
        left:-2%;
        top:25%;
    }

.s4-status.two{
        right:-2%;
        top:25%;
    }

.s4-status.three{
        left:-2%;
        bottom:16%;
    }

.s4-status.four{
        right:-2%;
        bottom:16%;
    }

}

@media(max-width:430px){

.s4-auth-box{
        padding:20px;
    }

.s4-logo-icon{
        width:40px;
        height:40px;
    }

.s4-logo-name{
        font-size:18px;
    }

.s4-auth-box h1{
        font-size:26px;
        margin-top:21px;
    }

.s4-auth-box .s4-intro{
        font-size:11px;
        margin-bottom:17px;
    }

.s4-island{
        width:570px;
        height:350px;
    }

}

</style>

</div>

<div class="s4-status one">
            ⚡ Speed  <strong>1 Gbps</strong>
        </div>

<div class="s4-status two">
            ● Network  <strong>Online</strong>
        </div>

<div class="s4-status three">
            ✓ Connection  <strong>Secure</strong>
        </div>

<div class="s4-status four">
            ◉ Latency  <strong>8 ms</strong>
        </div>

</div>

<div class="s4-logo-name">
                Net<span>Fiber</span>
            </div>

</div>

<h1>
            Welcome to<br>
            your network.
        </h1>

<p class="s4-intro">
            Manage your fiber connection, plans,
            payments and connected services.
        </p>

<button
                class="active"
                onclick="s4SwitchAuth('login')"
            >
                LOGIN
            </button>

</div>

<label>
                    MOBILE NUMBER / EMAIL
                </label>

</div>

<label>
                    PASSWORD
                </label>

</div>

Remember me

</label>

<a
                    href="#"
                    class="s4-forgot"
                >
                    Forgot password?
                </a>

</div>

<button
                type="button"
                class="s4-submit"
                onclick="s4Connect(this)"
            >
                CONNECT TO MY ACCOUNT →
            </button>

<button type="button">
                    LOGIN WITH OTP
                </button>

<button type="button">
                    GOOGLE
                </button>

</div>

</form>

</div>

<label>
                    MOBILE NUMBER
                </label>

</div>

<label>
                    EMAIL
                </label>

</div>

<label>
                    CREATE PASSWORD
                </label>

</div>

<button
                type="button"
                class="s4-submit"
                onclick="s4Connect(this)"
            >
                CREATE MY ACCOUNT →
            </button>

<button type="button">
                    REGISTER WITH OTP
                </button>

<button type="button">
                    GOOGLE
                </button>

</div>

</form>

</div>

</section>

/* =========================================================
   LOGIN / SIGNUP SWITCH
========================================================= */

function s4SwitchAuth(type){

const tabs =
        document.querySelectorAll(
            ".s4-tabs button"
        );

const login =
        document.getElementById(
            "s4-login"
        );

const signup =
        document.getElementById(
            "s4-signup"
        );

tabs.forEach(tab=>{
        tab.classList.remove("active");
    });

if(type === "login"){

tabs[0].classList.add("active");

}else{

tabs[1].classList.add("active");

signup.classList.add("active");
        login.classList.remove("active");

}

/* =========================================================
   DEMO CONNECT BUTTON
========================================================= */

function s4Connect(button){

const oldText =
        button.innerHTML;

button.innerHTML =
        "CONNECTING...";

button.style.pointerEvents =
        "none";

setTimeout(()=>{

button.innerHTML =
            "✓ CONNECTION READY";

setTimeout(()=>{

button.innerHTML =
                oldText;

button.style.pointerEvents =
                "auto";

},1400);

},900);

}

/* =========================================================
   3D MOUSE PARALLAX
========================================================= */

document.addEventListener(
    "mousemove",
    function(e){

const screen =
            document.getElementById(
                "screen4"
            );

if(
            !screen.classList.contains(
                "active"
            )
        ){
            return;
        }

const x =
            (e.clientX /
            window.innerWidth - .5);

const y =
            (e.clientY /
            window.innerHeight - .5);

const island =
            document.querySelector(
                ".s4-island"
            );

const glow =
            document.querySelector(
                ".s4-center-glow"
            );

island.style.marginLeft =
            `${x * 25}px`;

island.style.marginTop =
            `${y * 18}px`;

glow.style.marginLeft =
            `${x * 15}px`;

glow.style.marginTop =
            `${y * 12}px`;

}
);

</script>

Rate this design:

LOGIN AND SIGNUP

LOGIN by VEDANT SOMANI 09/07/2026

Your internet. Your control.

Welcome to FiberNet

Choose your login

Welcome back

Verify your account

Create your FiberNet account

Confirm your identity

Finish your account

Create your password

Use OTP to sign in

Reset your password

Verify recovery request

Create new password

Connecting your account

You're connected!

LOGIN2 by VEDANT SOMANI 09/07/2026

Your connection. Your control.

Welcome to FiberNet

Welcome back 👋

Sign in securely

Verify your account

Create your FiberNet account

How do you want to create it?

Verify your details

Verify your contact

Secure your account

Forgot your password?

Verify your account

Create a new password

Preparing your account

You're connected!

What would you like to do?

LOGIN3 by VEDANT SOMANI 09/07/2026

Your internet. Your control.

Welcome to FiberNet

Choose your login

Welcome back

Verify your account

Create your account

Create your account

Create with OTP

Verify your details

Forgot your password?

Verify your account

Create new password

Connecting your account

You're connected!

Welcome back 👋

LOGIN5 by VEDANT SOMANI 09/07/2026

Stay connected. Stay ahead. Always.

Welcome back

Verify your OTP

Recover account

LOGIN6 by VEDANT SOMANI 09/07/2026

Welcome back

Fast internet. Built around you.

Your connection is ready.

LOGIN7 by VEDANT SOMANI 09/07/2026

Welcome to your network.

Establishing Network Route...

We couldn't find that page

Your internet.
Your control.

Your connection.
Your control.

Your internet.
Your control.

Fast internet.
Built around you.

Welcome to
your network.