ariansyahdedy's picture
Add UI
b0f2d3d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}YouTube Comment Moderator{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<nav class="bg-blue-600 text-white p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<a href="/" class="text-2xl font-bold">
<i class="fas fa-shield-alt mr-2"></i>YouTube Comment Guard
</a>
{% if current_user %}
<div class="flex items-center space-x-4">
<span>Welcome, {{ current_user.username }}</span>
<a href="/logout" class="bg-red-500 hover:bg-red-600 px-3 py-2 rounded">
Logout
</a>
</div>
{% else %}
<a href="/login" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded">
Login
</a>
{% endif %}
</div>
</nav>
<main class="container mx-auto px-4 py-8 flex-grow">
{% block content %}{% endblock %}
</main>
<footer class="bg-gray-800 text-white py-4 text-center">
<p>&copy; 2024 YouTube Comment Guard. All rights reserved.</p>
</footer>
{% block scripts %}{% endblock %}
</body>
</html>