<!DOCTYPE html> <html> <head> <title>{{ user['username'] }}'s Rolls</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f8; margin: 0; padding: 20px; } .profile, .pulls { background-color: white; padding: 15px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-bottom: 20px; } h1, h2 { margin-top: 0; } ul { list-style-type: none; padding: 0; } li { padding: 10px 0; border-bottom: 1px solid #eee; } .rarity { color: gold; font-weight: bold; margin-left: 8px; } .timestamp { color: #888; font-size: 0.9em; } a { display: inline-block; margin-top: 20px; color: #333; text-decoration: none; background-color: #ddd; padding: 8px 12px; border-radius: 5px; } a:hover { background-color: #bbb; } </style> </head> <body> <div class="profile"> <h1>{{ user['username'] }}'s Gacha Rolls</h1> <p>User ID: {{ user['id'] }}</p> <p>Total Rolls: {{ pulls | length }}</p> </div> <div class="pulls"> <h2>Pull History</h2> <ul> {% for pull in pulls %} <li> <span class="timestamp">{{ pull['timestamp'] }}</span><br> {{ pull['character_name'] }} <span class="rarity">{{ '★' * pull['rarity'] }}</span> </li> {% endfor %} </ul> </div> <a href="{{ url_for('index') }}">← Back to Users</a> </body> </html>