<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チュートリアル - 酒田図鑑</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f0f0;
}
.container {
width: 393px;
height: 852px;
position: relative;
background: linear-gradient(37deg, #9FE7FF 0%, #6072F8 100%);
overflow: hidden;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* ヘッダー */
.header-box {
width: 369px;
height: 118px;
position: absolute;
top: 51px;
left: 12px;
background: #072E55;
border-radius: 20px;
border: 5px solid #ADAC92;
}
.header-text {
width: 343px;
height: 93px;
position: absolute;
top: 64px;
left: 25px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: #F8C525;
font-size: 32px;
font-style: italic;
font-weight: 500;
text-transform: uppercase;
word-wrap: break-word;
}
/* カメラ起動ブロック */
.camera-block {
width: 329px;
height: 244px;
position: absolute;
top: 216px;
left: 35.26px;
background: white;
border: 3px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}
/* 撮影日時・場所 */
.input-label {
position: absolute;
left: 4px;
width: 129px;
height: 52px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
color: black;
}
.input-box {
position: absolute;
width: 261px;
height: 62px;
left: 128px;
border: 3px solid black;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.input-box input {
width: 90%;
height: 80%;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
border: none;
outline: none;
text-align: center;
color: rgba(0,0,0,0.7);
}
/* 投稿ボタン */
.submit-button {
position: absolute;
top: 691px;
left: 12px;
width: 369px;
height: 62px;
border: 3px solid black;
background: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
cursor: pointer;
}
/* 下部バーとアイコン代用 */
.bottom-bar {
position: absolute;
top: 786px;
left: -13px;
width: 420px;
height: 66px;
border: 2.5px solid black;
background: white;
}
.bottom-icon {
position: absolute;
cursor: pointer;
font-size: xx-large;
text-align: center;
border-radius: 8px;
}
.icon-left {
width: 48px;
height: 48px;
left: 32px;
top: 795px;
background: gray;
}
.icon-center {
width: 48px;
height: 48px;
left: 171px;
top: 795px;
background: gray;
}
.icon-right {
width: 48px;
height: 48px;
left: 293px;
top: 795px;
background: gray;
}
/*以下、エフェクト用*/
#completeEffect {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
@keyframes collectEffect {
100% { opacity: 1;}
}
.animate-collect {
animation: collectEffect 2.0s ease-out forwards;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const submitButton = document.querySelector(".submit-button");
const completeEffect = document.getElementById("completeEffect");
const completeImage = document.getElementById("completeImage");
submitButton.addEventListener("click", (e) => {
e.preventDefault();
// ===== オーバーレイ表示 =====
completeEffect.style.display = "flex";
// ===== アニメーションを毎回リセット =====
completeImage.classList.remove("animate-collect");
void completeImage.offsetWidth; // 再描画トリガ
completeImage.classList.add("animate-collect");
// ===== アニメーション後に遷移 =====
setTimeout(() => {
completeEffect.style.display = "none";
location.href = "intro.html";
}, 2000); // CSSの animation 時間と合わせる
});
});
</script>
</head>
<body>
<div class="container">
<!-- ヘッダー -->
<div class="header-box"></div>
<div class="header-text">【チュートリアル】<br/>写真を撮影してみよう</div>
<!-- カメラ起動 -->
<button class="camera-block" onclick="location.href='./toukou/photo2.html'">カメラを起動</button>
<!-- 撮影日時 -->
<div class="input-label" style="top:513px;">撮影日時</div>
<div class="input-box" style="top:508px;">
<input type="date" value="2025-05-20">
</div>
<!-- 場所 -->
<div class="input-label" style="top:592px;">場所</div>
<div class="input-box" style="top:587px;">
<input type="text" placeholder="ここに入力">
</div>
<!-- 投稿ボタン -->
<button type="button" class="submit-button">投稿する</button>
</div>
<!-- 以下、エフェクト用 -->
<div id="completeEffect">
<img id="completeImage" width="400px" height="400px" src="./img/kanryo_t.png" alt="complete">
</div>
</body>
</html>
