Spaces:
Sleeping
Sleeping
File size: 5,035 Bytes
f7596a7 aa112b3 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f3975b3 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 c843383 f7596a7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
<!-- templates/login.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Image Uploader</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon/logo-svg.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #4361ee;
--secondary-color: #3f37c9;
--accent-color: #4cc9f0;
--success-color: #22cc88;
--light-bg: #f8f9fa;
--dark-text: #212529;
--card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
--hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
body {
background-color: #f5f7fa;
color: var(--dark-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
max-width: 420px;
width: 100%;
padding: 40px;
background-color: white;
border-radius: 12px;
box-shadow: var(--card-shadow);
margin: 20px;
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-logo {
margin-bottom: 20px;
font-size: 3rem;
color: var(--primary-color);
}
.login-title {
font-weight: 600;
color: var(--dark-text);
margin-bottom: 10px;
}
.login-form {
margin-bottom: 25px;
}
.error-message {
color: #e63946;
margin-bottom: 20px;
padding: 10px;
background-color: rgba(230, 57, 70, 0.1);
border-radius: 8px;
font-size: 0.9rem;
}
.form-control {
border-radius: 8px;
padding: 12px 15px;
border: 1px solid #e0e0e0;
background-color: #f8f9fa;
}
.form-control:focus {
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
border-color: var(--primary-color);
}
.btn {
border-radius: 8px;
padding: 12px 20px;
font-weight: 500;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary:hover, .btn-primary:focus {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
.form-label {
font-weight: 500;
margin-bottom: 8px;
}
.input-group-text {
background-color: #f5f7fa;
border-color: #e0e0e0;
color: #6c757d;
}
.login-footer {
text-align: center;
color: #6c757d;
font-size: 0.85rem;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-header">
<div class="login-logo">
<i class="fas fa-photo-film"></i>
</div>
<h1 class="login-title">Image Uploader</h1>
<p class="text-muted">Sign in to continue</p>
</div>
{% if error %}
<div class="error-message">
<i class="fas fa-exclamation-circle me-2"></i>{{ error }}
</div>
{% endif %}
<form class="login-form" method="post" action="/login">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<input type="text" class="form-control" id="username" name="username" required>
</div>
</div>
<div class="mb-4">
<label for="password" class="form-label">Password</label>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input type="password" class="form-control" id="password" name="password" required>
</div>
</div>
<button type="submit" class="btn btn-primary w-100">
<i class="fas fa-sign-in-alt me-2"></i>Login
</button>
</form>
<div class="login-footer">
<small>©2025 Detomo. All rights reserved</small>
</div>
</div>
</body>
</html> |