Notes
Notes - notes.io |
{% block content %}
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giriş Yap</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
/* Özelleştirilmiş Tailwind Ayarları */
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%),
url("{% static 'images/mapAI.webp' %}") no-repeat center center fixed;
background-size: cover;
filter: blur(6px);
z-index: -1;
}
@layer utilities {
.background {
@apply fixed inset-0 w-full h-full bg-no-repeat bg-center bg-cover filter blur-sm z-[-1];
background-image: radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%), url("{% static 'images/mapAI.webp' %}");
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.alert {
@apply hidden opacity-0 transition-opacity transition-transform duration-300 transform -translate-y-2;
}
.alert.show {
@apply block opacity-100 transform translate-y-0;
}
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen relative overflow-hidden font-roboto text-gray-800">
<!-- Arka Plan -->
<div class="background"></div>
<div class="flex flex-col items-center justify-center w-full h-full px-4">
<div class="text-center mb-6 max-w-md w-full">
<img src="{% static 'images/kbb_logo.png' %}" alt="Logo" class="mx-auto w-32 md:w-48">
</div>
<!-- Login Formu -->
<form action="{% url 'login' %}" method="POST" enctype="multipart/form-data" class="bg-white bg-opacity-95 p-8 md:p-12 rounded-xl shadow-lg max-w-md w-full fade-in relative z-10">
<!-- Logo Alanı -->
<div class="text-center mb-6">
<img src="{% static 'images/atlas_twin_logo.jpg' %}" alt="Logo" class="mx-auto w-40 md:w-52">
</div>
<!-- Ek Başlık ve Açıklama -->
<h3 class="text-2xl md:text-3xl font-bold text-center mb-2">Digital Twin'e Hoşgeldin</h3>
<p class="text-center mb-6 text-base md:text-lg">Devam etmek için kullanıcı bilgileri gir.</p>
{% csrf_token %}
<!-- Kullanıcı Adı -->
<div class="relative mb-6">
<i class="fas fa-user absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-600 text-lg pointer-events-none"></i>
<input type="text" id="inputUsername" name="username" class="w-full pl-12 pr-4 py-3 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-800 transition" placeholder="Kullanıcı Adı" required>
</div>
<!-- Şifre -->
<div class="relative mb-6">
<i class="fas fa-lock absolute top-1/2 left-4 transform -translate-y-1/2 text-gray-600 text-lg pointer-events-none"></i>
<input type="password" id="password" name="password" class="w-full pl-12 pr-12 py-3 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-800 transition" placeholder="Şifre" required>
<i class="fas fa-eye absolute top-1/2 right-4 transform -translate-y-1/2 text-gray-600 text-lg cursor-pointer" id="togglePassword"></i>
</div>
<input type="hidden" name="next" value="{{ request.GET.next }}">
<!-- Giriş Butonu -->
<button type="submit" class="w-full bg-gray-800 text-white py-3 rounded-lg font-medium hover:bg-gray-700 transition transform hover:-translate-y-0.5">Giriş Yap</button>
<p class="text-center mt-6">
<button type="button" id="forgotPasswordBtn" class="text-gray-800 hover:text-gray-700 transition underline hover:underline">Şifremi Unuttum</button>
</p>
</form>
<!-- Hidden CSRF Token for AJAX -->
<input type="hidden" id="csrfToken" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
</div>
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- JavaScript ile Şifre Göster/Gizle ve Forgot Password İşlemi -->
<script>
// Şifre göster/gizle fonksiyonu
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');
togglePassword.addEventListener('click', function () {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});
// Forgot Password butonuna tıklama olayı
const forgotPasswordBtn = document.getElementById('forgotPasswordBtn');
forgotPasswordBtn.addEventListener('click', function () {
const username = document.getElementById('inputUsername').value.trim();
const csrfToken = document.getElementById('csrfToken').value;
if (username) {
// AJAX isteği gönder
fetch("{% url 'forgot_password' %}", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
},
body: JSON.stringify({ email: username })
})
.then(response => {
// Durum kodunu kontrol et
if (response.status === 200) {
return response.json(); // Başarı durumu
} else {
// Hata durumunda yanıtı işlemek
return response.json().then(data => {
throw new Error(data.message || 'Bir hata oluştu');
});
}
})
.then(data => {
// Success response işleme
Swal.fire({
icon: 'success',
title: 'Başarılı',
text: data.message
});
})
.catch((error) => {
// Error handling
Swal.fire({
icon: 'error',
title: 'Hata',
text: error.message
});
console.log(error.message); // Konsolda hata mesajını yazdır
});
} else {
// Kullanıcı adı girilmemişse mesaj göster
Swal.fire({
icon: 'warning',
title: 'Uyarı',
text: 'Kullanıcı adı girilmemiş. Lütfen yöneticinizle görüşün.'
});
}
});
</script>
<!-- Custom CSS for SweetAlert2 -->
<style>
.swal2-popup {
background: linear-gradient(135deg, #166ba3, #76139d);
color: #fff;
}
</style>
<!-- **Mesajları Gösterme Bloğu** -->
{% if messages %}
<script>
document.addEventListener('DOMContentLoaded', function() {
{% for message in messages %}
Swal.fire({
icon: "{{ message.tags|default:'info' }}",
title: "{{ message.level_tag|capfirst }}",
text: "{{ message }}",
confirmButtonColor: '#3085d6',
confirmButtonText: 'Tamam'
});
{% endfor %}
});
</script>
{% endif %}
</body>
</html>
{% endblock %}
|
|
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
