ariansyahdedy's picture
Initial Commit
a23cfdb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Comment Moderator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Arial', sans-serif;
}
.login-container {
max-width: 400px;
width: 100%;
padding: 2rem;
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.login-header img {
width: 80px;
margin-bottom: 1rem;
}
.btn-youtube {
background-color: #FF0000;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: background-color 0.3s ease;
}
.btn-youtube:hover {
background-color: #CC0000;
color: white;
}
.login-footer {
text-align: center;
margin-top: 1rem;
color: #6c757d;
font-size: 0.8rem;
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-header">
<img src="../static/logo.png" alt="YouTube Comment Moderator">
<h2>YouTube Comment Moderator</h2>
<p class="text-muted">Simplify your comment management</p>
</div>
{% if error %}
<div class="alert alert-danger mb-3">{{ error }}</div>
{% endif %}
<form action="/login" method="post">
<button type="submit" class="btn btn-youtube w-100 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white">
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.246 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
</svg>
Login with YouTube
</button>
</form>
<div class="login-footer">
<p>Securely powered by Google OAuth</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>