HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
52x53
902 Bytes
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HR Graphics Designer</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap"
rel="stylesheet">

<style>

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

:root{
    --bg:#080b12;
    --card:#111722;
    --card2:#171e2b;
    --gold:#f5c451;
    --blue:#4d9cff;
    --green:#2ed39a;
    --red:#ff5b70;
    --purple:#a678ff;
    --white:#fff;
    --muted:#aeb8c8;
    --border:#283244;
}

body{
    background:
    radial-gradient(circle at top left,#18243a,transparent 35%),
    radial-gradient(circle at bottom right,#251b39,transparent 35%),
    var(--bg);
    color:var(--white);
    font-family:Arial,sans-serif;
    min-height:100vh;
}

body.urdu{
    font-family:"Noto Naskh Arabic",serif;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

.hidden{
    display:none!important;
}

.container{
    width:min(1200px,94%);
    margin:auto;
}

header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(7,10,16,.94);
    backdrop-filter:blur(15px);
    border-bottom:1px solid var(--border);
}

.nav{
    min-height:75px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:auto;
}

.brand img{
    width:52px;
    height:52px;
    border-radius:14px;
    object-fit:cover;
}

.brand-title{
    font-size:18px;
    font-weight:800;
}

.brand-sub{
    color:var(--muted);
    font-size:11px;
}

.nav button{
    background:#ffffff08;
    color:white;
    border:1px solid var(--border);
    padding:9px 13px;
    border-radius:10px;
}

.nav button:hover{
    border-color:var(--gold);
}

.lang.active{
    background:var(--gold);
    color:#111;
}

.hero{
    padding:70px 0 50px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:40px;
    align-items:center;
}

.small-title{
    color:var(--gold);
    font-weight:800;
    letter-spacing:2px;
}

.hero h1{
    font-size:clamp(40px,6vw,75px);
    line-height:1;
    margin:15px 0;
}

.hero h1 span{
    color:var(--gold);
}

.hero p{
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
}

.hero-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:25px;
}

.btn{
    border:none;
    border-radius:12px;
    padding:12px 18px;
    font-weight:800;
    background:linear-gradient(135deg,#f5c451,#fff0a7);
    color:#111;
}

.btn.secondary{
    background:#ffffff0b;
    color:white;
    border:1px solid var(--border);
}

.profile-card{
    background:linear-gradient(145deg,#171e2b,#0d121a);
    border:1px solid var(--border);
    padding:18px;
    border-radius:25px;
    box-shadow:0 20px 60px #0008;
}

.profile-card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:18px;
}

.profile-name{
    text-align:center;
    padding:14px;
}

.section{
    padding:45px 0;
}

.section h2{
    font-size:32px;
    margin-bottom:8px;
}

.subtitle{
    color:var(--muted);
    margin-bottom:22px;
    line-height:1.7;
}

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.card{
    background:linear-gradient(145deg,#121925,#0c1119);
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
}

.card img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:13px;
}

.card h3{
    margin-top:12px;
}

.card p{
    color:var(--muted);
    line-height:1.7;
    margin-top:8px;
}

.price-box{
    overflow:auto;
    border:1px solid var(--border);
    border-radius:16px;
}

table{
    width:100%;
    min-width:700px;
    border-collapse:collapse;
}

th,td{
    padding:13px;
    border-bottom:1px solid var(--border);
    text-align:left;
}

th{
    color:var(--gold);
    background:#ffffff07;
}

.tiers{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:20px 0;
}

.tier{
    padding:10px 14px;
    border-radius:30px;
    border:1px solid var(--border);
    background:#ffffff07;
}

.normal{
    color:#53e6b0;
}

.standard{
    color:#5daaff;
}

.executive{
    color:#b789ff;
}

.modal{
    position:fixed;
    inset:0;
    background:#000c;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
}

.modal-box{
    width:min(850px,100%);
    max-height:94vh;
    overflow:auto;
    background:#101620;
    border:1px solid var(--border);
    border-radius:22px;
    padding:25px;
    position:relative;
}

.close{
    position:absolute;
    right:12px;
    top:10px;
    border:none;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#ffffff0c;
    color:white;
    font-size:25px;
}

body.urdu .close{
    right:auto;
    left:12px;
}

.form{
    display:grid;
    gap:13px;
    margin-top:20px;
}

.two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
}

label{
    display:block;
    color:var(--muted);
    margin-bottom:6px;
    font-size:14px;
}

.required{
    color:var(--red);
}

input,
select,
textarea{
    width:100%;
    background:#080d14;
    border:1px solid var(--border);
    color:white;
    padding:12px;
    border-radius:10px;
    outline:none;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--blue);
}

.password{
    position:relative;
}

.password button{
    position:absolute;
    right:5px;
    top:31px;
    border:none;
    background:#ffffff08;
    color:white;
    padding:6px;
    border-radius:7px;
}

body.urdu .password button{
    right:auto;
    left:5px;
}

.help{
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}

.success{
    color:var(--green);
}

.error{
    color:var(--red);
}

.notice{
    padding:15px;
    border-radius:12px;
    background:#f5c45112;
    border:1px solid #f5c45140;
    color:#ffe9a0;
    line-height:1.8;
}

.dashboard{
    padding:40px 0;
}

.dashboard-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin:20px 0;
}

.stat{
    background:#ffffff06;
    border:1px solid var(--border);
    padding:17px;
    border-radius:15px;
}

.stat b{
    display:block;
    font-size:26px;
    margin-top:5px;
}

.panel{
    background:#0d131c;
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
    margin-top:18px;
}

.list{
    display:grid;
    gap:12px;
}

.item{
    border:1px solid var(--border);
    background:#ffffff04;
    padding:15px;
    border-radius:13px;
}

.badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:20px;
    background:#ffffff0c;
    border:1px solid var(--border);
    font-size:12px;
}

.actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-top:12px;
}

.actions button{
    padding:8px 10px;
    border-radius:8px;
    background:#ffffff08;
    color:white;
    border:1px solid var(--border);
}

.actions button:hover{
    border-color:var(--gold);
}

.whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    overflow:hidden;
    z-index:1500;
    border:2px solid white;
    box-shadow:0 10px 35px #0009;
}

.whatsapp img{
    width:100%;
    height:100%;
    object-fit:cover;
}

footer{
    border-top:1px solid var(--border);
    padding:30px 0;
    margin-top:30px;
    text-align:center;
    color:var(--muted);
    line-height:1.8;
}

.toast{
    position:fixed;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    background:#121a25;
    border:1px solid var(--border);
    padding:14px 20px;
    border-radius:12px;
    z-index:5000;
    display:none;
}

.toast.show{
    display:block;
}

.preview{
    margin-top:12px;
    padding:12px;
    border:1px dashed #55647b;
    border-radius:10px;
}

.preview img{
    max-width:100%;
    max-height:350px;
    border-radius:10px;
}

@media(max-width:850px){

    .hero-grid,
    .grid{
        grid-template-columns:1fr;
    }

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

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

    .hero{
        padding-top:40px;
    }

}

@media(max-width:550px){

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

    .nav{
        justify-content:center;
    }

    .brand{
        width:100%;
        justify-content:center;
    }

}

</style>
</head>

<body>

<header>

<div class="container nav">

<div class="brand">

<img
src="https://cdn.phototourl.com/free/2026-09-06-775207e5-b2e5-4b91-8a9a-a2e3b525294a.jpg"
onerror="fallback(this)"
>

<div>
<div class="brand-title">HR Graphics Designer</div>
<div class="brand-sub" data-t="tagline">
Professional Graphic Design & Online Services
</div>
</div>

</div>

<button onclick="openAuth('register')" data-t="register">Register</button>

<button onclick="openAuth('login')" data-t="login">Login</button>

<button onclick="openAuth('admin')">Admin Login</button>

<button id="enBtn" class="lang active" onclick="language('en')">
English
</button>

<button id="urBtn" class="lang" onclick="language('ur')">
اردو
</button>

</div>

</header>


<main id="home">

<section class="hero">

<div class="container hero-grid">

<div>

<div class="small-title">
HR GRAPHICS DESIGNER
</div>

<h1>
<span>Professional</span><br>
Graphic Design
</h1>

<p data-t="intro">
Professional Graphic Design, Online Forms, Job Applications,
Loan Application Assistance and Document Services.
</p>

<div class="hero-buttons">

<button class="btn" onclick="openAuth('register')" data-t="create">
Create Account
</button>

<button class="btn secondary" onclick="openAuth('login')" data-t="customerLogin">
Customer Login
</button>

</div>

</div>


<div class="profile-card">

<img
src="https://cdn.phototourl.com/free/2026-09-06-962b27a8-b9e5-4a41-85b4-128778bfd4f7.jpg"
onerror="fallback(this)"
>

<div class="profile-name">

<b>HASSAN RAZA</b>

<br>

<span data-t="owner">
HR Graphics Designer
</span>

</div>

</div>

</div>

</section>


<section class="section">

<div class="container">

<h2 data-t="about">About HR Graphics Designer</h2>

<p class="subtitle" data-t="aboutText">
HR Graphics Designer provides professional graphic design,
online form assistance, document preparation and customer support.
Government scheme assistance is only application assistance;
final approval belongs to the relevant department.
</p>

<div class="grid">

<div class="card">

<img
src="https://user30166.na.imgto.link/public/20260906/segment.avif"
onerror="fallback(this)"
>

<h3>🎨 Logo Design</h3>

<p>
Professional custom logo design for businesses,
shops, brands and social media.
</p>

</div>


<div class="card">

<img
src="https://user30166.na.imgto.link/public/20260906/541065342758271237.avif"
onerror="fallback(this)"
>

<h3>📱 Social Media Design</h3>

<p>
Facebook, Instagram, WhatsApp and other social media posts.
</p>

</div>


<div class="card">

<img
src="https://user30166.na.imgto.link/public/20260906/download-letter-cv-logo-design-for-financial-development-investment-real-estate-and-management-company-vector-template-for-free.avif"
onerror="fallback(this)"
>

<h3>📄 CV / Resume</h3>

<p>
Professional CV and resume preparation.
</p>

</div>

</div>

</div>

</section>


<section class="section">

<div class="container">

<h2 data-t="schemes">
Online Assistance
</h2>

<div class="grid">

<div class="card">

<img
src="https://cdn.phototourl.com/free/2026-09-06-660380b1-9466-4afa-8c2e-f33406d69799.jpg"
onerror="fallback(this)"
>

<h3>🏍️ CM Punjab E-Bike Scheme</h3>

<p>
Online application assistance for eligible students.
Application assistance fee is Rs. 500.
Eligibility and final approval are subject to the official scheme rules.
</p>

</div>


<div class="card">

<img
src="https://cdn.phototourl.com/free/2026-09-06-eb4ea0d3-7e83-4f97-9088-0e8e7034f09c.jpg"
onerror="fallback(this)"
>

<h3>💳 CM Punjab Rahmat Card</h3>

<p>
Application assistance for eligible widow women.
Application assistance fee is Rs. 500.
Final approval is by the relevant government department.
</p>

</div>


<div class="card">

<h3>💼 Job Apply</h3>

<p>
Online job application assistance,
form filling and document preparation.
</p>

</div>

</div>

</div>

</section>


<section class="section">

<div class="container">

<h2>Services & Price List</h2>

<p class="subtitle">
Login/Register is required to access the complete customer price list
and ordering system.
</p>

<div class="tiers">

<div class="tier normal">🟢 Normal — 1–2 Days</div>

<div class="tier standard">🔵 Standard — 15–20 Hours</div>

<div class="tier executive">🟣 Executive — 30 Minutes–1 Hour</div>

</div>

<div id="publicPrice"></div>

</div>

</section>

</main>


<section id="dashboard" class="dashboard hidden">

<div class="container">

<div class="dashboard-head">

<div>

<h2 data-t="dashboard">
Customer Dashboard
</h2>

<p id="welcome"></p>

</div>

<button class="btn secondary" onclick="logout()">
Logout
</button>

</div>


<div class="stats">

<div class="stat">
Orders
<b id="ordersCount">0</b>
</div>

<div class="stat">
Applications
<b id="appsCount">0</b>
</div>

<div class="stat">
Complaints
<b id="complaintsCount">0</b>
</div>

<div class="stat">
Approved Orders
<b id="approvedCount">0</b>
</div>

</div>


<div class="actions">

<button class="btn" onclick="openOrder()">
+ New Order
</button>

<button class="btn secondary" onclick="openApplication()">
+ Job / Loan Application
</button>

<button class="btn secondary" onclick="openComplaint()">
+ Complaint
</button>

</div>


<div class="panel">

<h3>Price List</h3>

<div id="customerPrice"></div>

</div>


<div class="panel">

<h3>My Orders</h3>

<div id="myOrders" class="list"></div>

</div>


<div class="panel">

<h3>My Applications</h3>

<div id="myApplications" class="list"></div>

</div>


<div class="panel">

<h3>My Complaints</h3>

<div id="myComplaints" class="list"></div>

</div>

</div>

</section>


<footer>

<div class="container">

<b>HR GRAPHICS DESIGNER</b>

<br>

Professional Graphic Design & Online Services

<br>

WhatsApp: 03237334159

<br>

Email: hrgraphicsdesigners1@gmail.com

<br><br>

© <span id="year"></span> HR Graphics Designer

</div>

</footer>


<a
class="whatsapp"
href="https://wa.me/923237334159"
target="_blank"
>

<img
src="https://cdn.phototourl.com/free/2026-09-06-549b707e-1b75-4353-9b98-015713344f26.jpg"
onerror="fallback(this)"
>

</a>


<div id="toast" class="toast"></div>


<!-- AUTH MODAL -->

<div id="authModal" class="modal hidden">

<div class="modal-box">

<button class="close" onclick="closeModal('authModal')">×</button>

<h2 id="authTitle">Register</h2>

<div id="authBody"></div>

</div>

</div>


<!-- ORDER MODAL -->

<div id="orderModal" class="modal hidden">

<div class="modal-box">

<button class="close" onclick="closeModal('orderModal')">×</button>

<h2>New Order</h2>

<form id="orderForm" class="form">

<div class="two">

<div>

<label>
Service <span class="required">*</span>
</label>

<select id="serviceSelect" required></select>

</div>


<div>

<label>
Delivery Type <span class="required">*</span>
</label>

<select id="tierSelect" required>

<option value="normal">
🟢 Normal — 1–2 Days
</option>

<option value="standard">
🔵 Standard — 15–20 Hours
</option>

<option value="executive">
🟣 Executive — 30 Minutes–1 Hour
</option>

</select>

</div>

</div>


<div class="two">

<div>

<label>Auto Price</label>

<input id="price" readonly>

</div>

<div>

<label>30% Advance</label>

<input id="advance" readonly>

</div>

</div>


<div>

<label>70% Remaining</label>

<input id="remaining" readonly>

</div>


<div class="notice">

<b>PAYMENT METHOD</b>

<br>

EasyPaisa

<br>

Account Name: <b>HASSAN RAZA</b>

<br>

Account Number:

<b>03215508041</b>

<br><br>

Please send 30% advance payment and upload your payment proof.

</div>


<div>

<label>Transaction ID / Reference</label>

<input id="transaction">

</div>


<div>

<label>Payment Screenshot</label>

<input id="paymentProof" type="file" accept="image/*">

</div>


<div>

<label>Order Details</label>

<textarea id="orderDetails" rows="5"></textarea>

</div>


<button class="btn" type="submit">
Place Order
</button>

</form>

</div>

</div>


<!-- APPLICATION MODAL -->

<div id="applicationModal" class="modal hidden">

<div class="modal-box">

<button class="close" onclick="closeModal('applicationModal')">×</button>

<h2>Application</h2>

<form id="applicationForm" class="form">

<div>

<label>Application Type</label>

<select id="applicationType">

<option>Online Job Apply</option>

<option>Job Application Assistance</option>

<option>Loan Application Assistance</option>

<option>CM Punjab E-Bike Scheme Assistance</option>

<option>CM Punjab Rahmat Card Assistance</option>

<option>Government Portal Assistance</option>

<option>Online Form Filling</option>

</select>

</div>


<div>

<label>Application Details</label>

<textarea id="applicationDetails" rows="6" required></textarea>

</div>


<button class="btn">
Submit Application
</button>

</form>

</div>

</div>


<!-- COMPLAINT MODAL -->

<div id="complaintModal" class="modal hidden">

<div class="modal-box">

<button class="close" onclick="closeModal('complaintModal')">×</button>

<h2>Complaint</h2>

<form id="complaintForm" class="form">

<div>

<label>Subject</label>

<input id="complaintSubject" required>

</div>


<div>

<label>Complaint Details</label>

<textarea id="complaintDetails" rows="6" required></textarea>

</div>


<button class="btn">
Submit Complaint
</button>

</form>

</div>

</div>


<!-- ADMIN MODAL -->

<div id="adminModal" class="modal hidden">

<div class="modal-box">

<button class="close" onclick="closeModal('adminModal')">×</button>

<h2>HR Graphics Designer — Admin Panel</h2>

<div id="adminPanel"></div>

</div>

</div>


<script>

/* ================================
   SERVICES
================================ */

const services = [

["Social Media Post",100,200,500],
["YouTube Thumbnail",150,250,600],
["Logo Design",500,1000,2000],
["1 Visiting Card",20,25,30],
["Flyer Design",300,600,1200],
["Flex / Banner Design",300,700,1500],
["T-Shirt Design",700,1200,1800],
["1 Mug Design",900,1200,1500],
["Shop Banner Design",500,1000,2000],
["Certificate Design",200,400,800],
["WhatsApp Status Design",100,200,500],
["Photo Editing",100,300,700],
["Background Removal",50,100,300],
["Book Cover Design",500,1000,2000],
["Brochure Design",500,1000,2500],
["1 Wedding Card",30,35,45],

["CV / Resume Making",200,500,1000],
["Job Application Assistance",100,300,700],
["Online Job Apply",100,250,500],
["Loan Application Assistance",200,500,1000],
["Online Form Filling",100,250,500],
["Government Portal Assistance",100,300,700],
["PDF to Word",100,300,700],
["PDF to Excel",150,400,800],
["Data Entry",200,500,1000],
["MS Word Work",100,300,700],
["Excel Work",200,500,1000],
["PowerPoint Presentation",300,700,1500],
["File Conversion",100,250,500],
["Online Registration",100,250,500]

];


/* ================================
   DATABASE
================================ */

function getDB(key){

    try{
        return JSON.parse(localStorage.getItem("HR_"+key)) || [];
    }

    catch{
        return [];
    }

}

function setDB(key,data){

    localStorage.setItem(
        "HR_"+key,
        JSON.stringify(data)
    );

}


/* ================================
   HELPERS
================================ */

function id(prefix){

    return prefix+"-"+Date.now().toString(36).toUpperCase()
    +"-"+Math.floor(Math.random()*900+100);

}

function escapeHTML(text){

    return String(text ?? "")
    .replace(/[&<>"']/g,function(m){

        return {
            "&":"&amp;",
            "<":"&lt;",
            ">":"&gt;",
            '"':"&quot;",
            "'":"&#039;"
        }[m];

    });

}

function toast(message){

    const box=document.getElementById("toast");

    box.textContent=message;

    box.classList.add("show");

    setTimeout(()=>{
        box.classList.remove("show");
    },3500);

}

function closeModal(id){

    document.getElementById(id).classList.add("hidden");

}

function fallback(img){

    img.onerror=null;

    img.src=
    "data:image/svg+xml;charset=UTF-8,"+
    encodeURIComponent(
        "<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'>"+
        "<rect width='100%' height='100%' fill='#151b25'/>"+
        "<text x='50%' y='50%' fill='#f5c451' font-size='30' text-anchor='middle'>"+
        "HR Graphics Designer"+
        "</text></svg>"
    );

}


/* ================================
   LANGUAGE
================================ */

const translations={

en:{
tagline:"Professional Graphic Design & Online Services",
register:"Register",
login:"Login",
intro:"Professional Graphic Design, Online Forms, Job Applications, Loan Application Assistance and Document Services.",
create:"Create Account",
customerLogin:"Customer Login",
owner:"HR Graphics Designer",
about:"About HR Graphics Designer",
aboutText:"HR Graphics Designer provides professional graphic design, online form assistance, document preparation and customer support. Government scheme assistance is only application assistance; final approval belongs to the relevant department.",
schemes:"Online Assistance",
dashboard:"Customer Dashboard"
},

ur:{
tagline:"پروفیشنل گرافک ڈیزائن اور آن لائن سروسز",
register:"رجسٹر",
login:"لاگ اِن",
intro:"پروفیشنل گرافک ڈیزائن، آن لائن فارم، جاب اپلائی، لون درخواست معاونت اور ڈاکومنٹ سروسز۔",
create:"اکاؤنٹ بنائیں",
customerLogin:"کسٹمر لاگ اِن",
owner:"ایچ آر گرافکس ڈیزائنر",
about:"ایچ آر گرافکس ڈیزائنر کے بارے میں",
aboutText:"HR Graphics Designer پروفیشنل گرافک ڈیزائن، آن لائن فارم اسسٹنس، ڈاکومنٹ تیاری اور کسٹمر سپورٹ فراہم کرتا ہے۔ سرکاری اسکیم کی سروس صرف درخواست میں معاونت ہے؛ حتمی منظوری متعلقہ ادارہ دیتا ہے۔",
schemes:"آن لائن معاونت",
dashboard:"کسٹمر ڈیش بورڈ"
}

};

let currentLanguage="en";

function language(lang){

    currentLanguage=lang;

    document.body.classList.toggle(
        "urdu",
        lang==="ur"
    );

    document.documentElement.dir=
        lang==="ur"?"rtl":"ltr";

    document.documentElement.lang=
        lang==="ur"?"ur":"en";

    document.querySelectorAll("[data-t]")
    .forEach(el=>{

        const key=el.dataset.t;

        if(translations[lang][key]){
            el.textContent=translations[lang][key];
        }

    });

    document.getElementById("enBtn")
    .classList.toggle("active",lang==="en");

    document.getElementById("urBtn")
    .classList.toggle("active",lang==="ur");

}


/* ================================
   PRICE LIST
================================ */

function priceTable(){

    let html=`

    <div class="price-box">

    <table>

    <thead>

    <tr>
    <th>Service</th>
    <th>Normal</th>
    <th>Standard</th>
    <th>Executive</th>
    </tr>

    </thead>

    <tbody>
    `;

    services.forEach(s=>{

        html+=`

        <tr>

        <td>${escapeHTML(s[0])}</td>

        <td>Rs. ${s[1]}</td>

        <td>Rs. ${s[2]}</td>

        <td>Rs. ${s[3]}</td>

        </tr>

        `;

    });

    html+=`

    </tbody>
    </table>
    </div>

    `;

    return html;

}

document.getElementById("publicPrice").innerHTML=priceTable();


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

function openAuth(type){

    document
    .getElementById("authModal")
    .classList.remove("hidden");

    const title=document.getElementById("authTitle");

    if(type==="register"){

        title.textContent=
        currentLanguage==="ur"?
        "نیا اکاؤنٹ بنائیں":
        "Create Account";

        document.getElementById("authBody").innerHTML=registerHTML();

    }

    else if(type==="login"){

        title.textContent=
        currentLanguage==="ur"?
        "کسٹمر لاگ اِن":
        "Customer Login";

        document.getElementById("authBody").innerHTML=loginHTML();

    }

    else{

        title.textContent="Admin Login";

        document.getElementById("authBody").innerHTML=adminHTML();

    }

}


function registerHTML(){

return `

<form class="form" onsubmit="register(event)">

<div class="two">

<div>
<label>First Name <span class="required">*</span></label>
<input id="firstName" required>
</div>

<div>
<label>Last Name <span class="required">*</span></label>
<input id="lastName" required>
</div>

</div>


<div>

<label>
Username <span class="required">*</span>
</label>

<input id="username"
required
onblur="checkUsername()">

<div id="usernameStatus" class="help"></div>

</div>


<div>

<label>
CNIC — 13 Digits <span class="required">*</span>
</label>

<input
id="cnic"
maxlength="13"
inputmode="numeric"
placeholder="1234512345671"
required
oninput="numbersOnly(this,13)"
>

<div class="help">
13 digits only — without dashes
</div>

</div>


<div>

<label>
Mobile Number — 11 Digits <span class="required">*</span>
</label>

<input
id="mobile"
maxlength="11"
inputmode="numeric"
placeholder="03XXXXXXXXX"
required
oninput="numbersOnly(this,11)"
>

</div>


<div>

<label>
Gmail / Email — Optional
</label>

<input
id="email"
type="email"
placeholder="example@gmail.com"
>

</div>


<div class="two">

<div>

<label>
Password <span class="required">*</span>
</label>

<div class="password">

<input
id="password"
type="password"
minlength="6"
maxlength="12"
required
>

<button
type="button"
onclick="showPassword('password',this)">
👁
</button>

</div>

</div>


<div>

<label>
Confirm Password <span class="required">*</span>
</label>

<div class="password">

<input
id="confirmPassword"
type="password"
minlength="6"
maxlength="12"
required
>

<button
type="button"
onclick="showPassword('confirmPassword',this)">
👁
</button>

</div>

</div>

</div>


<div class="help">

Password must contain 6–12 characters,
uppercase, lowercase, number and special character.

</div>


<button class="btn">
Create Account
</button>

</form>

`;

}


function loginHTML(){

return `

<form class="form" onsubmit="login(event)">

<div>

<label>
Username / Gmail / CNIC / Mobile
</label>

<input id="loginIdentity" required>

</div>


<div>

<label>Password</label>

<div class="password">

<input
id="loginPassword"
type="password"
required
>

<button
type="button"
onclick="showPassword('loginPassword',this)">
👁
</button>

</div>

</div>


<button class="btn">
Login
</button>

</form>

`;

}


function adminHTML(){

return `

<form class="form" onsubmit="adminLogin(event)">

<div>

<label>Admin Username</label>

<input id="adminUsername" required>

</div>


<div>

<label>Admin Password</label>

<div class="password">

<input
id="adminPassword"
type="password"
required
>

<button
type="button"
onclick="showPassword('adminPassword',this)">
👁
</button>

</div>

</div>


<button class="btn">
Admin Login
</button>

<div class="help">

For production, admin authentication must be moved to a secure backend/Firebase.

</div>

</form>

`;

}


/* ================================
   REGISTER
================================ */

function numbersOnly(input,max){

    input.value=
    input.value
    .replace(/\D/g,"")
    .slice(0,max);

}

function validPassword(password){

    return password.length>=6 &&
    password.length<=12 &&
    /[A-Z]/.test(password) &&
    /[a-z]/.test(password) &&
    /\d/.test(password) &&
    /[^A-Za-z0-9]/.test(password);

}

function checkUsername(){

    const value=
    document.getElementById("username").value
    .trim()
    .toLowerCase();

    const users=getDB("users");

    const exists=
    users.some(u=>u.username===value);

    const status=
    document.getElementById("usernameStatus");

    if(exists){

        status.textContent=
        "❌ Username already exists";

        status.className="error";

    }

    else{

        status.textContent=
        "✅ Username available";

        status.className="success";

    }

}


function register(event){

    event.preventDefault();

    const users=getDB("users");

    const first=
    document.getElementById("firstName").value.trim();

    const last=
    document.getElementById("lastName").value.trim();

    const username=
    document.getElementById("username").value
    .trim()
    .toLowerCase();

    const cnic=
    document.getElementById("cnic").value;

    const mobile=
    document.getElementById("mobile").value;

    const email=
    document.getElementById("email").value
    .trim()
    .toLowerCase();

    const password=
    document.getElementById("password").value;

    const confirm=
    document.getElementById("confirmPassword").value;


    if(users.some(u=>u.username===username)){

        toast("Username already exists.");

        return;

    }

    if(cnic.length!==13){

        toast("CNIC must contain exactly 13 digits.");

        return;

    }

    if(mobile.length!==11){

        toast("Mobile number must contain exactly 11 digits.");

        return;

    }

    if(users.some(u=>u.cnic===cnic)){

        toast("This CNIC is already registered.");

        return;

    }

    if(users.some(u=>u.mobile===mobile)){

        toast("This mobile number is already registered.");

        return;

    }

    if(email &&
    users.some(u=>u.email===email)){

        toast("This email is already registered.");

        return;

    }

    if(!validPassword(password)){

        toast(
        "Password must be 6–12 characters with uppercase, lowercase, number and special character."
        );

        return;

    }

    if(password!==confirm){

        toast("Passwords do not match.");

        return;

    }


    const user={

        id:id("USR"),

        firstName:first,

        lastName:last,

        name:first+" "+last,

        username:username,

        cnic:cnic,

        mobile:mobile,

        email:email,

        password:password,

        blocked:false,

        blockUntil:null,

        created:new Date().toISOString()

    };


    users.push(user);

    setDB("users",users);

    currentUser=user;

    closeModal("authModal");

    toast(
    "Account created successfully. Welcome to HR Graphics Designer!"
    );

    showDashboard();

}


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

function login(event){

    event.preventDefault();

    const identity=
    document.getElementById("loginIdentity")
    .value.trim().toLowerCase();

    const password=
    document.getElementById("loginPassword")
    .value;

    const users=getDB("users");

    const user=users.find(u=>
        u.username===identity ||
        u.email===identity ||
        u.cnic===identity ||
        u.mobile===identity
    );

    if(!user ||
    user.password!==password){

        toast("Invalid login details.");

        return;

    }


    if(user.blocked){

        if(
            user.blockUntil &&
            Date.now()<user.blockUntil
        ){

            const remaining=
            Math.ceil(
                (user.blockUntil-Date.now())/1000
            );

            toast(
            "Your account is temporarily blocked for "+
            remaining+" seconds."
            );

            return;

        }

        if(!user.blockUntil){

            toast("Your account is blocked.");

            return;

        }

    }


    currentUser=user;

    closeModal("authModal");

    toast(
    "You have successfully entered your dashboard."
    );

    showDashboard();

}


/* ================================
   ADMIN LOGIN
================================ */

/*
DEMO ADMIN CREDENTIALS

Username: Hassan@00
Password: hassan@890

For a REAL website do not keep admin credentials
inside frontend JavaScript.
*/

function adminLogin(event){

    event.preventDefault();

    const username=
    document.getElementById("adminUsername").value;

    const password=
    document.getElementById("adminPassword").value;


    if(
        username!=="Hassan@00" ||
        password!=="hassan@890"
    ){

        toast("Invalid admin username or password.");

        return;

    }


    closeModal("authModal");

    openAdmin();

}


/* ================================
   DASHBOARD
================================ */

function showDashboard(){

    document
    .getElementById("home")
    .classList.add("hidden");

    document
    .getElementById("dashboard")
    .classList.remove("hidden");

    window.scrollTo(0,0);

    renderDashboard();

}


function logout(){

    currentUser=null;

    document
    .getElementById("dashboard")
    .classList.add("hidden");

    document
    .getElementById("home")
    .classList.remove("hidden");

    window.scrollTo(0,0);

}


function renderDashboard(){

    if(!currentUser)return;


    const orders=
    getDB("orders")
    .filter(o=>o.userId===currentUser.id);

    const apps=
    getDB("applications")
    .filter(a=>a.userId===currentUser.id);

    const complaints=
    getDB("complaints")
    .filter(c=>c.userId===currentUser.id);


    document.getElementById("welcome").innerHTML=
    "Welcome, <b>"+
    escapeHTML(currentUser.name)+
    "</b> · "+
    escapeHTML(currentUser.username);


    document.getElementById("ordersCount")
    .textContent=orders.length;

    document.getElementById("appsCount")
    .textContent=apps.length;

    document.getElementById("complaintsCount")
    .textContent=complaints.length;

    document.getElementById("approvedCount")
    .textContent=
    orders.filter(o=>
        o.status==="Approved" ||
        o.status==="Completed"
    ).length;


    document.getElementById("customerPrice")
    .innerHTML=priceTable();


    renderOrders(orders);

    renderApplications(apps);

    renderComplaints(complaints);

}


function renderOrders(orders){

    const box=
    document.getElementById("myOrders");


    if(!orders.length){

        box.innerHTML=
        "<div class='item'>No orders yet.</div>";

        return;

    }


    box.innerHTML=
    orders.map(o=>{

        let preview="";

        if(o.preview){

            preview=`

            <div class="preview">

            <b>Final Preview</b>

            <br>

            <a
            href="${escapeHTML(o.preview)}"
            target="_blank"
            style="color:#5daaff">
            Open Preview
            </a>

            `;

            if(o.status==="Preview Sent"){

                preview+=`

                <div class="actions">

                <button
                onclick="acceptPreview('${o.id}')">
                Accept Preview
                </button>

                <button
                onclick="rejectPreview('${o.id}')">
                Reject Preview
                </button>

                </div>

                `;

            }

            preview+=`</div>`;

        }


        return `

        <div class="item">

        <b>${escapeHTML(o.id)}</b>

        <br>

        Service:
        ${escapeHTML(o.service)}

        <br>

        Delivery:
        ${escapeHTML(o.tier)}

        <br>

        Price:
        Rs. ${o.price}

        <br>

        Advance:
        Rs. ${o.advance}

        <br>

        Remaining:
        Rs. ${o.remaining}

        <br><br>

        Status:
        <span class="badge">
        ${escapeHTML(o.status)}
        </span>

        <br>

        First Payment:
        <span class="badge">
        ${escapeHTML(o.firstPayment)}
        </span>

        <br>

        Last Payment:
        <span class="badge">
        ${escapeHTML(o.lastPayment)}
        </span>

        ${preview}

        </div>

        `;

    }).join("");

}


function renderApplications(apps){

    const box=
    document.getElementById("myApplications");


    if(!apps.length){

        box.innerHTML=
        "<div class='item'>No applications yet.</div>";

        return;

    }


    box.innerHTML=
    apps.map(a=>`

    <div class="item">

    <b>${escapeHTML(a.id)}</b>

    <br>

    ${escapeHTML(a.type)}

    <br>

    Status:
    <span class="badge">
    ${escapeHTML(a.status)}
    </span>

    <p>
    ${escapeHTML(a.details)}
    </p>

    </div>

    `).join("");

}


function renderComplaints(complaints){

    const box=
    document.getElementById("myComplaints");


    if(!complaints.length){

        box.innerHTML=
        "<div class='item'>No complaints yet.</div>";

        return;

    }


    box.innerHTML=
    complaints.map(c=>`

    <div class="item">

    <b>${escapeHTML(c.id)}</b>

    <br>

    Subject:
    ${escapeHTML(c.subject)}

    <br>

    Status:
    <span class="badge">
    ${escapeHTML(c.status)}
    </span>

    <p>
    ${escapeHTML(c.details)}
    </p>

    </div>

    `).join("");

}


/* ================================
   ORDER
================================ */

function openOrder(){

    if(!currentUser){

        openAuth("login");

        return;

    }


    document
    .getElementById("serviceSelect")
    .innerHTML=
    services.map((s,i)=>
    `<option value="${i}">
    ${escapeHTML(s[0])}
    </option>`
    ).join("");


    updatePrice();


    document
    .getElementById("orderModal")
    .classList.remove("hidden");

}


function updatePrice(){

    const index=
    Number(
        document.getElementById("serviceSelect").value
    ) || 0;

    const tier=
    document.getElementById("tierSelect").value;


    const service=services[index];


    let price=service[1];

    if(tier==="standard")
        price=service[2];

    if(tier==="executive")
        price=service[3];


    const advance=
    Math.round(price*.30);

    const remaining=
    price-advance;


    document.getElementById("price")
    .value="Rs. "+price;

    document.getElementById("advance")
    .value="Rs. "+advance;

    document.getElementById("remaining")
    .value="Rs. "+remaining;

}


document
.getElementById("serviceSelect")
.addEventListener("change",updatePrice);

document
.getElementById("tierSelect")
.addEventListener("change",updatePrice);


document
.getElementById("orderForm")
.addEventListener("submit",function(e){

    e.preventDefault();


    const index=
    Number(
        document.getElementById("serviceSelect").value
    );

    const tier=
    document.getElementById("tierSelect").value;

    const service=
    services[index];


    let price=service[1];

    if(tier==="standard")
        price=service[2];

    if(tier==="executive")
        price=service[3];


    const advance=
    Math.round(price*.30);

    const remaining=
    price-advance;


    const proof=
    document.getElementById("paymentProof").files[0];


    const order={

        id:id("ORD"),

        userId:currentUser.id,

        service:service[0],

        tier:tier,

        price:price,

        advance:advance,

        remaining:remaining,

        transaction:
        document.getElementById("transaction").value,

        paymentProof:
        proof ? proof.name : "",

        details:
        document.getElementById("orderDetails").value,

        status:"Pending",

        firstPayment:"Pending",

        lastPayment:"Pending",

        preview:null,

        finalFile:null,

        created:new Date().toISOString()

    };


    const orders=getDB("orders");

    orders.push(order);

    setDB("orders",orders);


    document
    .getElementById("orderForm")
    .reset();


    closeModal("orderModal");

    toast(
    "Order successfully submitted. Order ID: "+
    order.id
    );

    renderDashboard();

});


/* ================================
   APPLICATION
================================ */

function openApplication(){

    if(!currentUser){

        openAuth("login");

        return;

    }

    document
    .getElementById("applicationModal")
    .classList.remove("hidden");

}


document
.getElementById("applicationForm")
.addEventListener("submit",function(e){

    e.preventDefault();


    const app={

        id:id("APP"),

        userId:currentUser.id,

        type:
        document.getElementById("applicationType").value,

        details:
        document.getElementById("applicationDetails").value,

        status:"Pending",

        created:new Date().toISOString()

    };


    const apps=getDB("applications");

    apps.push(app);

    setDB("applications",apps);


    this.reset();

    closeModal("applicationModal");

    toast(
    "Application successfully submitted. Application ID: "+
    app.id
    );

    renderDashboard();

});


/* ================================
   COMPLAINT
================================ */

function openComplaint(){

    if(!currentUser){

        openAuth("login");

        return;

    }

    document
    .getElementById("complaintModal")
    .classList.remove("hidden");

}


document
.getElementById("complaintForm")
.addEventListener("submit",function(e){

    e.preventDefault();


    const complaint={

        id:id("CMP"),

        userId:currentUser.id,

        subject:
        document.getElementById("complaintSubject").value,

        details:
        document.getElementById("complaintDetails").value,

        status:"Pending",

        created:new Date().toISOString()

    };


    const complaints=getDB("complaints");

    complaints.push(complaint);

    setDB("complaints",complaints);


    this.reset();

    closeModal("complaintModal");

    toast(
    "Complaint successfully submitted. Complaint Number: "+
    complaint.id
    );

    renderDashboard();

});


/* ================================
   ADMIN PANEL
================================ */

function openAdmin(){

    document
    .getElementById("adminModal")
    .classList.remove("hidden");

    renderAdmin();

}


function renderAdmin(){

    const users=getDB("users");

    const orders=getDB("orders");

    const apps=getDB("applications");

    const complaints=getDB("complaints");


    let html=`

    <div class="stats">

    <div class="stat">
    Users
    <b>${users.length}</b>
    </div>

    <div class="stat">
    Orders
    <b>${orders.length}</b>
    </div>

    <div class="stat">
    Applications
    <b>${apps.length}</b>
    </div>

    <div class="stat">
    Complaints
    <b>${complaints.length}</b>
    </div>

    </div>


    <div class="panel">

    <h3>User Management</h3>

    <div class="list">

    `;


    users.forEach(u=>{

        html+=`

        <div class="item">

        <b>${escapeHTML(u.name)}</b>

        <br>

        Username:
        ${escapeHTML(u.username)}

        <br>

        CNIC:
        ${escapeHTML(u.cnic)}

        <br>

        Mobile:
        ${escapeHTML(u.mobile)}

        <br>

        Email:
        ${escapeHTML(u.email || "-")}

        <br>

        Status:

        <span class="badge">
        ${u.blocked?"Blocked":"Active"}
        </span>


        <div class="actions">

        <button
        onclick="editUser('${u.id}')">
        Edit User
        </button>


        <button
        onclick="blockUser('${u.id}')">

        ${u.blocked?
        "Unblock":
        "Temporary Block"}

        </button>


        <button
        onclick="deleteUser('${u.id}')">

        Delete

        </button>

        </div>

        </div>

        `;

    });


    html+=`

    </div>

    </div>


    <div class="panel">

    <h3>Order Management</h3>

    <div class="list">

    `;


    orders.forEach(o=>{

        html+=`

        <div class="item">

        <b>${escapeHTML(o.id)}</b>

        <br>

        User:
        ${escapeHTML(o.userId)}

        <br>

        Service:
        ${escapeHTML(o.service)}

        <br>

        Price:
        Rs. ${o.price}

        <br>

        Status:
        <span class="badge">
        ${escapeHTML(o.status)}
        </span>

        <br>

        First Payment:
        <span class="badge">
        ${escapeHTML(o.firstPayment)}
        </span>

        <br>

        Last Payment:
        <span class="badge">
        ${escapeHTML(o.lastPayment)}
        </span>


        <div class="actions">

        <button
        onclick="changeOrderStatus('${o.id}','Processing')">
        Processing
        </button>

        <button
        onclick="changeOrderStatus('${o.id}','Approved')">
        Approved
        </button>

        <button
        onclick="changeOrderStatus('${o.id}','Delayed')">
        Delay
        </button>

        <button
        onclick="changeOrderStatus('${o.id}','Rejected')">
        Reject
        </button>

        <button
        onclick="payment('${o.id}','first','Approved')">
        First Payment Approved
        </button>

        <button
        onclick="payment('${o.id}','last','Approved')">
        Last Payment Approved
        </button>

        <button
        onclick="payment('${o.id}','first','Rejected')">
        First Payment Reject
        </button>

        <button
        onclick="sendPreview('${o.id}')">
        Send Preview
        </button>

        <button
        onclick="finalFile('${o.id}')">
        Final File
        </button>

        <button
        onclick="deleteOrder('${o.id}')">
        Delete Order
        </button>

        </div>


        ${o.preview?
        `<div class="preview">
        Preview:
        <a href="${escapeHTML(o.preview)}"
        target="_blank"
        style="color:#5daaff">
        Open Preview
        </a>
        </div>`:""}

        </div>

        `;

    });


    html+=`

    </div>

    </div>


    <div class="panel">

    <h3>Applications Management</h3>

    <div class="list">

    `;


    apps.forEach(a=>{

        html+=`

        <div class="item">

        <b>${escapeHTML(a.id)}</b>

        <br>

        ${escapeHTML(a.type)}

        <br>

        User:
        ${escapeHTML(a.userId)}

        <p>
        ${escapeHTML(a.details)}
        </p>

        Status:
        <span class="badge">
        ${escapeHTML(a.status)}
        </span>

        <div class="actions">

        <button onclick="appStatus('${a.id}','Processing')">
        Processing
        </button>

        <button onclick="appStatus('${a.id}','Approved')">
        Approved
        </button>

        <button onclick="appStatus('${a.id}','Rejected')">
        Reject
        </button>

        <button onclick="appStatus('${a.id}','Delayed')">
        Delay
        </button>

        </div>

        </div>

        `;

    });


    html+=`

    </div>

    </div>


    <div class="panel">

    <h3>Complaints Management</h3>

    <div class="list">

    `;


    complaints.forEach(c=>{

        html+=`

        <div class="item">

        <b>${escapeHTML(c.id)}</b>

        <br>

        Subject:
        ${escapeHTML(c.subject)}

        <br>

        User:
        ${escapeHTML(c.userId)}

        <p>
        ${escapeHTML(c.details)}
        </p>

        Status:
        <span class="badge">
        ${escapeHTML(c.status)}
        </span>

        <div class="actions">

        <button onclick="complaintStatus('${c.id}','Processing')">
        Processing
        </button>

        <button onclick="complaintStatus('${c.id}','Resolved')">
        Resolved
        </button>

        <button onclick="complaintStatus('${c.id}','Rejected')">
        Reject
        </button>

        </div>

        </div>

        `;

    });


    html+=`

    </div>

    </div>

    `;


    document
    .getElementById("adminPanel")
    .innerHTML=html;

}


/* ================================
   ADMIN ACTIONS
================================ */

function changeOrderStatus(orderID,status){

    const orders=getDB("orders");

    const order=
    orders.find(o=>o.id===orderID);

    if(!order)return;

    order.status=status;

    setDB("orders",orders);

    toast("Order status updated.");

    renderAdmin();

}


function payment(orderID,type,status){

    const orders=getDB("orders");

    const order=
    orders.find(o=>o.id===orderID);

    if(!order)return;

    if(type==="first")
        order.firstPayment=status;

    if(type==="last")
        order.lastPayment=status;


    setDB("orders",orders);

    toast("Payment status updated.");

    renderAdmin();

}


function sendPreview(orderID){

    const url=
    prompt(
    "Paste Preview URL:"
    );

    if(!url)return;


    const orders=getDB("orders");

    const order=
    orders.find(o=>o.id===orderID);

    if(!order)return;

    order.preview=url;

    order.status="Preview Sent";

    setDB("orders",orders);

    toast("Preview sent to customer.");

    renderAdmin();

}


function finalFile(orderID){

    const url=
    prompt(
    "Paste Final File / Download URL:"
    );

    if(!url)return;


    const orders=getDB("orders");

    const order=
    orders.find(o=>o.id===orderID);

    if(!order)return;

    order.finalFile=url;

    order.status="Completed";

    setDB("orders",orders);

    toast("Final file saved.");

    renderAdmin();

}


function acceptPreview(orderID){

    const orders=getDB("orders");

    const order=
    orders.find(o=>o.id===orderID);

    if(!order)return;

    order.status="Preview Accepted";

    setDB("orders",orders);

    toast(
    "Preview accepted. Remaining payment can now be processed."
    );

    renderDashboard();

}


function rejectPreview(orderID){

    const orders=getDB("orders");

    const order=
    orders.find(o=>o.id===orderID);

    if(!order)return;

    order.status="Preview Rejected";

    setDB("orders",orders);

    toast("Preview rejected.");

    renderDashboard();

}


function deleteOrder(orderID){

    if(!confirm("Delete this order?"))
        return;

    const orders=
    getDB("orders")
    .filter(o=>o.id!==orderID);

    setDB("orders",orders);

    renderAdmin();

}


function editUser(userID){

    const users=getDB("users");

    const user=
    users.find(u=>u.id===userID);

    if(!user)return;


    const name=
    prompt("Name:",user.name);

    if(name===null)return;


    const mobile=
    prompt("Mobile:",user.mobile);

    const email=
    prompt("Email:",user.email || "");


    user.name=name;

    user.mobile=mobile;

    user.email=email;


    setDB("users",users);

    toast("User updated.");

    renderAdmin();

}


function blockUser(userID){

    const users=getDB("users");

    const user=
    users.find(u=>u.id===userID);

    if(!user)return;


    if(user.blocked){

        user.blocked=false;

        user.blockUntil=null;

        setDB("users",users);

        toast("User unblocked.");

        renderAdmin();

        return;

    }


    const seconds=
    prompt(
    "Block duration in seconds. Example: 3600 = 1 hour"
    );

    if(seconds===null)return;


    const sec=Number(seconds);

    if(!Number.isFinite(sec)||sec<1){

        toast("Invalid duration.");

        return;

    }


    user.blocked=true;

    user.blockUntil=
    Date.now()+sec*1000;


    setDB("users",users);

    toast("User temporarily blocked.");

    renderAdmin();

}


function deleteUser(userID){

    if(!confirm("Delete this user permanently?"))
        return;


    const users=
    getDB("users")
    .filter(u=>u.id!==userID);

    setDB("users",users);

    renderAdmin();

}


function appStatus(appID,status){

    const apps=getDB("applications");

    const app=
    apps.find(a=>a.id===appID);

    if(!app)return;

    app.status=status;

    setDB("applications",apps);

    renderAdmin();

}


function complaintStatus(complaintID,status){

    const complaints=
    getDB("complaints");

    const complaint=
    complaints.find(c=>c.id===complaintID);

    if(!complaint)return;

    complaint.status=status;

    setDB("complaints",complaints);

    renderAdmin();

}


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

function showPassword(id,button){

    const input=
    document.getElementById(id);

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

        input.type="text";

        button.textContent="🙈";

    }

    else{

        input.type="password";

        button.textContent="👁";

    }

}


/* ================================
   INIT
================================ */

document.getElementById("year")
.textContent=new Date().getFullYear();

language("en");

</script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
76KB
Transfer Size
92KB
Content Size
150.0ms
Dom Content Loaded
308.0ms
First Paint
1,089.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests