DNN Members – 100 Records
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: #f8f9fa;
padding: 20px;
}
.table-container {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
table {
margin-bottom: 0;
}
th {
background: #0d6efd;
color: white;
position: sticky;
top: 0;
z-index: 10;
}
.member-photo {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
border: 2px solid #0d6efd;
}
.dnn-id {
font-weight: bold;
color: #0d6efd;
}
.table tbody tr:hover {
background-color: #f1f3f5;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.member-photo {
width: 45px;
height: 45px;
}
th, td {
font-size: 0.9rem;
}
}
DNN Members List (100 Members)
| Photo |
DNN ID |
Full Name |
Mobile Number |
Mandal Name |
Showing 100 members • Click on photo or DNN ID to visit link
// Dummy Mandal Names
const mandals = [
“Hyderabad Central”, “Secunderabad”, “Vijayawada East”, “Guntur Urban”,
“Warangal North”, “Khammam West”, “Kakinada”, “Rajahmundry”,
“Nellore City”, “Tirupati”, “Karimnagar”, “Nizamabad”
];
// Dummy First & Last Names
const firstNames = [“Ramesh”, “Suresh”, “Mahesh”, “Rajesh”, “Krishna”, “Venkatesh”, “Srinivas”, “Prakash”, “Anil”, “Sunil”,
“Priya”, “Lakshmi”, “Geetha”, “Anitha”, “Swathi”, “Padma”, “Divya”, “Shalini”, “Meena”, “Rekha”];
const lastNames = [“Reddy”, “Rao”, “Kumar”, “Naidu”, “Yadav”, “Singh”, “Sharma”, “Patel”, “Gupta”, “Chowdary”,
“Devi”, “Lakshmi”, “Rani”, “Kumari”, “Prasad”];
function generateMembers() {
const tbody = document.getElementById(‘membersTable’);
tbody.innerHTML = ”;
for (let i = 1; i <= 100; i++) {
const id = i.toString().padStart(2, '0'); // 01, 02, …, 100
const first = firstNames[Math.floor(Math.random() * firstNames.length)];
const last = lastNames[Math.floor(Math.random() * lastNames.length)];
const fullName = `${first} ${last}`;
const mobile = `98${Math.floor(1000000 + Math.random() * 9000000)}`;
const mandal = mandals[Math.floor(Math.random() * mandals.length)];
// Random photo from picsum
const photoUrl = `https://picsum.photos/id/${(100 + i) % 100 + 10}/200/200`;
const row = `
|
DNN-${id}
|
${fullName} |
+91 ${mobile} |
${mandal} |
`;
tbody.innerHTML += row;
}
}
// Generate table on page load
window.onload = generateMembers;
