Bu komutları kullanarak giriş yap kayıt ol sayfası oluşturabilirsiniz;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Giriş ve Kayıt Ol Sayfaları</title>
<style>
/* CSS stilleri burada */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.buttons {
display: flex;
justify-content: space-between;
width: 250px;
margin-bottom: calc(40px + 20px);
}
button {
padding: 15px 25px;
font-size: 18px;
margin: 10px;
transition: all 0.3s ease;
border-radius: 15px;
}
#loginButton:hover,
#registerButton:hover {
transform: scale(1.1);
}
#loginButton:focus,
#registerButton:focus {
transform: scale(1.1);
}
.container {
display: none;
text-align: center;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: scale(1.1);
}
.container.show {
display: block;
transform: scale(1.3);
margin-bottom: 20px;
}
input {
display: block;
margin-bottom: 10px;
padding: 10px;
width: 200px;
}
.message {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- Giriş ve Kayıt Ol Butonları -->
<div class="buttons" style="margin-bottom: calc(80px + 20px);">
<button onclick="showForm('loginContainer')" id="loginButton">Giriş Yap</button>
<button onclick="showForm('registerContainer')" id="registerButton">Kayıt Ol</button>
</div>
<!-- Giriş ve Kayıt Ol Formları -->
<div class="container" id="loginContainer">
<form id="loginForm" autocomplete="on" onsubmit="login(event)">
<h2>Giriş Yap</h2>
<input type="email" id="email" name="email" placeholder="E-posta" required>
<input type="password" id="password" name="password" placeholder="Şifre" required>
<button type="submit">Giriş Yap</button>
</form>
</div>
<div class="container" id="registerContainer">
<form id="registerForm" autocomplete="on" onsubmit="register(event)">
<h2>Kayıt Ol</h2>
<input type="email" id="regEmail" name="regEmail" placeholder="E-posta" required>
<input type="password" id="regPassword" name="regPassword" placeholder="Şifre" required>
<input type="text" id="name" name="name" placeholder="İsim" required>
<input type="text" id="surname" name="surname" placeholder="Soyisim" required>
<button type="submit">Kayıt Ol</button>
</form>
</div>
<!-- Mesaj gösterme alanı -->
<div class="message" id="message"></div>
<script>
function showForm(formId) {
var containers = document.getElementsByClassName('container');
for (var i = 0; i < containers.length; i++) {
containers.classList.remove('show');
}
document.getElementById(formId).classList.add('show');
document.getElementById('message').innerText = '';
}
function login(event) {
event.preventDefault();
showMessage('Siteme Hoş Geldin');
// Giriş yapma işlemi burada gerçekleştirilebilir.
}
function register(event) {
event.preventDefault();
showMessage('Kayıt Oluşturuldu');
showForm('loginContainer');
}
function showMessage(message) {
document.getElementById('message').innerText = message;
document.getElementById('message').style.display = 'block';
setTimeout(function() {
document.getElementById('message').innerText = '';
}, 3000);
}
</script>
</body>
</html>
KODLAR BANA AİTTİR!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Giriş ve Kayıt Ol Sayfaları</title>
<style>
/* CSS stilleri burada */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.buttons {
display: flex;
justify-content: space-between;
width: 250px;
margin-bottom: calc(40px + 20px);
}
button {
padding: 15px 25px;
font-size: 18px;
margin: 10px;
transition: all 0.3s ease;
border-radius: 15px;
}
#loginButton:hover,
#registerButton:hover {
transform: scale(1.1);
}
#loginButton:focus,
#registerButton:focus {
transform: scale(1.1);
}
.container {
display: none;
text-align: center;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: scale(1.1);
}
.container.show {
display: block;
transform: scale(1.3);
margin-bottom: 20px;
}
input {
display: block;
margin-bottom: 10px;
padding: 10px;
width: 200px;
}
.message {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- Giriş ve Kayıt Ol Butonları -->
<div class="buttons" style="margin-bottom: calc(80px + 20px);">
<button onclick="showForm('loginContainer')" id="loginButton">Giriş Yap</button>
<button onclick="showForm('registerContainer')" id="registerButton">Kayıt Ol</button>
</div>
<!-- Giriş ve Kayıt Ol Formları -->
<div class="container" id="loginContainer">
<form id="loginForm" autocomplete="on" onsubmit="login(event)">
<h2>Giriş Yap</h2>
<input type="email" id="email" name="email" placeholder="E-posta" required>
<input type="password" id="password" name="password" placeholder="Şifre" required>
<button type="submit">Giriş Yap</button>
</form>
</div>
<div class="container" id="registerContainer">
<form id="registerForm" autocomplete="on" onsubmit="register(event)">
<h2>Kayıt Ol</h2>
<input type="email" id="regEmail" name="regEmail" placeholder="E-posta" required>
<input type="password" id="regPassword" name="regPassword" placeholder="Şifre" required>
<input type="text" id="name" name="name" placeholder="İsim" required>
<input type="text" id="surname" name="surname" placeholder="Soyisim" required>
<button type="submit">Kayıt Ol</button>
</form>
</div>
<!-- Mesaj gösterme alanı -->
<div class="message" id="message"></div>
<script>
function showForm(formId) {
var containers = document.getElementsByClassName('container');
for (var i = 0; i < containers.length; i++) {
containers.classList.remove('show');
}
document.getElementById(formId).classList.add('show');
document.getElementById('message').innerText = '';
}
function login(event) {
event.preventDefault();
showMessage('Siteme Hoş Geldin');
// Giriş yapma işlemi burada gerçekleştirilebilir.
}
function register(event) {
event.preventDefault();
showMessage('Kayıt Oluşturuldu');
showForm('loginContainer');
}
function showMessage(message) {
document.getElementById('message').innerText = message;
document.getElementById('message').style.display = 'block';
setTimeout(function() {
document.getElementById('message').innerText = '';
}, 3000);
}
</script>
</body>
</html>
KODLAR BANA AİTTİR!