<!doctype html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Admin Information</title>
<style>*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}body{background-color:#f8f9fa;color:#333;padding:20px}header{text-align:center;padding:20px 0;background:linear-gradient(135deg,#00b4db,#0083b0);color:#fff;border-radius:10px;margin-bottom:30px}header h1{font-size:2.5em}.admin-section{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.admin-card{background:#fff;border-radius:10px;width:300px;text-align:center;padding:20px;box-shadow:0 4px 10px rgba(0,0,0,.2);transition:transform .3s ease,box-shadow .3s ease}.admin-card:hover{transform:translateY(-5px);box-shadow:0 6px 15px rgba(0,0,0,.3)}.admin-photo img{border-radius:50%;width:100px;height:100px;object-fit:cover;margin-bottom:15px}.admin-name{font-size:1.5em;font-weight:700;color:#005f7a;margin-bottom:10px}.admin-experience,.admin-role{font-size:1em;color:#555;margin-bottom:10px}</style>
</head>
<body>
<header>
<h1>Admin Information</h1>
</header>
<section class=admin-section>
{% for admin in admins %}
<div class=admin-card>
<div class=admin-photo>
<img src="{{ admin.photo }}" alt="Admin Photo">
</div>
<div class=admin-name>{{ admin.name }}</div>
<div class=admin-role>Role: {{ admin.role }}</div>
<div class=admin-experience>Experience: {{ admin.experience }}</div>
</div>
{% endfor %}
</section>
</body>
</html>