| <!DOCTYPE html> |
| <html lang="nso"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Leotša la Sepedi</title> |
| <style> |
| *{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,sans-serif} |
| body{background:#f5f4f0;color:#1a1a1a;min-height:100vh} |
| nav{background:#fff;border-bottom:1px solid #e5e5e0;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px} |
| nav a{text-decoration:none;color:#1a1a1a;font-size:14px;margin-left:12px} |
| .brand{font-weight:600;font-size:16px} |
| .container{max-width:600px;margin:0 auto;padding:24px 16px} |
| .card{background:#fff;border:1px solid #e5e5e0;border-radius:12px;padding:20px;margin-bottom:16px} |
| .btn{display:inline-block;padding:12px 24px;border-radius:8px;border:none;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;text-align:center;width:100%} |
| .btn-pos{background:#d4edda;color:#155724;font-size:18px} |
| .btn-neg{background:#f8d7da;color:#721c24;font-size:18px} |
| .btn-skip{background:#f5f4f0;color:#666;font-size:14px;border:1px solid #e5e5e0} |
| .btn-blue{background:#0d6efd;color:#fff} |
| input,textarea{width:100%;padding:10px 14px;border:1px solid #e5e5e0;border-radius:8px;font-size:15px;margin-bottom:12px} |
| .badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;margin:2px} |
| .fire{background:#fff3cd;color:#856404} |
| .pts{background:#e8f4fd;color:#084298} |
| .progress{height:10px;background:#e5e5e0;border-radius:5px;overflow:hidden;margin:8px 0} |
| .bar{height:100%;background:#198754;border-radius:5px} |
| h1{font-size:22px;font-weight:600;margin-bottom:6px} |
| h2{font-size:18px;font-weight:600;margin-bottom:12px} |
| p{font-size:14px;color:#555;line-height:1.6;margin-bottom:8px} |
| .big{font-size:28px;font-weight:700;color:#1a1a1a} |
| .lbl{font-size:12px;color:#888;margin-top:2px} |
| .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px} |
| .sbox{font-size:20px;font-weight:500;text-align:center;padding:28px 16px;line-height:1.5;border:2px solid #e5e5e0;border-radius:12px;background:#fafaf8;margin-bottom:20px} |
| .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} |
| table{width:100%;border-collapse:collapse} |
| td,th{padding:10px 8px;text-align:left;border-bottom:1px solid #f0f0ec;font-size:14px} |
| th{color:#888;font-size:12px;font-weight:500} |
| .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px} |
| </style> |
| </head> |
| <body> |
| <nav> |
| <span class="brand">🌍 Leotša la Sepedi</span> |
| <div> |
| <a href="/">Home</a> |
| <a href="/vote/">Vote</a> |
| <a href="/contribute/">Add</a> |
| <a href="/leaderboard/">Leaderboard</a> |
| </div> |
| </nav> |
| <div class="container"> |
| {% block content %}{% endblock %} |
| </div> |
| </body> |
| </html> |
|
|
