<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>酒田図鑑</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #ececec;
font-family: "Helvetica Neue", sans-serif;
}
.phone {
width: 375px;
height: 720px;
border-radius: 32px;
overflow: hidden;
position: relative;
background: linear-gradient(180deg, #6fa8ff, #a7e0ff);
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.screen {
position: absolute;
inset: 0;
padding: 32px 24px;
display: none;
box-sizing: border-box;
text-align: center;
}
.screen.active {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* ロゴ */
.logo-area {
margin-top: 20px;
}
.logo-area img {
display: block;
margin: 0 auto;
}
.main-logo {
width: 340px; /* ← ロゴを一回り大きく */
}
/* ボタン */
.buttons {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 30px;
}
button {
width: 100%;
padding: 16px;
font-size: 18px;
border-radius: 26px;
border: none;
background: white;
color: #4f7cff;
font-weight: bold;
cursor: pointer;
}
/* 入力欄 */
.form {
margin-top: 40px;
}
input {
width: 100%;
padding: 14px;
margin-top: 12px;
font-size: 16px;
border-radius: 14px;
border: none;
box-sizing: border-box;
}
/* 戻る */
.back {
position: absolute;
top: 18px;
left: 18px;
color: white;
font-size: 20px;
cursor: pointer;
}
/* ホーム：新規登録ロゴボタン */
.register-btn-wrapper {
position: relative;
}
.register-btn {
padding: 22px;
border-radius: 26px;
background: rgba(255,255,255,0.75);
color: transparent;
}
.register-btn-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
pointer-events: none;
}
h2 {
color: white;
}
</style>
</head>
<body>
<div class="phone">
<!-- ホーム -->
<div id="top" class="screen active">
<div class="logo-area">
<img src="logo.png" class="main-logo">
</div>
<div class="buttons">
<button onclick="showScreen('login')">ログイン</button>
<div class="register-btn-wrapper" onclick="showScreen('register')">
<button class="register-btn">新規登録</button>
<img src="Designer (7).png" class="register-btn-logo">
</div>
</div>
</div>
<!-- ログイン -->
<div id="login" class="screen">
<div class="back" onclick="showScreen('top')">←</div>
<h2>ログイン</h2>
<div class="form">
<input type="email" placeholder="メールアドレス">
<input type="password" placeholder="パスワード">
</div>
<div class="buttons">
<button>GO!!</button>
</div>
</div>
<!-- 新規登録 -->
<div id="register" class="screen">
<div class="back" onclick="showScreen('top')">←</div>
<h2>新規登録</h2>
<div class="form">
<input type="text" placeholder="ニックネーム">
<input type="email" placeholder="メールアドレス">
<input type="password" placeholder="パスワード">
</div>
<div class="buttons">
<button>OK!!</button>
</div>
</div>
</div>
<script>
function showScreen(id) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.getElementById(id).classList.add('active');
}
</script>
</body>
</html>
