z7y_michael
Decapat
- Katılım
- 26 Şubat 2023
- Mesajlar
- 253
Daha fazla
- Cinsiyet
- Erkek
Merhaba bir web sitesi yapmam lazım, sadece login ve kayıt ol ekranı olacak bunu bir host yüklemem gerek. Okulda bu siteyi deneyeceğiz,
Nasıl yapacağız hiç fikrim yok, yazılım okumuyorum, hoca 100 puan vereceğim deyince aldım direkt.bilenler yardımcı olursa sevinirim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giriş Yap / Kayıt Ol</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
}
.form-container h2 {
text-align: center;
margin-bottom: 20px;
}
.form-container label {
font-size: 14px;
margin-bottom: 5px;
display: block;
}
.form-container input[type="text"],
.form-container input[type="password"],
.form-container input[type="email"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.form-container button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.form-container button:hover {
background-color: #45a049;
}
.form-container .forgot-password,
.form-container .switch-form {
text-align: center;
margin-top: 10px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="form-container" id="login-form">
<h2>Giriş Yap</h2>
<form action="/login" method="post">
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username" required>
<label for="password">Şifre:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Giriş Yap</button>
</form>
<div class="forgot-password">
<a href="#">Şifrenizi mi unuttunuz?</a>
</div>
<div class="switch-form">
<p>Hesabınız yok mu? <a href="#" onclick="toggleForm()">Kayıt Olun</a></p>
</div>
</div>
<div class="form-container" id="register-form" style="display: none;">
<h2>Kayıt Ol</h2>
<form action="/register" method="post">
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required>
<label for="new-username">Kullanıcı Adı:</label>
<input type="text" id="new-username" name="username" required>
<label for="new-password">Şifre:</label>
<input type="password" id="new-password" name="password" required>
<button type="submit">Kayıt Ol</button>
</form>
<div class="switch-form">
<p>Zaten hesabınız var mı? <a href="#" onclick="toggleForm()">Giriş Yapın</a></p>
</div>
</div>
<script>
function toggleForm() {
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
if (loginForm.style.display === 'none') {
loginForm.style.display = 'block';
registerForm.style.display = 'none';
} else {
loginForm.style.display = 'none';
registerForm.style.display = 'block';
}
}
</script>
</body>
</html>
register.html
)login.html
)(app.py)
)100 puan cepte hocam. Masaüstüne sağ tık yaparak yeni seçeneğine tıklayıp bir yazı dosyası (metin belgesi) oluşturunuz ardından dosyanın ismini index.html yapınız. İsmini değiştirdiğiniz html dosyasına sağ tık birlikte aç dedikten sonra not defterini seçmelisiniz eğer gözükmüyorza başka bir uygulama seç seçeneğine tıklayın ve not defterini seçin. Açılacak olan not defterine aşağıda vermiş olduğum kodu yapıştırıp ctrl+s yaptıktan sonra not defterini kapatınız. index.html dosyasına çift tıklayıp siteye erişebilirsiniz. Sen hiç bilmiyorum deyince çok temelden anlattım hocam.Merhaba bir web sitesi yapmam lazım, sadece login ve kayıt ol ekranı olacak bunu bir host yüklemem gerek. Okulda bu siteyi deneyeceğiz,
Nasıl yapacağız hiç fikrim yok, yazılım okumuyorum, hoca 100 puan vereceğim deyince aldım direkt.bilenler yardımcı olursa sevinirim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kayıt Ol & Giriş Yap</title>
<!-- Tailwind CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #e0e0e0;
}
/* Form Container */
.form-container {
width: 350px;
border-radius: 1rem;
background-color: #2c2c2c;
padding: 2.5rem;
color: #e0e0e0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
display: none;
}
.form-container.active {
display: block;
}
.title {
text-align: center;
font-size: 1.75rem;
line-height: 2rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.form {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
}
.input-group {
margin-top: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
width: 100%;
max-width: 300px;
}
.input-group label {
display: block;
color: #aaa;
margin-bottom: 6px;
text-align: left;
}
/* Textbox Tasarımı */
.group {
display: flex;
line-height: 30px;
align-items: center;
position: relative;
width: 100%;
max-width: 300px;
}
.input {
width: 100%;
height: 45px;
line-height: 30px;
padding: 0 1rem;
padding-left: 3rem;
border: 2px solid transparent;
border-radius: 1rem;
outline: none;
background-color: #3a3a3a;
color: #e0e0e0;
transition: .5s ease;
}
.input::placeholder {
color: #94a3b8;
}
.input:focus, .input:hover {
outline: none;
border-color: #1e90ff;
background-color: #3a3a3a;
box-shadow: 0 0 0 5px rgba(30, 144, 255, 0.3);
}
.icon {
position: absolute;
left: 1rem;
fill: none;
width: 1rem;
height: 1rem;
stroke: #aaa;
}
.forgot {
display: flex;
justify-content: flex-end;
font-size: 0.75rem;
line-height: 1rem;
color: #aaa;
margin: 8px 0 14px 0;
}
.forgot a, .signup a {
color: #e0e0e0;
text-decoration: none;
font-size: 14px;
}
.forgot a:hover, .signup a:hover {
text-decoration: underline #509AF8;
}
.sign {
width: 100%;
max-width: 300px;
background-color: #509AF8;
padding: 0.75rem;
text-align: center;
color: #fff;
border: none;
border-radius: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
}
.sign:hover {
background-color: #3b7ed1;
}
.signup {
text-align: center;
font-size: 0.875rem;
line-height: 1rem;
color: #aaa;
margin-top: 1.5rem;
}
</style>
</head>
<body>
<!-- Kayıt Formu -->
<div id="registerForm" class="form-container active">
<p class="title">Kayıt Ol</p>
<form class="form">
<div class="input-group">
<label for="regUsername">Kullanıcı Adı</label>
<div class="group">
<svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<input class="input" type="text" name="username" id="regUsername" placeholder="Kullanıcı adınızı girin">
</div>
</div>
<div class="input-group">
<label for="regEmail">E-posta</label>
<div class="group">
<svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<input class="input" type="email" name="email" id="regEmail" placeholder="E-postanızı girin">
</div>
</div>
<div class="input-group">
<label for="regPassword">Şifre</label>
<div class="group">
<svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<input class="input" type="password" name="password" id="regPassword" placeholder="Şifrenizi girin">
</div>
</div>
<button type="submit" class="sign">Kayıt Ol</button>
</form>
<p class="signup">Hesabın var mı?
<a href="#" onclick="switchForm('login')">Giriş Yap</a>
</p>
</div>
<!-- Giriş Formu -->
<div id="loginForm" class="form-container">
<p class="title">Giriş Yap</p>
<form class="form">
<div class="input-group">
<label for="loginEmail">E-posta</label>
<div class="group">
<svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<input class="input" type="email" name="email" id="loginEmail" placeholder="E-postanızı girin">
</div>
</div>
<div class="input-group">
<label for="loginPassword">Şifre</label>
<div class="group">
<svg stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<input class="input" type="password" name="password" id="loginPassword" placeholder="Şifrenizi girin">
</div>
<div class="forgot">
<a href="#">Şifremi Unuttum?</a>
</div>
</div>
<button type="submit" class="sign">Giriş Yap</button>
</form>
<p class="signup">Hesabın yok mu?
<a href="#" onclick="switchForm('register')">Kayıt Ol</a>
</p>
</div>
<script>
function switchForm(form) {
const registerForm = document.getElementById('registerForm');
const loginForm = document.getElementById('loginForm');
if (form === 'login') {
registerForm.classList.remove('active');
loginForm.classList.add('active');
} else {
loginForm.classList.remove('active');
registerForm.classList.add('active');
}
}
// Yeşil Başarı Bildirimi
function showSuccess(message) {
const notification = document.createElement('div');
notification.setAttribute('role', 'alert');
notification.className = 'bg-green-100 dark:bg-green-900 border-l-4 border-green-500 dark:border-green-700 text-green-900 dark:text-green-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-green-200 dark:hover:bg-green-800 transform hover:scale-105 fixed bottom-4 right-4 z-50';
notification.innerHTML = `
<svg stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-5 w-5 flex-shrink-0 mr-2 text-green-600" xmlns="http://www.w3.org/2000/svg">
<path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<p class="text-xs font-semibold">${message}</p>
`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
}
// Kırmızı Hata Bildirimi
function showError(message) {
const notification = document.createElement('div');
notification.setAttribute('role', 'alert');
notification.className = 'bg-red-100 dark:bg-red-900 border-l-4 border-red-500 dark:border-red-700 text-red-900 dark:text-red-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-red-200 dark:hover:bg-red-800 transform hover:scale-105 fixed bottom-4 right-4 z-50';
notification.innerHTML = `
<svg stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-5 w-5 flex-shrink-0 mr-2 text-red-600" xmlns="http://www.w3.org/2000/svg">
<path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<p class="text-xs font-semibold">${message}</p>
`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
}
// Mavi Bilgi Bildirimi (kullanılmadı ama hazır)
function showInfo(message) {
const notification = document.createElement('div');
notification.setAttribute('role', 'alert');
notification.className = 'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-700 text-blue-900 dark:text-blue-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-blue-200 dark:hover:bg-blue-800 transform hover:scale-105 fixed bottom-4 right-4 z-50';
notification.innerHTML = `
<svg stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-5 w-5 flex-shrink-0 mr-2 text-blue-600" xmlns="http://www.w3.org/2000/svg">
<path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<p class="text-xs font-semibold">${message}</p>
`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
}
// Turuncu Uyarı Bildirimi (kullanılmadı ama hazır)
function showWarning(message) {
const notification = document.createElement('div');
notification.setAttribute('role', 'alert');
notification.className = 'bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 dark:border-yellow-700 text-yellow-900 dark:text-yellow-100 p-2 rounded-lg flex items-center transition duration-300 ease-in-out hover:bg-yellow-200 dark:hover:bg-yellow-800 transform hover:scale-105 fixed bottom-4 right-4 z-50';
notification.innerHTML = `
<svg stroke="currentColor" viewBox="0 0 24 24" fill="none" class="h-5 w-5 flex-shrink-0 mr-2 text-yellow-600" xmlns="http://www.w3.org/2000/svg">
<path d="M13 16h-1v-4h1m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<p class="text-xs font-semibold">${message}</p>
`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
}
// Kullanıcıları kontrol etmek için bir dizi
let users = JSON.parse(localStorage.getItem('users')) || [];
// Kayıt işlemi
document.getElementById('registerForm').querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const username = document.getElementById('regUsername').value;
const email = document.getElementById('regEmail').value;
const password = document.getElementById('regPassword').value;
if (password.length < 6) {
showError('Şifre en az 6 karakter olmalı!');
return;
}
const userExists = users.some(user => user.username === username || user.email === email);
if (userExists) {
showError('Bu kullanıcı adı veya e-posta zaten kayıtlı!');
return;
}
const user = { username, email, password };
users.push(user);
localStorage.setItem('users', JSON.stringify(users));
showSuccess('Kayıt başarılı!');
setTimeout(() => switchForm('login'), 1000);
});
// Giriş işlemi
document.getElementById('loginForm').querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
const storedUser = users.find(user => user.email === email && user.password === password);
if (storedUser) {
showSuccess('Giriş başarılı!');
} else {
showError('E-posta veya şifre yanlış!');
}
});
</script>
</body>
</html>