<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ログイン - 酒田図鑑</title>
<style>
body {
margin: 0;
font-family: sans-serif;
background: linear-gradient(#6fa8ff, #a7e0ff);
}
.screen {
display: none;
height: 100vh;
text-align: center;
padding-top: 80px;
}
.active {
display: block;
}
h1 {
margin-bottom: 40px;
}
input {
display: block;
margin: 15px auto;
padding: 12px;
width: 70%;
max-width: 280px;
border-radius: 8px;
border: none;
font-size: 16px;
}
button {
margin-top: 20px;
padding: 12px 30px;
border-radius: 20px;
border: none;
font-size: 18px;
cursor: pointer;
}
.back {
position: absolute;
top: 20px;
left: 20px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- トップ画面 -->
<div id="top" class="screen active">
<h1>酒田図鑑</h1>
<button onclick="showScreen('login')">ログイン</button><br>
<button onclick="showScreen('register')">新規登録</button>
</div>
<!-- ログイン画面 -->
<div id="login" class="screen">
<div class="back" onclick="showScreen('top')">←</div>
<h1>酒田図鑑</h1>
<input type="email" id="loginEmail" placeholder="メールアドレス">
<input type="password" id="loginPassword" placeholder="パスワード">
<button onclick="login()">GO!!</button>
</div>
<!-- 新規登録画面 -->
<div id="register" class="screen">
<div class="back" onclick="showScreen('top')">←</div>
<h1>酒田図鑑</h1>
<input type="text" id="nickname" placeholder="ニックネーム">
<input type="email" id="registerEmail" placeholder="メールアドレス">
<input type="password" id="registerPassword" placeholder="パスワード">
<button onclick="register()">OK!!</button>
</div>
<script>
function showScreen(id) {
document.querySelectorAll('.screen').forEach(screen => {
screen.classList.remove('active');
});
document.getElementById(id).classList.add('active');
}
function login() {
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
if (!email || !password) {
alert('未入力の項目があります');
return;
}
alert('ログイン成功（仮）');
// 次の画面へ遷移するならここ
}
function register() {
const nickname = document.getElementById('nickname').value;
const email = document.getElementById('registerEmail').value;
const password = document.getElementById('registerPassword').value;
if (!nickname || !email || !password) {
alert('未入力の項目があります');
return;
}
alert('新規登録完了（仮）');
showScreen('top');
}
</script>
</body>
</html>
