<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Camera Figma Exact</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes collectEffect {
0% { opacity: 0; transform: scale(0.7); }
40% { opacity: 1; transform: scale(1.1); }
70% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.9); }
}
.animate-collect {
animation: collectEffect 1.4s ease-out forwards;
}
</style>
</head>
<body class="flex justify-center bg-gray-100 py-10">
<div class="w-96 h-[852px] relative bg-gradient-to-l from-cyan-200 to-indigo-500 overflow-hidden">
<!-- ミッション -->
<div class="w-96 h-28 left-[12px] top-[51px] absolute bg-sky-950 rounded-[20px] border-[5px] border-stone-400"></div>
<div class="w-80 h-24 left-[25px] top-[64px] absolute text-center text-amber-400 text-3xl">
酒田の大獅子を<br>撮影せよ！
</div>
<!-- 撮影欄（空白部分だけ画像に差し替え） -->
<div
class="w-80 h-60 left-[35.26px] top-[216px] absolute
bg-white border-[3px] border-black overflow-hidden
bg-center bg-cover"
style="background-image: url('IMG_1262.jpeg');">
</div>
<!-- 撮影日時 -->
<div class="w-64 h-16 left-[128px] top-[508px] absolute bg-white border-[3px] border-black"></div>
<input id="dateInput" type="date"
class="w-60 h-16 left-[133px] top-[508px] absolute bg-transparent text-black text-2xl font-bold outline-none" />
<div class="w-32 h-12 left-[4px] top-[513px] absolute text-black text-2xl font-bold">
撮影日時
</div>
<!-- 場所 -->
<div class="w-64 h-16 left-[128px] top-[587px] absolute bg-white border-[3px] border-black"></div>
<div class="w-32 h-12 left-[4px] top-[592px] absolute text-black text-2xl font-bold">
場所
</div>
<input id="locationInput"
class="w-60 h-16 left-[135px] top-[587px] absolute bg-transparent text-black text-2xl font-bold outline-none"
readonly />
<select id="locationSelect"
class="w-60 h-16 left-[135px] top-[587px] absolute bg-transparent text-transparent outline-none">
<option>GPS取得中...</option>
</select>
<!-- 投稿 -->
<div id="submitPost"
class="w-96 h-16 left-[12px] top-[691px] absolute bg-white border-[3px] border-black cursor-pointer">
</div>
<div class="w-96 h-5 left-[19px] top-[714px] absolute text-center text-black text-xl pointer-events-none">
投稿する
</div>
<!-- エフェクト確認 -->
<div id="testEffect"
class="absolute bottom-4 right-4 bg-black text-white px-4 py-2 text-sm rounded cursor-pointer z-40">
エフェクト確認
</div>
<!-- 収集完了エフェクト（最前面） -->
<div id="completeEffect"
class="absolute inset-0 flex items-center justify-center bg-black/40 hidden z-50">
<div id="completeText"
class="text-white text-4xl font-bold scale-75 opacity-0">
収集完了！
</div>
</div>
</div>
<script>
/* 日付 */
dateInput.value = new Date().toISOString().split("T")[0];
/* ===== GPS & 場所取得 ===== */
function setDummyLocations() {
locationSelect.innerHTML = `
<option value="">場所を選択</option>
<option>酒田駅</option>
<option>山居倉庫</option>
<option>日和山公園</option>
<option>本間美術館</option>
`;
}
navigator.geolocation.getCurrentPosition(
async pos => {
try {
const { latitude, longitude } = pos.coords;
const query = `
[out:json][timeout:8];
(
node(around:1500,${latitude},${longitude})["name"];
);
out tags 15;
`;
const res = await fetch("https://overpass-api.de/api/interpreter", {
method: "POST",
body: query
});
const data = await res.json();
locationSelect.innerHTML = '<option value="">場所を選択</option>';
let count = 0;
data.elements.forEach(e => {
if (e.tags?.name && count < 10) {
const opt = document.createElement("option");
opt.value = e.tags.name;
opt.textContent = e.tags.name;
locationSelect.appendChild(opt);
count++;
}
});
if (count === 0) setDummyLocations();
} catch {
setDummyLocations();
}
},
() => setDummyLocations(),
{ enableHighAccuracy: true, timeout: 7000 }
);
/* 場所反映 */
locationSelect.onchange = () => {
locationInput.value = locationSelect.value;
};
/* エフェクト */
function showCompleteEffect() {
completeEffect.classList.remove("hidden");
completeText.classList.remove("animate-collect");
void completeText.offsetWidth;
completeText.classList.add("animate-collect");
setTimeout(() => {
completeEffect.classList.add("hidden");
}, 1400);
}
submitPost.onclick = showCompleteEffect;
testEffect.onclick = showCompleteEffect;
</script>
</body>
</html>
