Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
\<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HR Graphics Designer | Professional Graphic Design & Online Services</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#070a10;
--bg2:#0e131c;
--card:#141a24;
--card2:#1a2130;
--gold:#f5c542;
--gold2:#ffe58a;
--blue:#4c9aff;
--purple:#9b6cff;
--green:#21d07a;
--red:#ff5c68;
--text:#fff;
--muted:#aeb7c6;
--line:rgba(255,255,255,.10);
}
html{scroll-behavior:smooth}
body{
font-family:Arial,Helvetica,sans-serif;
background:
radial-gradient(circle at 10% 0%,rgba(245,197,66,.12),transparent 25%),
radial-gradient(circle at 90% 10%,rgba(76,154,255,.10),transparent 25%),
var(--bg);
color:var(--text);
line-height:1.6;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
/* HEADER */
.header{
position:sticky;
top:0;
z-index:999;
background:rgba(7,10,16,.95);
backdrop-filter:blur(15px);
border-bottom:1px solid var(--line);
}
.nav{
max-width:1400px;
margin:auto;
padding:12px 20px;
min-height:76px;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
}
.brand{
display:flex;
align-items:center;
gap:12px;
cursor:pointer;
}
.logo{
width:52px;
height:52px;
border-radius:15px;
background:linear-gradient(135deg,var(--gold),#fff3ae);
color:#111;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:900;
box-shadow:0 0 25px rgba(245,197,66,.2);
}
.brand h2{font-size:17px}
.brand small{color:var(--gold);font-size:11px}
.navlinks{
display:flex;
gap:5px;
flex-wrap:wrap;
justify-content:center;
}
.navlinks button{
background:transparent;
border:1px solid transparent;
color:#ddd;
padding:9px 11px;
border-radius:10px;
font-weight:700;
}
.navlinks button:hover{
background:#1a202b;
color:var(--gold);
border-color:var(--line);
}
.navright{display:flex;gap:7px}
.lang,.login{
padding:10px 12px;
border-radius:10px;
border:1px solid var(--line);
background:#171d27;
color:#fff;
}
.login{
background:var(--gold);
color:#111;
font-weight:800;
}
/* HERO */
.hero{
max-width:1400px;
margin:auto;
padding:80px 20px 65px;
display:grid;
grid-template-columns:1.15fr .85fr;
align-items:center;
gap:60px;
}
.tag{
display:inline-block;
padding:7px 13px;
border-radius:50px;
background:rgba(245,197,66,.09);
border:1px solid rgba(245,197,66,.25);
color:var(--gold2);
font-size:13px;
font-weight:bold;
margin-bottom:20px;
}
.hero h1{
font-size:clamp(40px,6vw,76px);
line-height:1.02;
margin-bottom:20px;
}
.hero h1 span{color:var(--gold)}
.hero p{
max-width:700px;
color:var(--muted);
font-size:17px;
line-height:1.9;
}
.heroBtns{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:28px;
}
.btn{
border:0;
padding:12px 18px;
border-radius:11px;
font-weight:800;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
}
.gold{background:var(--gold);color:#111}
.darkBtn{
background:#181e28;
border:1px solid var(--line);
color:#fff;
}
.blue{background:var(--blue);color:#fff}
.heroPhoto{
display:flex;
justify-content:center;
}
.heroPhoto img{
width:min(410px,90vw);
height:410px;
object-fit:cover;
border-radius:35px;
border:4px solid rgba(245,197,66,.5);
box-shadow:0 30px 80px rgba(0,0,0,.5);
}
/* NOTICE */
.notice{
max-width:1400px;
margin:auto;
padding:0 20px;
}
.noticeBox{
text-align:center;
padding:12px;
border-radius:12px;
background:rgba(245,197,66,.07);
border:1px solid rgba(245,197,66,.17);
color:#ddd;
}
/* SECTIONS */
.section{
max-width:1400px;
margin:auto;
padding:70px 20px;
}
.heading{
text-align:center;
margin-bottom:38px;
}
.heading small{
color:var(--gold);
text-transform:uppercase;
font-weight:900;
}
.heading h2{
font-size:38px;
margin:6px 0;
}
.heading p{color:var(--muted)}
/* ABOUT */
.aboutGrid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
.card{
background:linear-gradient(145deg,var(--card),#0e131b);
border:1px solid var(--line);
border-radius:20px;
padding:25px;
}
.card h3{
color:var(--gold);
margin-bottom:12px;
}
.card p,.card li{color:var(--muted)}
.card ul{padding-left:20px}
.read{
margin-top:13px;
border:0;
background:none;
color:var(--gold);
font-weight:800;
}
.more{display:none;margin-top:12px;color:#cbd3df}
.more.show{display:block}
/* PAYMENT */
.payment{
display:grid;
grid-template-columns:150px 1fr;
gap:30px;
align-items:center;
padding:30px;
border:1px solid rgba(245,197,66,.25);
border-radius:25px;
background:linear-gradient(135deg,#181f2b,#10151d);
}
.payment img{
width:130px;
height:130px;
object-fit:contain;
background:white;
padding:12px;
border-radius:18px;
}
.warning{
margin-top:15px;
padding:13px;
border-left:4px solid var(--gold);
background:rgba(245,197,66,.06);
color:#ddd;
}
/* DELIVERY */
.deliveryGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.delivery{
padding:25px;
border-radius:20px;
background:var(--card);
border:1px solid var(--line);
text-align:center;
}
.delivery h3{margin:8px 0}
.delivery.normal h3{color:#35d979}
.delivery.standard h3{color:#4c9aff}
.delivery.executive h3{color:#a56cff}
.delivery .time{
font-size:21px;
font-weight:900;
color:#fff;
}
.delivery p{color:var(--muted);margin-top:7px}
/* SERVICES */
.serviceGrid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}
.service{
background:var(--card);
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
transition:.25s;
}
.service:hover{
transform:translateY(-5px);
border-color:rgba(245,197,66,.35);
}
.serviceImage{
width:100%;
height:165px;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.serviceImage img{
width:100%;
height:100%;
object-fit:cover;
}
.imageFallback{
display:none;
text-align:center;
color:#111;
font-weight:900;
font-size:17px;
padding:15px;
}
.serviceBody{padding:17px}
.serviceBody h3{font-size:17px;margin-bottom:5px}
.serviceBody p{color:var(--muted);font-size:13px}
.serviceBody .priceLine{
color:var(--gold);
font-weight:800;
margin-top:8px;
}
.serviceActions{
display:flex;
gap:7px;
margin-top:12px;
}
.smallBtn{
flex:1;
border:1px solid var(--line);
background:#1b222d;
color:#fff;
padding:8px;
border-radius:9px;
font-weight:700;
font-size:12px;
}
.smallBtn.order{background:var(--gold);color:#111}
/* PRICE TABLE */
.priceWrap{
overflow-x:auto;
border:1px solid var(--line);
border-radius:18px;
}
.priceTable{
width:100%;
border-collapse:collapse;
min-width:800px;
}
.priceTable th,
.priceTable td{
padding:13px 14px;
border-bottom:1px solid var(--line);
text-align:left;
}
.priceTable th{
background:#1b222d;
color:var(--gold);
}
.priceTable td{color:#d5dbe4}
.priceTable tr:hover td{background:rgba(255,255,255,.025)}
.priceTable td:nth-child(2){color:#35d979;font-weight:800}
.priceTable td:nth-child(3){color:#4c9aff;font-weight:800}
.priceTable td:nth-child(4){color:#b07cff;font-weight:800}
/* SPECIAL */
.specialGrid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
.special{
display:grid;
grid-template-columns:145px 1fr;
gap:20px;
align-items:center;
background:var(--card);
border:1px solid var(--line);
border-radius:22px;
padding:18px;
}
.special img{
width:145px;
height:120px;
object-fit:cover;
background:#fff;
border-radius:15px;
}
.special h3{color:var(--gold)}
.special p{color:var(--muted);font-size:14px;margin:5px 0}
/* CONTACT */
.contactGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.contact{
text-align:center;
padding:28px;
border-radius:20px;
background:var(--card);
border:1px solid var(--line);
}
.contactIcon{font-size:35px;margin-bottom:8px}
.contact p{color:var(--muted);margin:7px 0 15px}
/* MODAL */
.overlay{
position:fixed;
inset:0;
z-index:2000;
background:rgba(0,0,0,.78);
backdrop-filter:blur(8px);
display:none;
padding:20px;
overflow:auto;
}
.overlay.show{
display:flex;
justify-content:center;
align-items:center;
}
.modal{
width:min(1000px,100%);
max-height:93vh;
overflow:auto;
background:#10151e;
border:1px solid var(--line);
border-radius:24px;
padding:30px;
position:relative;
}
.close{
position:absolute;
right:15px;
top:15px;
width:40px;
height:40px;
border:0;
border-radius:50%;
background:#252c38;
color:#fff;
font-size:25px;
}
.modal h2{
color:var(--gold);
margin-bottom:20px;
}
.modalText{
color:#cbd3df;
line-height:1.9;
}
/* FORMS */
.formGrid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}
.field{
display:flex;
flex-direction:column;
gap:6px;
}
.field.full{grid-column:1/-1}
.field label{
color:#dbe1e9;
font-size:13px;
font-weight:800;
}
input,select,textarea{
width:100%;
padding:12px;
background:#080c12;
border:1px solid #29313e;
border-radius:10px;
color:#fff;
outline:none;
}
input:focus,select:focus,textarea:focus{
border-color:var(--gold);
}
textarea{min-height:120px;resize:vertical}
.formButtons{
margin-top:18px;
display:flex;
gap:10px;
flex-wrap:wrap;
}
/* RESULT */
.result{
margin-top:18px;
padding:17px;
background:#151c27;
border:1px solid var(--line);
border-radius:14px;
}
.result strong{
color:var(--gold);
font-size:20px;
}
/* FLOAT WHATSAPP */
.whatsapp{
position:fixed;
right:22px;
bottom:22px;
width:66px;
height:66px;
border-radius:50%;
z-index:1500;
overflow:hidden;
background:#fff;
border:3px solid #fff;
box-shadow:0 12px 35px rgba(0,0,0,.5);
}
.whatsapp img{
width:100%;
height:100%;
object-fit:cover;
}
/* FOOTER */
footer{
background:#05070b;
border-top:1px solid var(--line);
padding:40px 20px;
text-align:center;
}
footer h2{color:var(--gold)}
footer p{color:var(--muted);margin-top:7px}
/* MOBILE */
@media(max-width:1050px){
.navlinks{display:none}
.serviceGrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:850px){
.hero{grid-template-columns:1fr;text-align:center}
.hero p{margin:auto}
.heroBtns{justify-content:center}
.aboutGrid,
.specialGrid{grid-template-columns:1fr}
.serviceGrid{grid-template-columns:repeat(2,1fr)}
.deliveryGrid{grid-template-columns:1fr}
.contactGrid{grid-template-columns:1fr}
}
@media(max-width:600px){
.brand h2,.brand small{display:none}
.nav{padding:10px}
.hero{padding-top:45px}
.heroPhoto img{height:320px}
.serviceGrid{grid-template-columns:1fr}
.payment{grid-template-columns:1fr;text-align:center}
.payment img{margin:auto}
.formGrid{grid-template-columns:1fr}
.field.full{grid-column:auto}
.special{grid-template-columns:1fr}
.special img{width:100%;height:180px}
.modal{padding:23px 17px}
.heading h2{font-size:30px}
}
</style>
</head>
<body>
<!-- HEADER -->
<header class="header">
<div class="nav">
<div class="brand" onclick="openModal('homeModal')">
<div class="logo">HR</div>
<div>
<h2>HR Graphics Designer</h2>
<small>Professional Graphic Design & Online Services</small>
</div>
</div>
<nav class="navlinks">
<button onclick="openModal('homeModal')">Home</button>
<button onclick="openModal('aboutModal')">About</button>
<button onclick="openModal('servicesModal')">Services</button>
<button onclick="openModal('pricesModal')">Price List</button>
<button onclick="openModal('jobsModal')">Jobs</button>
<button onclick="openModal('contactModal')">Contact</button>
</nav>
<div class="navright">
<button class="lang" onclick="toggleUrdu()">اردو / EN</button>
<button class="login" onclick="openModal('loginModal')">Login</button>
</div>
</div>
</header>
<!-- NOTICE -->
<div class="notice">
<div class="noticeBox">
🎨 <b>HR Graphics Designer</b> — Professional Graphic Design & Online Services
</div>
</div>
<!-- HERO -->
<section class="hero">
<div>
<div class="tag">★ HR GRAPHICS DESIGNER</div>
<h1>
Creative Designs.<br>
<span>Professional Results.</span>
</h1>
<p>
Professional Graphic Design & Online Services.
Logo Design, Social Media Posts, YouTube Thumbnails,
CV, Flex, Cards, Photo Editing, Website Design,
Online Job Apply, Forms and Digital Assistance.
</p>
<div class="heroBtns">
<button class="btn gold" onclick="openModal('servicesModal')">
🎨 Explore Services
</button>
<button class="btn darkBtn" onclick="openModal('orderModal')">
🧾 Order Now
</button>
<a class="btn blue"
href="https://wa.me/923237334159"
target="_blank">
💬 WhatsApp
</a>
</div>
</div>
<div class="heroPhoto">
<img
src="https://cdn.phototourl.com/free/2026-09-06-962b27a8-b9e5-4a41-85b4-128778bfd4f7.jpg"
alt="HR Graphics Designer">
</div>
</section>
<!-- ABOUT -->
<section class="section">
<div class="heading">
<small>About Us</small>
<h2>HR Graphics Designer</h2>
<p>Professional Graphic Design & Online Services</p>
</div>
<div class="aboutGrid">
<div class="card">
<h3>🎨 Introduction</h3>
<p>
HR Graphics Designer provides professional graphic design,
digital document and online assistance services.
Our goal is to provide customers with creative,
professional and organized work.
</p>
<button class="read"
onclick="toggleMore('aboutMore')">
مزید تفصیل / Read More
</button>
<div class="more" id="aboutMore">
ہم لوگو ڈیزائن، سوشل میڈیا پوسٹس، YouTube thumbnails،
CV/resume، visiting cards، wedding cards، birthday cards،
flex/banner، photo editing، website design، MS Word،
Excel، PowerPoint، PDF conversion اور مختلف online
application assistance services فراہم کرتے ہیں۔
<br><br>
ہر order کے لیے unique Order ID اور application یا
complaint request کے لیے الگ reference ID رکھی جا سکتی ہے۔
</div>
</div>
<div class="card">
<h3>✅ Why Choose HR Graphics Designer?</h3>
<ul>
<li>Professional and customized designs</li>
<li>Normal, Standard & Executive services</li>
<li>Urgent / Express service available</li>
<li>30% advance + 70% remaining payment</li>
<li>Unique Order ID</li>
<li>Application & Complaint ID</li>
<li>WhatsApp support</li>
<li>Digital delivery</li>
</ul>
</div>
</div>
</section>
<!-- PAYMENT -->
<section class="section">
<div class="heading">
<small>Payment Method</small>
<h2>💳 Payment</h2>
</div>
<div class="payment">
<img
src="https://user30166.na.imgto.link/public/20260906/easypaisa-logo.avif"
alt="Easypaisa">
<div>
<h3>Easypaisa</h3>
<p style="color:var(--muted)">
Payment information should only be taken from the
official HR Graphics Designer website/contact channel.
</p>
<div class="warning">
⚠️ <b>Important:</b>
کسی غیر متعلقہ شخص یا دوسرے account پر payment نہ کریں۔
صرف HR Graphics Designer کی website/contact سے provided
payment details استعمال کریں۔
</div>
</div>
</div>
</section>
<!-- DELIVERY -->
<section class="section">
<div class="heading">
<small>Service Speed</small>
<h2>Delivery Options</h2>
<p>Choose according to your requirement.</p>
</div>
<div class="deliveryGrid">
<div class="delivery normal">
<div style="font-size:35px">🟢</div>
<h3>NORMAL SERVICE</h3>
<div class="time">1–2 Days</div>
<p>Normal service and normal delivery.</p>
</div>
<div class="delivery standard">
<div style="font-size:35px">🔵</div>
<h3>STANDARD SERVICE</h3>
<div class="time">15–20 Hours</div>
<p>Priority professional processing.</p>
</div>
<div class="delivery executive">
<div style="font-size:35px">🟣</div>
<h3>EXECUTIVE / URGENT</h3>
<div class="time">30 Minutes – 1 Hour</div>
<p>Urgent / Express service.</p>
</div>
</div>
<div class="card" style="margin-top:20px">
<h3>⚡ Important Delivery Note</h3>
<p>
Prices may change according to work complexity,
requirements, revisions, size, printing requirements
and special/urgent/hand delivery.
</p>
</div>
</section>
<!-- SERVICES -->
<section class="section">
<div class="heading">
<small>Our Services</small>
<h2>🎨 Graphic Design Services</h2>
<p>Every service can be ordered with your selected package.</p>
</div>
<div class="serviceGrid" id="serviceGrid"></div>
</section>
<!-- GRAPHIC PRICE LIST -->
<section class="section">
<div class="heading">
<small>Price List</small>
<h2>🎨 Graphic Design Services</h2>
<p>Normal / Standard / Executive</p>
</div>
<div class="priceWrap">
<table class="priceTable">
<thead>
<tr>
<th>Service</th>
<th>🟢 Normal</th>
<th>🔵 Standard</th>
<th>🟣 Executive</th>
</tr>
</thead>
<tbody id="graphicPriceTable"></tbody>
</table>
</div>
</section>
<!-- ONLINE PRICE LIST -->
<section class="section">
<div class="heading">
<small>Online Services</small>
<h2>💻 Online & Document Services</h2>
</div>
<div class="priceWrap">
<table class="priceTable">
<thead>
<tr>
<th>Service</th>
<th>🟢 Normal</th>
<th>🔵 Standard</th>
<th>🟣 Executive</th>
</tr>
</thead>
<tbody id="onlinePriceTable"></tbody>
</table>
</div>
</section>
<!-- SPECIAL SERVICES -->
<section class="section">
<div class="heading">
<small>Special Services</small>
<h2>Government / Online Assistance</h2>
</div>
<div class="specialGrid">
<div class="special">
<img
src="https://cdn.phototourl.com/free/2026-09-06-660380b1-9466-4afa-8c2e-f33406d69799.jpg"
alt="CM Punjab e-Bike">
<div>
<h3>🏍️ CM Punjab e-Bike</h3>
<p>
Online application assistance for eligible applicants.
Final eligibility and approval are subject to official
government rules.
</p>
<button class="btn gold"
onclick="openModal('bikeModal')">
Apply / Details
</button>
</div>
</div>
<div class="special">
<img
src="https://cdn.phototourl.com/free/2026-09-06-eb4ea0d3-7e83-4f97-9088-0e8e7034f09c.jpg"
alt="Rahmat Card">
<div>
<h3>❤️ CM Punjab Rahmat Card</h3>
<p>
Online application assistance for eligible beneficiaries,
subject to current official program rules.
</p>
<button class="btn gold"
onclick="openModal('rahmatModal')">
Apply / Details
</button>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="section">
<div class="heading">
<small>Contact</small>
<h2>📞 HR Graphics Designer</h2>
</div>
<div class="contactGrid">
<div class="contact">
<div class="contactIcon">📱</div>
<h3>WhatsApp</h3>
<p>03237334159</p>
<a class="btn gold"
href="https://wa.me/923237334159"
target="_blank">
Chat Now
</a>
</div>
<div class="contact">
<div class="contactIcon">📧</div>
<h3>Email</h3>
<p>hrgraphicsdesigners1@gmail.com</p>
<a class="btn gold"
href="mailto:hrgraphicsdesigners1@gmail.com">
Email Us
</a>
</div>
<div class="contact">
<div class="contactIcon">⚠️</div>
<h3>Complaint</h3>
<p>Register a complaint and receive a Complaint ID.</p>
<button class="btn gold"
onclick="openModal('complaintModal')">
Complaint
</button>
</div>
</div>
</section>
<footer>
<h2>🎨 HR GRAPHICS DESIGNER</h2>
<p>Professional Graphic Design & Online Services</p>
<p>📞 03237334159 | 📧 hrgraphicsdesigners1@gmail.com</p>
<p style="margin-top:15px">
© 2026 HR Graphics Designer — All Rights Reserved.
</p>
</footer>
<!-- FLOATING WHATSAPP -->
<a class="whatsapp"
href="https://wa.me/923237334159"
target="_blank"
title="WhatsApp Help">
<img
src="https://cdn.phototourl.com/free/2026-09-06-549b707e-1b75-4353-9b98-015713344f26.jpg"
alt="WhatsApp">
</a>
<!-- ================= MODALS ================= -->
<!-- HOME MODAL -->
<div class="overlay" id="homeModal">
<div class="modal">
<button class="close" onclick="closeModal('homeModal')">×</button>
<h2>🏠 HR Graphics Designer</h2>
<div class="modalText">
<h3>Professional Graphic Design & Online Services</h3>
<br>
<p>
Welcome to HR Graphics Designer. We provide creative,
professional and customized graphic design and online
services.
</p>
<br>
<p>
Our services include Logo Design, Social Media Posts,
YouTube Thumbnail, CV, Flex, Visiting Cards, Wedding
Cards, Birthday Cards, Photo Editing, Website Design,
MS Word, Excel, PowerPoint and Online Application Assistance.
</p>
<br>
<button class="btn gold"
onclick="closeModal('homeModal');openModal('orderModal')">
🧾 Create New Order
</button>
</div>
</div>
</div>
<!-- ABOUT MODAL -->
<div class="overlay" id="aboutModal">
<div class="modal">
<button class="close" onclick="closeModal('aboutModal')">×</button>
<h2>ℹ️ About HR Graphics Designer</h2>
<div class="modalText">
<p>
HR Graphics Designer is a professional creative and digital
service platform.
</p>
<br>
<p>
We work on customer requirements and provide different
levels of service including Normal, Standard and Executive
/ Urgent.
</p>
<br>
<p>
Normal service generally takes 1–2 Days, Standard service
15–20 Hours, and Executive/Urgent service 30 Minutes–1 Hour,
subject to workload, project complexity and requirements.
</p>
<br>
<p>
Every graphic design order requires a 30% advance payment
and the remaining 70% is payable according to the order terms.
</p>
<br>
<p>
Government-related assistance is a private assistance service.
Final eligibility, approval, selection and disbursement are
handled by the relevant government department.
</p>
</div>
</div>
</div>
<!-- SERVICES MODAL -->
<div class="overlay" id="servicesModal">
<div class="modal">
<button class="close" onclick="closeModal('servicesModal')">×</button>
<h2>🎨 All Services</h2>
<div class="serviceGrid" id="modalServices"></div>
</div>
</div>
<!-- PRICE MODAL -->
<div class="overlay" id="pricesModal">
<div class="modal">
<button class="close" onclick="closeModal('pricesModal')">×</button>
<h2>💰 Complete Price List</h2>
<p style="color:var(--muted);margin-bottom:20px">
🟢 Normal: 1–2 Days |
🔵 Standard: 15–20 Hours |
🟣 Executive: 30 Minutes–1 Hour
</p>
<div class="priceWrap">
<table class="priceTable">
<thead>
<tr>
<th>Service</th>
<th>Normal</th>
<th>Standard</th>
<th>Executive</th>
</tr>
</thead>
<tbody id="modalGraphicPrices"></tbody>
</table>
</div>
<br>
<div class="priceWrap">
<table class="priceTable">
<thead>
<tr>
<th>Online / Document Service</th>
<th>Normal</th>
<th>Standard</th>
<th>Executive</th>
</tr>
</thead>
<tbody id="modalOnlinePrices"></tbody>
</table>
</div>
<br>
<div class="warning">
💰 Prices may change according to work complexity and requirements.
</div>
</div>
</div>
<!-- ORDER MODAL -->
<div class="overlay" id="orderModal">
<div class="modal">
<button class="close" onclick="closeModal('orderModal')">×</button>
<h2>🧾 New Order</h2>
<form onsubmit="createOrder(event)">
<div class="formGrid">
<div class="field">
<label>Full Name</label>
<input id="orderName" required>
</div>
<div class="field">
<label>Mobile Number</label>
<input id="orderMobile" placeholder="03XXXXXXXXX" required>
</div>
<div class="field">
<label>Service</label>
<select id="orderService" onchange="setServicePrice()" required>
<option value="">Select Service</option>
</select>
</div>
<div class="field">
<label>Package</label>
<select id="orderPackage" onchange="setServicePrice()">
<option value="Normal">🟢 Normal</option>
<option value="Standard">🔵 Standard</option>
<option value="Executive">🟣 Executive</option>
</select>
</div>
<div class="field">
<label>Total Amount</label>
<input type="number" id="totalAmount" min="1" required
oninput="calculatePayment()">
</div>
<div class="field">
<label>30% Advance</label>
<input id="advanceAmount" readonly>
</div>
<div class="field">
<label>70% Remaining</label>
<input id="remainingAmount" readonly>
</div>
<div class="field">
<label>Delivery Type</label>
<select id="deliveryType">
<option>Normal</option>
<option>Priority</option>
<option>Urgent / Express</option>
<option>Special / Hand Delivery</option>
</select>
</div>
<div class="field full">
<label>Order Requirements</label>
<textarea id="orderDetails"
placeholder="Write your design requirements..."></textarea>
</div>
</div>
<div class="formButtons">
<button class="btn gold">Create Order ID</button>
<button type="button" class="btn darkBtn"
onclick="closeModal('orderModal')">
Cancel
</button>
</div>
</form>
<div id="orderResult"></div>
</div>
</div>
<!-- JOB MODAL -->
<div class="overlay" id="jobsModal">
<div class="modal">
<button class="close" onclick="closeModal('jobsModal')">×</button>
<h2>💼 Job Application Assistance</h2>
<p class="modalText">
Enter your information for application assistance.
Always verify the job information and deadline from
the relevant official department/source.
</p>
<br>
<form onsubmit="createJob(event)">
<div class="formGrid">
<div class="field">
<label>Applicant Name</label>
<input id="jobName" required>
</div>
<div class="field">
<label>Mobile</label>
<input id="jobMobile" required>
</div>
<div class="field">
<label>CNIC</label>
<input id="jobCNIC">
</div>
<div class="field">
<label>Job Title</label>
<input id="jobTitle" required>
</div>
<div class="field">
<label>Department</label>
<input id="jobDepartment">
</div>
<div class="field">
<label>Qualification</label>
<input id="jobQualification">
</div>
<div class="field full">
<label>Job / Application Details</label>
<textarea id="jobDetails"></textarea>
</div>
</div>
<div class="formButtons">
<button class="btn gold">Create Application ID</button>
</div>
</form>
<div id="jobResult"></div>
</div>
</div>
<!-- BIKE MODAL -->
<div class="overlay" id="bikeModal">
<div class="modal">
<button class="close" onclick="closeModal('bikeModal')">×</button>
<h2>🏍️ CM Punjab e-Bike</h2>
<p class="modalText">
HR Graphics Designer provides private online application
assistance. Eligibility, documents, application opening,
selection and final approval are subject to official Punjab
government rules.
</p>
<br>
<form onsubmit="createSpecialApplication(event,'BIKE')">
<div class="formGrid">
<div class="field">
<label>Student Name</label>
<input id="bikeName" required>
</div>
<div class="field">
<label>Mobile</label>
<input id="bikeMobile" required>
</div>
<div class="field">
<label>CNIC</label>
<input id="bikeCNIC">
</div>
<div class="field">
<label>College / University</label>
<input id="bikeInstitute">
</div>
<div class="field">
<label>District</label>
<input id="bikeDistrict">
</div>
<div class="field">
<label>City</label>
<input id="bikeCity">
</div>
</div>
<div class="formButtons">
<button class="btn gold">Create Application ID</button>
</div>
</form>
<div id="bikeResult"></div>
</div>
</div>
<!-- RAHMAT MODAL -->
<div class="overlay" id="rahmatModal">
<div class="modal">
<button class="close" onclick="closeModal('rahmatModal')">×</button>
<h2>❤️ CM Punjab Rahmat Card</h2>
<p class="modalText">
HR Graphics Designer provides private online application
assistance for eligible beneficiaries. Final eligibility
and approval are determined by the relevant government
department under current official rules.
</p>
<br>
<form onsubmit="createSpecialApplication(event,'RAHMAT')">
<div class="formGrid">
<div class="field">
<label>Applicant Name</label>
<input id="rahmatName" required>
</div>
<div class="field">
<label>Mobile</label>
<input id="rahmatMobile" required>
</div>
<div class="field">
<label>CNIC</label>
<input id="rahmatCNIC">
</div>
<div class="field">
<label>District</label>
<input id="rahmatDistrict">
</div>
<div class="field">
<label>Tehsil</label>
<input id="rahmatTehsil">
</div>
<div class="field">
<label>Category</label>
<select id="rahmatCategory">
<option>Widow</option>
<option>Eligible Child / Other Category</option>
</select>
</div>
</div>
<div class="formButtons">
<button class="btn gold">Create Application ID</button>
</div>
</form>
<div id="rahmatResult"></div>
</div>
</div>
<!-- COMPLAINT -->
<div class="overlay" id="complaintModal">
<div class="modal">
<button class="close" onclick="closeModal('complaintModal')">×</button>
<h2>⚠️ Complaint Registration</h2>
<form onsubmit="createComplaint(event)">
<div class="formGrid">
<div class="field">
<label>Name</label>
<input id="complaintName" required>
</div>
<div class="field">
<label>Mobile</label>
<input id="complaintMobile" required>
</div>
<div class="field">
<label>Order ID</label>
<input id="complaintOrder">
</div>
<div class="field">
<label>Complaint Type</label>
<select id="complaintType">
<option>Order Issue</option>
<option>Payment Issue</option>
<option>Delivery Issue</option>
<option>Design Issue</option>
<option>Other</option>
</select>
</div>
<div class="field full">
<label>Complaint Details</label>
<textarea id="complaintDetails" required></textarea>
</div>
</div>
<div class="formButtons">
<button class="btn gold">Create Complaint ID</button>
</div>
</form>
<div id="complaintResult"></div>
</div>
</div>
<!-- CONTACT MODAL -->
<div class="overlay" id="contactModal">
<div class="modal">
<button class="close" onclick="closeModal('contactModal')">×</button>
<h2>📞 Contact HR Graphics Designer</h2>
<div class="contactGrid">
<div class="contact">
<div class="contactIcon">📱</div>
<h3>WhatsApp</h3>
<p>03237334159</p>
<a class="btn gold"
href="https://wa.me/923237334159"
target="_blank">
WhatsApp
</a>
</div>
<div class="contact">
<div class="contactIcon">📧</div>
<h3>Email</h3>
<p>hrgraphicsdesigners1@gmail.com</p>
<a class="btn gold"
href="mailto:hrgraphicsdesigners1@gmail.com">
Email
</a>
</div>
<div class="contact">
<div class="contactIcon">⚠️</div>
<h3>Complaint</h3>
<p>Register your complaint.</p>
<button class="btn gold"
onclick="closeModal('contactModal');openModal('complaintModal')">
Register
</button>
</div>
</div>
</div>
</div>
<!-- LOGIN -->
<div class="overlay" id="loginModal">
<div class="modal">
<button class="close" onclick="closeModal('loginModal')">×</button>
<h2>🔐 Customer Login</h2>
<form onsubmit="demoLogin(event)">
<div class="formGrid">
<div class="field">
<label>Email / Username</label>
<input id="loginUser" required>
</div>
<div class="field">
<label>Password</label>
<input type="password" id="loginPassword" required>
</div>
</div>
<div class="formButtons">
<button class="btn gold">Login</button>
</div>
</form>
<div id="loginResult"></div>
<p style="color:#777;margin-top:20px;font-size:12px">
Demo front-end only. Real authentication should use
Firebase Authentication or a secure backend.
</p>
</div>
</div>
<script>
/* ============================================
IMAGE URLs
============================================ */
const IMG = {
whatsapp:
"https://cdn.phototourl.com/free/2026-09-06-549b707e-1b75-4353-9b98-015713344f26.jpg",
bike:
"https://cdn.phototourl.com/free/2026-09-06-660380b1-9466-4afa-8c2e-f33406d69799.jpg",
rahmat:
"https://cdn.phototourl.com/free/2026-09-06-eb4ea0d3-7e83-4f97-9088-0e8e7034f09c.jpg",
logo:
"https://cdn.phototourl.com/free/2026-09-06-775207e5-b2e5-4b91-8a9a-a2e3b525294a.jpg",
coffee:
"https://user30166.na.imgto.link/public/20260906/coffee-cup-vector-logo-design-template-premium-coffee-shop-png-images-eps-free-download-pikbest.avif",
customLogo:
"https://user30166.na.imgto.link/public/20260906/segment.avif",
shirt:
"https://user30166.na.imgto.link/public/20260906/custom-polo-shirt-design-your-own-text-logo-photo-name-customized-personalized-polo-shirts-for-men-women-front-back-print.avif",
social:
"https://user30166.na.imgto.link/public/20260906/541065342758271237.avif",
cv:
"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",
payment:
"https://user30166.na.imgto.link/public/20260906/easypaisa-logo.avif",
notification:
"https://user30166.na.imgto.link/public/20260906/notification-icon-free-png-svg-1594277-noun-project.avif",
photo:
"https://user30166.na.imgto.link/public/20260906/527343437640138290.avif",
word:
"https://user30166.na.imgto.link/public/20260906/get-all-the-help-you-need-with-microsoft-office.avif",
website:
"https://user30166.na.imgto.link/public/20260906/web-design-houston-texas.avif",
thumbnail:
"https://user30166.na.imgto.link/public/20260906/288230444923181147.avif",
flex:
"https://user30166.na.imgto.link/public/20260906/flex-print-cmyk-logo-typography-lettering-flex-print-flex-printing-flex-print-logo-png-and-vector-with-transparent-background-for-free-download.avif",
visiting:
"https://user30166.na.imgto.link/public/20260906/583779170494968197.avif",
wedding:
"https://user30166.na.imgto.link/public/20260906/shubh-vivah-hindi-calligraphy-logo-for-wedding-invitation-card-vector-design.avif",
birthday:
"https://user30166.na.imgto.link/public/20260906/premium-happy-birthday-red-typography-text-with-balloons-and-hearts-illustration-happy-birthday-happy-birthday-typography-typography-png-and-vector-with-transparent-background-for-free-download.avif"
};
/* ============================================
PRICE DATA
============================================ */
const graphicServices = [
{
name:"🖼️ Social Media Post",
short:"Social Media Post",
normal:100,
standard:200,
executive:500,
image:IMG.social,
details:"Professional Facebook, Instagram, WhatsApp and other social media promotional post design."
},
{
name:"🎬 YouTube Thumbnail",
short:"YouTube Thumbnail",
normal:150,
standard:250,
executive:600,
image:IMG.thumbnail,
details:"Eye-catching YouTube thumbnail design for videos, channels and promotional content."
},
{
name:"🎨 Logo Design",
short:"Logo Design",
normal:500,
standard:1000,
executive:2000,
image:IMG.logo,
details:"Custom professional logo design for shops, businesses, brands and personal projects."
},
{
name:"💳 1 Visiting Card",
short:"1 Visiting Card",
normal:20,
standard:25,
executive:30,
image:IMG.visiting,
details:"Professional single visiting/business card design."
},
{
name:"📄 Flyer Design",
short:"Flyer Design",
normal:300,
standard:600,
executive:1200,
image:IMG.customLogo,
details:"Promotional flyer design for businesses, events, offers and advertisements."
},
{
name:"📢 Flex / Banner Design",
short:"Flex / Banner Design",
normal:300,
standard:700,
executive:1500,
image:IMG.flex,
details:"Flex and banner design for shops, businesses, events and promotions."
},
{
name:"👕 T-Shirt Design",
short:"T-Shirt Design",
normal:700,
standard:1200,
executive:1800,
image:IMG.shirt,
details:"Custom T-Shirt and clothing design with text, logo, photo and graphics."
},
{
name:"☕ 1 Mug Design",
short:"1 Mug Design",
normal:900,
standard:1200,
executive:1500,
image:IMG.coffee,
details:"Customized mug artwork for gifts, businesses and personal use."
},
{
name:"🏪 Shop Banner Design",
short:"Shop Banner Design",
normal:500,
standard:1000,
executive:2000,
image:IMG.flex,
details:"Professional shop front and promotional banner design."
},
{
name:"📋 Certificate Design",
short:"Certificate Design",
normal:200,
standard:400,
executive:800,
image:IMG.cv,
details:"Professional certificate layout for institutions, events and organizations."
},
{
name:"📱 WhatsApp Status Design",
short:"WhatsApp Status Design",
normal:100,
standard:200,
executive:500,
image:IMG.whatsapp,
details:"Promotional and personal WhatsApp status design."
},
{
name:"🖼️ Photo Editing",
short:"Photo Editing",
normal:100,
standard:300,
executive:700,
image:IMG.photo,
details:"Photo enhancement, cleanup, background editing, resizing and professional corrections."
},
{
name:"✂️ Background Removal",
short:"Background Removal",
normal:50,
standard:100,
executive:300,
image:IMG.photo,
details:"Professional background removal and transparent image preparation."
},
{
name:"📚 Book Cover Design",
short:"Book Cover Design",
normal:500,
standard:1000,
executive:2000,
image:IMG.logo,
details:"Creative front cover design for books, ebooks and publications."
},
{
name:"📰 Brochure Design",
short:"Brochure Design",
normal:500,
standard:1000,
executive:2500,
image:IMG.social,
details:"Professional brochure design for companies, businesses and promotions."
},
{
name:"💌 1 Wedding Card",
short:"1 Wedding Card",
normal:30,
standard:35,
executive:45,
image:IMG.wedding,
details:"Wedding invitation card design with names, date, venue and customized theme."
},
{
name:"🎂 Birthday Card",
short:"Birthday Card",
normal:30,
standard:50,
executive:100,
image:IMG.birthday,
details:"Customized birthday invitation or greeting card design."
},
{
name:"☕ Coffee Logo Design",
short:"Coffee Logo",
normal:500,
standard:1000,
executive:2000,
image:IMG.coffee,
details:"Specialized logo design for coffee shops, cafés and food businesses."
},
{
name:"✨ Custom Logo Design",
short:"Custom Logo",
normal:500,
standard:1000,
executive:2000,
image:IMG.customLogo,
details:"Customized logo based on your own concept, colors and business requirements."
}
];
const onlineServices = [
{
name:"📝 CV / Resume Making",
normal:200,
standard:500,
executive:1000,
image:IMG.cv
},
{
name:"📄 Job Application Assistance",
normal:100,
standard:300,
executive:700,
image:IMG.word
},
{
name:"💼 Online Job Apply",
normal:100,
standard:250,
executive:500,
image:IMG.notification
},
{
name:"🏦 Loan Application Assistance",
normal:200,
standard:500,
executive:1000,
image:IMG.word
},
{
name:"📑 Online Form Filling",
normal:100,
standard:250,
executive:500,
image:IMG.word
},
{
name:"🪪 Government Portal Assistance",
normal:100,
standard:300,
executive:700,
image:IMG.notification
},
{
name:"📄 PDF to Word",
normal:100,
standard:300,
executive:700,
image:IMG.word
},
{
name:"📊 PDF to Excel",
normal:150,
standard:400,
executive:800,
image:IMG.word
},
{
name:"⌨️ Data Entry",
normal:200,
standard:500,
executive:1000,
image:IMG.word
},
{
name:"📝 MS Word Work",
normal:100,
standard:300,
executive:700,
image:IMG.word
},
{
name:"📊 Excel Work",
normal:200,
standard:500,
executive:1000,
image:IMG.word
},
{
name:"📽️ PowerPoint Presentation",
normal:300,
standard:700,
executive:1500,
image:IMG.word
},
{
name:"🔄 File Conversion",
normal:100,
standard:250,
executive:500,
image:IMG.word
},
{
name:"📱 Online Registration",
normal:100,
standard:250,
executive:500,
image:IMG.notification
}
];
/* ============================================
IMAGE FALLBACK
============================================ */
function imageError(img){
img.style.display="none";
const fallback=document.createElement("div");
fallback.className="imageFallback";
fallback.innerHTML="🎨<br>HR Graphics Designer";
img.parentElement.appendChild(fallback);
fallback.style.display="block";
}
/* ============================================
SERVICE CARD
============================================ */
function serviceCard(service,index){
return `
<div class="service">
<div class="serviceImage">
<img
src="${service.image}"
alt="${service.short || service.name}"
onerror="imageError(this)">
</div>
<div class="serviceBody">
<h3>${service.name}</h3>
<p>
Professional customized service according to your
requirements.
</p>
<div class="priceLine">
From Rs. ${service.normal}
</div>
<div class="serviceActions">
<button class="smallBtn"
onclick="showServiceDetails(${index})">
Read More
</button>
<button class="smallBtn order"
onclick="orderThis('${service.name.replace(/'/g,"\\'")}')">
Order
</button>
</div>
</div>
</div>
`;
}
/* ============================================
LOAD SERVICES
============================================ */
function loadServices(){
const grid=document.getElementById("serviceGrid");
const modal=document.getElementById("modalServices");
let html="";
graphicServices.forEach((s,i)=>{
html += serviceCard(s,i);
});
grid.innerHTML=html;
modal.innerHTML=html;
/* order select */
const select=document.getElementById("orderService");
graphicServices.forEach(s=>{
let option=document.createElement("option");
option.value=s.name;
option.textContent=s.name;
select.appendChild(option);
});
/* tables */
loadPriceTable(
"graphicPriceTable",
graphicServices
);
loadPriceTable(
"modalGraphicPrices",
graphicServices
);
loadPriceTable(
"onlinePriceTable",
onlineServices
);
loadPriceTable(
"modalOnlinePrices",
onlineServices
);
}
/* ============================================
PRICE TABLE
============================================ */
function loadPriceTable(id,data){
const el=document.getElementById(id);
if(!el)return;
el.innerHTML=data.map(s=>`
<tr>
<td>${s.name || s.short}</td>
<td>Rs. ${s.normal}</td>
<td>Rs. ${s.standard}</td>
<td>Rs. ${s.executive}</td>
</tr>
`).join("");
}
/* ============================================
MODALS
============================================ */
function openModal(id){
document.getElementById(id).classList.add("show");
document.body.style.overflow="hidden";
}
function closeModal(id){
document.getElementById(id).classList.remove("show");
if(!document.querySelector(".overlay.show")){
document.body.style.overflow="";
}
}
/* click outside = close */
document.querySelectorAll(".overlay").forEach(el=>{
el.addEventListener("click",function(e){
if(e.target===el){
closeModal(el.id);
}
});
});
/* ESC = close */
document.addEventListener("keydown",function(e){
if(e.key==="Escape"){
document.querySelectorAll(".overlay.show")
.forEach(el=>closeModal(el.id));
}
});
/* ============================================
SERVICE DETAILS
============================================ */
function showServiceDetails(index){
const service=graphicServices[index];
alert(
service.name+
"\n\n"+
service.details+
"\n\nNormal: Rs."+service.normal+
"\nStandard: Rs."+service.standard+
"\nExecutive: Rs."+service.executive
);
}
/* ============================================
ORDER SERVICE
============================================ */
function orderThis(name){
openModal("orderModal");
document.getElementById("orderService").value=name;
setServicePrice();
}
/* ============================================
PRICE AUTO SELECT
============================================ */
function setServicePrice(){
const name=document.getElementById("orderService").value;
const packageName=document.getElementById("orderPackage").value;
let service=graphicServices.find(s=>s.name===name);
if(!service)return;
let price=service.normal;
if(packageName==="Standard"){
price=service.standard;
}
if(packageName==="Executive"){
price=service.executive;
}
document.getElementById("totalAmount").value=price;
calculatePayment();
}
/* ============================================
PAYMENT CALCULATOR
============================================ */
function calculatePayment(){
let total=parseFloat(
document.getElementById("totalAmount").value
)||0;
let advance=total*0.30;
let remaining=total*0.70;
document.getElementById("advanceAmount").value=
advance.toFixed(2);
document.getElementById("remainingAmount").value=
remaining.toFixed(2);
}
/* ============================================
UNIQUE ID
============================================ */
function createID(prefix){
const now=new Date();
const date=
now.getFullYear()+
String(now.getMonth()+1).padStart(2,"0")+
String(now.getDate()).padStart(2,"0");
const random=
Math.floor(10000+Math.random()*90000);
return prefix+"-"+date+"-"+random;
}
/* ============================================
CREATE ORDER
============================================ */
function createOrder(e){
e.preventDefault();
const id=createID("HR-ORD");
const order={
id:id,
date:new Date().toLocaleString(),
name:document.getElementById("orderName").value,
mobile:document.getElementById("orderMobile").value,
service:document.getElementById("orderService").value,
package:document.getElementById("orderPackage").value,
total:document.getElementById("totalAmount").value,
advance:document.getElementById("advanceAmount").value,
remaining:document.getElementById("remainingAmount").value,
delivery:document.getElementById("deliveryType").value,
details:document.getElementById("orderDetails").value,
status:"Pending"
};
let orders=
JSON.parse(localStorage.getItem("HR_orders")||"[]");
orders.push(order);
localStorage.setItem(
"HR_orders",
JSON.stringify(orders)
);
document.getElementById("orderResult").innerHTML=`
<div class="result">
<h3>✅ Order Successfully Created</h3>
<p>
Your Order ID:
<strong>${id}</strong>
</p>
<br>
<p>
Service: ${order.service}<br>
Package: ${order.package}<br>
Total: Rs. ${order.total}<br>
30% Advance: Rs. ${order.advance}<br>
70% Remaining: Rs. ${order.remaining}<br>
Delivery: ${order.delivery}<br>
Status: Pending
</p>
<br>
<a
class="btn gold"
target="_blank"
href="https://wa.me/923237334159?text=${encodeURIComponent(
"Hello HR Graphics Designer. My Order ID is "+id
)}">
Send Order ID on WhatsApp
</a>
</div>
`;
}
/* ============================================
JOB APPLICATION
============================================ */
function createJob(e){
e.preventDefault();
const id=createID("JOB");
const data={
id:id,
type:"Job Application",
date:new Date().toLocaleString(),
name:document.getElementById("jobName").value,
mobile:document.getElementById("jobMobile").value,
cnic:document.getElementById("jobCNIC").value,
job:document.getElementById("jobTitle").value,
department:document.getElementById("jobDepartment").value,
qualification:document.getElementById("jobQualification").value,
details:document.getElementById("jobDetails").value,
status:"Pending"
};
let apps=
JSON.parse(localStorage.getItem("HR_applications")||"[]");
apps.push(data);
localStorage.setItem(
"HR_applications",
JSON.stringify(apps)
);
document.getElementById("jobResult").innerHTML=`
<div class="result">
<h3>✅ Application Created</h3>
<p>
Application ID:
<strong>${id}</strong>
</p>
<p style="color:#aaa;margin-top:8px">
Status: Pending
</p>
</div>
`;
}
/* ============================================
BIKE / RAHMAT
============================================ */
function createSpecialApplication(e,type){
e.preventDefault();
let prefix=type==="BIKE"?"BIKE":"RAHMAT";
let id=createID(prefix);
let data={
id:id,
type:type,
date:new Date().toLocaleString(),
status:"Pending"
};
if(type==="BIKE"){
data.name=document.getElementById("bikeName").value;
data.mobile=document.getElementById("bikeMobile").value;
data.cnic=document.getElementById("bikeCNIC").value;
data.institute=document.getElementById("bikeInstitute").value;
data.district=document.getElementById("bikeDistrict").value;
data.city=document.getElementById("bikeCity").value;
}else{
data.name=document.getElementById("rahmatName").value;
data.mobile=document.getElementById("rahmatMobile").value;
data.cnic=document.getElementById("rahmatCNIC").value;
data.district=document.getElementById("rahmatDistrict").value;
data.tehsil=document.getElementById("rahmatTehsil").value;
data.category=document.getElementById("rahmatCategory").value;
}
let apps=
JSON.parse(localStorage.getItem("HR_applications")||"[]");
apps.push(data);
localStorage.setItem(
"HR_applications",
JSON.stringify(apps)
);
let resultId=
type==="BIKE"?"bikeResult":"rahmatResult";
document.getElementById(resultId).innerHTML=`
<div class="result">
<h3>✅ Application Created</h3>
<p>
Application ID:
<strong>${id}</strong>
</p>
<p style="color:#aaa">
Status: Pending
</p>
</div>
`;
}
/* ============================================
COMPLAINT
============================================ */
function createComplaint(e){
e.preventDefault();
const id=createID("CMP");
const complaint={
id:id,
date:new Date().toLocaleString(),
name:document.getElementById("complaintName").value,
mobile:document.getElementById("complaintMobile").value,
orderID:document.getElementById("complaintOrder").value,
type:document.getElementById("complaintType").value,
details:document.getElementById("complaintDetails").value,
status:"Open"
};
let complaints=
JSON.parse(localStorage.getItem("HR_complaints")||"[]");
complaints.push(complaint);
localStorage.setItem(
"HR_complaints",
JSON.stringify(complaints)
);
document.getElementById("complaintResult").innerHTML=`
<div class="result">
<h3>⚠️ Complaint Registered</h3>
<p>
Complaint ID:
<strong>${id}</strong>
</p>
<p style="color:#aaa">
Status: Open
</p>
</div>
`;
}
/* ============================================
LOGIN DEMO
============================================ */
function demoLogin(e){
e.preventDefault();
document.getElementById("loginResult").innerHTML=`
<div class="result">
<h3>✅ Demo Login</h3>
<p>
Frontend demo login completed.
</p>
<p style="color:#aaa;margin-top:7px">
For a real website, connect Firebase Authentication
or a secure backend.
</p>
</div>
`;
}
/* ============================================
READ MORE
============================================ */
function toggleMore(id){
document.getElementById(id)
.classList.toggle("show");
}
/* ============================================
URDU MODE
============================================ */
function toggleUrdu(){
document.body.classList.toggle("urdu");
if(document.body.classList.contains("urdu")){
document.body.style.direction="rtl";
}else{
document.body.style.direction="ltr";
}
}
/* ============================================
START
============================================ */
loadServices();
calculatePayment();
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
18
Requests
3
Domains
123KB
Transfer Size
120KB
Content Size
150.0ms
Dom Content Loaded
492.0ms
First Paint
17,250.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...