HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
120x38
3.45 KB
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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Wages People</title>
<style>
:root {
  --bg: #0f172a;
  --card: #1e293b;
  --text: #f8fafc;
  --accent: #3b82f6;
  --border: #334155;
}
.light {
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --accent: #2563eb;
  --border: #e2e8f0;
}
body {
  margin:0; font-family: system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  transition: 0.3s;
}
body.ur {
  direction: rtl;
  font-family: 'Noto Naskh Arabic', 'Urdu Typesetting', serif;
}
header {
  padding: 20px; text-align: center;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.logo { max-width: 120px; margin-bottom: 10px; }
h1 { margin:10px 0 5px; color: var(--accent); }
.container { max-width: 900px; margin: 20px auto; padding: 0 15px; }
.card {
  background: var(--card); padding: 20px; border-radius: 12px;
  border: 1px solid var(--border); margin-bottom: 20px;
}
input, textarea, button {
  width: 100%; padding: 10px; margin: 8px 0;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
}
button {
  background: var(--accent); color: white; border: none;
  cursor: pointer; font-weight: bold;
}
button:hover { opacity: 0.9; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; }
body.ur th, body.ur td { text-align: right; }
.tabs { display: flex; gap: 10px; margin-bottom: 15px; }
.tab { padding: 10px 15px; cursor: pointer; border-radius: 8px; }
.tab.active { background: var(--accent); color: white; }
.hidden { display: none; }
.top-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.theme-btn,.lang-btn { width: auto; padding: 8px 15px; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; }
.member-card { background: var(--bg); padding: 15px; border-radius: 8px; border: 1px solid var(--border); text-align: center; }
.member-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.member-photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
</style>
<link href="https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic&display=swap" rel="stylesheet">
</head>
<body>
<header>
  <img src="logo.png" alt="Daily Wages People Logo" class="logo">
  <h1 id="companyName">Daily Wages People</h1>
  <p id="tagline">Supporting our brotherhood with fair work & fair pay</p>
  <div class="top-bar">
    <button class="lang-btn" onclick="toggleLang()">اردو / English</button>
    <button class="theme-btn" onclick="toggleTheme()">🌙 Toggle Theme</button>
  </div>
</header>

<div class="container">
  <div class="tabs">
    <div class="tab active" onclick="showTab('home')" data-en="Home" data-ur="ہوم">Home</div>
    <div class="tab" onclick="showTab('admin')" data-en="Admin Panel" data-ur="ایڈمن پینل">Admin Panel</div>
  </div>

  <!-- Home Tab -->
  <div id="home" class="tab-content">
    <div class="card">
      <h2 id="aboutTitle" data-en="About Us" data-ur="ہمارے بارے میں">About Us</h2>
      <p id="aboutText" data-en="We connect daily wage workers with honest opportunities. Together we grow stronger."
         data-ur="ہم دیہاڑی دار مزدوروں کو ایماندار مواقع سے جوڑتے ہیں۔ مل کر ہم مضبوط ہوتے ہیں۔">
         We connect daily wage workers with honest opportunities. Together we grow stronger.
      </p>
    </div>

    <div class="card">
      <h2 id="membersTitle" data-en="Our Members" data-ur="ہمارے اراکین">Our Members</h2>
      <div id="publicMembers" class="member-grid"></div>
    </div>

    <div class="card">
      <h3 id="payTitle" data-en="Payment Account" data-ur="ادائیگی کا اکاؤنٹ">Payment Account</h3>
      <p id="accountInfo">UPI: dailywages@upi<br>Bank: Add your details here</p>
    </div>
  </div>

  <!-- Admin Panel -->
  <div id="admin" class="tab-content hidden">
    <div class="card">
      <h2 id="addMemberTitle" data-en="Add Member" data-ur="رکن شامل کریں">Add Member</h2>
      <input id="mName" placeholder="Full Name" data-en="Full Name" data-ur="پورا نام">
      <input id="mNumber" placeholder="Phone Number" data-en="Phone Number" data-ur="فون نمبر">
      <input type="file" id="mPhoto" accept="image/*">
      <textarea id="mSkill" placeholder="Skill / Work Details" data-en="Skill / Work Details" data-ur="ہنر / کام کی تفصیل"></textarea>
      <textarea id="mDetails" placeholder="Address, Notes" data-en="Address, Notes" data-ur="پتہ، نوٹس"></textarea>
      <button id="addBtn" onclick="addMember()" data-en="Add Member" data-ur="رکن شامل کریں">Add Member</button>
    </div>

    <div class="card">
      <h2 id="listTitle" data-en="Members List" data-ur="اراکین کی فہرست">Members List</h2>
      <table id="memberTable"></table>
    </div>

    <div class="card">
      <h2 id="settingsTitle" data-en="Settings" data-ur="ترتیبات">Settings</h2>
      <input id="setCompany" placeholder="Change Company Name" data-en="Change Company Name" data-ur="کمپنی کا نام بدلیں">
      <textarea id="setAccount" placeholder="Change Account/UPI Details" data-en="Change Account/UPI Details" data-ur="اکاؤنٹ/یوپی آئی کی تفصیلات بدلیں"></textarea>
      <button onclick="saveSettings()" data-en="Save Settings" data-ur="ترتیبات محفوظ کریں">Save Settings</button>
    </div>
  </div>
</div>

<script>
let members = JSON.parse(localStorage.getItem('members') || '[]');
let settings = JSON.parse(localStorage.getItem('settings') || '{}');
let currentLang = localStorage.getItem('lang') || 'en';

function toBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

function renderPublicMembers() {
  const container = document.getElementById('publicMembers');
  if(members.length === 0) {
    container.innerHTML = `<p data-en="No members yet." data-ur="ابھی تک کوئی رکن نہیں۔">${currentLang==='ur'?'ابھی تک کوئی رکن نہیں۔':'No members yet.'}</p>`;
    return;
  }
  container.innerHTML = members.map(m => `
    <div class="member-card">
      ${m.photo? `<img src="${m.photo}" alt="${m.name}">` : `<img src="https://via.placeholder.com/80" alt="No Photo">`}
      <strong>${m.name}</strong><br>
      <small style="color:var(--accent)">${m.skill || ''}</small><br>
      <small>${m.details || ''}</small>
    </div>
  `).join('');
}

function renderMembers() {
  const table = document.getElementById('memberTable');
  const delText = currentLang === 'ur'? 'حذف کریں' : 'Delete';
  table.innerHTML = `<tr>
    <th>Photo</th>
    <th data-en="Name" data-ur="نام">${currentLang==='ur'?'نام':'Name'}</th>
    <th data-en="Number" data-ur="نمبر">${currentLang==='ur'?'نمبر':'Number'}</th>
    <th data-en="Skill" data-ur="ہنر">${currentLang==='ur'?'ہنر':'Skill'}</th>
    <th data-en="Action" data-ur="عمل">${currentLang==='ur'?'عمل':'Action'}</th>
  </tr>`;
  members.forEach((m, i) => {
    table.innerHTML += `<tr>
      <td>${m.photo? `<img src="${m.photo}" class="member-photo">` : '-'}</td>
      <td>${m.name}</td>
      <td>${m.number}</td>
      <td>${m.skill || '-'}</td>
      <td><button onclick="deleteMember(${i})">${delText}</button></td>
    </tr>`;
  });
  renderPublicMembers();
}

async function addMember() {
  const name = document.getElementById('mName').value;
  const number = document.getElementById('mNumber').value;
  const skill = document.getElementById('mSkill').value;
  const details = document.getElementById('mDetails').value;
  const photoFile = document.getElementById('mPhoto').files[0];

  if(!name ||!number) return alert(currentLang==='ur'?'نام اور نمبر ضروری ہیں':'Name and Number required');

  let photo = '';
  if(photoFile) {
    photo = await toBase64(photoFile);
  }

  members.push({name, number, skill, details, photo});
  localStorage.setItem('members', JSON.stringify(members));
  renderMembers();

  document.getElementById('mName').value = '';
  document.getElementById('mNumber').value = '';
  document.getElementById('mSkill').value = '';
  document.getElementById('mDetails').value = '';
  document.getElementById('mPhoto').value = '';
}

function deleteMember(i) {
  if(!confirm(currentLang==='ur'?'کیا آپ یقینی ہیں؟':'Are you sure?')) return;
  members.splice(i,1);
  localStorage.setItem('members', JSON.stringify(members));
  renderMembers();
}

function showTab(tab) {
  document.querySelectorAll('.tab-content').forEach(t => t.classList.add('hidden'));
  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
  document.getElementById(tab).classList.remove('hidden');
  document.querySelectorAll('.tab')[tab==='home'?0:1].classList.add('active');
  if(tab === 'home') renderPublicMembers();
}

function toggleTheme() {
  document.body.classList.toggle('light');
}

function toggleLang() {
  currentLang = currentLang === 'en'? 'ur' : 'en';
  document.body.classList.toggle('ur');
  localStorage.setItem('lang', currentLang);

  document.querySelectorAll('[data-en]').forEach(el => {
    el.innerText = currentLang === 'ur'? el.getAttribute('data-ur') : el.getAttribute('data-en');
  });
  document.querySelectorAll('[placeholder]').forEach(el => {
    el.placeholder = currentLang === 'ur'? el.getAttribute('data-ur') : el.getAttribute('data-en');
  });

  renderMembers();
  renderPublicMembers();
}

function saveSettings() {
  settings.company = document.getElementById('setCompany').value || settings.company;
  settings.account = document.getElementById('setAccount').value || settings.account;
  localStorage.setItem('settings', JSON.stringify(settings));
  document.getElementById('companyName').innerText = settings.company || (currentLang==='ur'?'ڈیلی ویجز پیپل':'Daily Wages People');
  document.getElementById('accountInfo').innerText = settings.account || 'Add your details here';
  alert(currentLang==='ur'?'ترتیبات محفوظ ہو گئیں!':'Settings saved!');
}

function loadSettings() {
  if(settings.company) document.getElementById('companyName').innerText = settings.company;
  if(settings.account) document.getElementById('accountInfo').innerText = settings.account;
  if(currentLang === 'ur') toggleLang();
}

loadSettings();
renderMembers();
showTab('home');
</script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
13KB
Transfer Size
16KB
Content Size
219.0ms
Dom Content Loaded
172.0ms
First Paint
235.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