"Update templates for improved UI/UX"
This commit is contained in:
@@ -253,15 +253,15 @@
|
||||
<!-- Mercedes-Benz Logo -->
|
||||
<div class="mercedes-logo inline-flex items-center justify-center w-20 h-20 bg-white/10 backdrop-blur-sm rounded-full mb-6 border border-white/20">
|
||||
<svg class="w-10 h-10 text-mercedes-black dark:text-white" viewBox="0 0 80 80" fill="currentColor">
|
||||
<path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
|
||||
C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
|
||||
c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
|
||||
C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9
|
||||
C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40
|
||||
c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
|
||||
C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
|
||||
c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
|
||||
C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9
|
||||
C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40
|
||||
c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl font-bold text-mercedes-black dark:text-white mb-2">
|
||||
Bei MYP Platform anmelden
|
||||
</h2>
|
||||
@@ -273,7 +273,7 @@
|
||||
<div class="security-indicator">
|
||||
<svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</svg>
|
||||
Sichere SSL-Verbindung aktiv
|
||||
</div>
|
||||
</div>
|
||||
@@ -292,7 +292,7 @@
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg class="h-5 w-5 text-mercedes-silver" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
{% if form %}
|
||||
{{ form.email(class="mercedes-input block w-full pl-10 pr-3 py-3 rounded-lg focus:ring-2 focus:ring-mercedes-blue focus:border-mercedes-blue", placeholder="ihre.email@mercedes-benz.com", autocomplete="email") }}
|
||||
@@ -301,7 +301,7 @@
|
||||
class="mercedes-input block w-full pl-10 pr-3 py-3 rounded-lg focus:ring-2 focus:ring-mercedes-blue focus:border-mercedes-blue"
|
||||
placeholder="ihre.email@mercedes-benz.com" autocomplete="email">
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if form and form.email.errors %}
|
||||
<div class="mt-1 text-sm text-mercedes-red">
|
||||
{% for error in form.email.errors %}
|
||||
@@ -309,18 +309,18 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
|
||||
Passwort
|
||||
</label>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg class="h-5 w-5 text-mercedes-silver" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
{% if form %}
|
||||
{{ form.password(class="mercedes-input block w-full pl-10 pr-10 py-3 rounded-lg focus:ring-2 focus:ring-mercedes-blue focus:border-mercedes-blue", placeholder="Ihr Passwort", autocomplete="current-password") }}
|
||||
@@ -366,8 +366,8 @@
|
||||
<input type="checkbox" id="remember_me" name="remember_me"
|
||||
class="w-4 h-4 text-mercedes-blue bg-white dark:bg-slate-800 border-mercedes-silver rounded focus:ring-mercedes-blue focus:ring-2">
|
||||
<label for="remember_me" class="ml-2 text-sm text-mercedes-black dark:text-slate-300">
|
||||
Angemeldet bleiben
|
||||
</label>
|
||||
Angemeldet bleiben
|
||||
</label>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -381,11 +381,11 @@
|
||||
|
||||
<!-- Rate Limiting Warning -->
|
||||
<div id="rate-limit-warning" class="hidden bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
|
||||
<div class="flex">
|
||||
<div class="flex">
|
||||
<svg class="h-5 w-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
||||
</svg>
|
||||
<div class="ml-3">
|
||||
<div class="ml-3">
|
||||
<p class="text-sm text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Sicherheitshinweis:</strong> Bei mehreren fehlgeschlagenen Anmeldeversuchen wird Ihr Konto vorübergehend gesperrt.
|
||||
</p>
|
||||
@@ -405,7 +405,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alternative Actions -->
|
||||
<div class="text-center space-y-4">
|
||||
@@ -436,7 +436,7 @@
|
||||
</svg>
|
||||
Zurück zur Startseite
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -450,7 +450,7 @@
|
||||
const MAX_ATTEMPTS = 5;
|
||||
const LOCKOUT_DURATION = 15 * 60 * 1000; // 15 minutes
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeLoginForm();
|
||||
checkRateLimit();
|
||||
setupFormValidation();
|
||||
@@ -588,7 +588,7 @@
|
||||
document.addEventListener('keypress', function(e) {
|
||||
// Enter key submits form
|
||||
if (e.key === 'Enter' && e.target.form === document.getElementById('loginForm')) {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
document.getElementById('loginForm').dispatchEvent(new Event('submit'));
|
||||
}
|
||||
});
|
||||
@@ -899,8 +899,8 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
${message}
|
||||
</div>
|
||||
`;
|
||||
</div>
|
||||
`;
|
||||
|
||||
input.parentNode.appendChild(errorDiv);
|
||||
|
||||
@@ -917,8 +917,8 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
||||
</svg>
|
||||
${message}
|
||||
</div>
|
||||
`;
|
||||
</div>
|
||||
`;
|
||||
input.parentNode.appendChild(warningDiv);
|
||||
}
|
||||
|
||||
@@ -941,7 +941,7 @@
|
||||
form.reset();
|
||||
|
||||
const inputs = form.querySelectorAll('input');
|
||||
inputs.forEach(input => {
|
||||
inputs.forEach(input => {
|
||||
clearError(input);
|
||||
});
|
||||
|
||||
@@ -981,9 +981,9 @@
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('translate-x-full', 'opacity-0');
|
||||
}, 100);
|
||||
}, 100);
|
||||
|
||||
// Auto-remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
|
||||
Reference in New Issue
Block a user