Skip to content

Commit d1f1436

Browse files
kaedeekkaedeek
committed
震度によってカードに色を付けるようにした
1 parent 24b373e commit d1f1436

1 file changed

Lines changed: 34 additions & 37 deletions

File tree

‎index.html‎

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,18 @@
88
<link rel="stylesheet" href="index.css">
99
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
1010
</head>
11-
<body class="bg-gray-900 text-white text-center p-4">
12-
<body class="bg-gray-900 text-white flex flex-col items-center justify-center min-h-screen font-sans p-4">
13-
<div class="flex flex-col md:flex-row items-center space-x-0 md:space-x-2 space-y-2 md:space-y-0">
14-
<div class="animate-spin text-4xl sm:text-5xl md:text-6xl">🌍</div>
15-
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold">最新の地震情報</h1>
16-
</div>
11+
<body class="bg-gray-900 text-white flex flex-col items-center justify-center min-h-screen font-sans p-4">
1712

18-
<!-- 地震情報を表示するエリア -->
19-
<div id="earthquake-info">
20-
<p>データ取得中...</p>
13+
<!-- ヘッダー部分 -->
14+
<div class="flex flex-col md:flex-row items-center space-x-0 md:space-x-2 space-y-2 md:space-y-0">
15+
<div class="animate-spin text-4xl sm:text-5xl md:text-6xl">🌍</div>
16+
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold">最新の地震情報</h1>
2117
</div>
2218

23-
<footer class="mt-6 text-sm opacity-70">Developer By Kaede</footer>
19+
<!-- 地震情報を表示するエリア -->
20+
<div id="earthquake-info" class="w-full max-w-md mt-4"></div>
21+
22+
<footer class="mt-4 text-sm text-gray-400">Developer By Kaede</footer>
2423

2524
<script>
2625
// 📌 震度の変換マップ
@@ -48,59 +47,57 @@ <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold">最新の地震情報</h1
4847
}
4948
}
5049

50+
// 📌 震度ごとのボーダーカラーを決定
51+
function getBorderClass(intensity) {
52+
if (intensity >= 70) return "border-t-purple-500 border-b-purple-500"; // 震度7
53+
if (intensity >= 60) return "border-t-red-500 border-b-red-500"; // 震度6
54+
if (intensity >= 50) return "border-t-yellow-500 border-b-yellow-500"; // 震度5
55+
return "border-t-gray-600 border-b-gray-600"; // 震度4以下
56+
}
57+
5158
// 📌 地震情報を取得する関数
5259
function fetchEarthquakeInfo() {
5360
fetch('https://api.p2pquake.net/v2/history?codes=551&limit=2')
5461
.then(response => response.json())
5562
.then(data => {
5663
const infoDiv = document.getElementById('earthquake-info');
5764
if (!data || data.length === 0) {
58-
infoDiv.innerHTML = '<p>地震情報が見つかりませんでした。</p>';
65+
infoDiv.innerHTML = '<p class="text-center">地震情報が見つかりませんでした。</p>';
5966
return;
6067
}
6168

62-
// 最新の地震情報
63-
const latest = data[0];
64-
const previous = data[1] || null;
65-
66-
function formatEarthquake(eq) {
67-
if (!eq || !eq.earthquake) return '<p>情報なし</p>';
68-
const hypocenter = eq.earthquake.hypocenter?.name || '情報なし';
69-
const magnitude = eq.earthquake.hypocenter?.magnitude !== undefined
70-
? eq.earthquake.hypocenter.magnitude.toFixed(1)
71-
: '情報なし';
72-
const maxIntensity = eq.earthquake.maxScale !== null
73-
? convertIntensity(eq.earthquake.maxScale)
74-
: '情報なし';
75-
const time = eq.earthquake.time ? formatDateTime(eq.earthquake.time) : '情報なし';
69+
let content = "";
70+
data.forEach((earthquake, index) => {
71+
const hypocenter = earthquake.earthquake?.hypocenter?.name || '情報なし';
72+
const magnitude = earthquake.earthquake?.hypocenter?.magnitude?.toFixed(1) || '情報なし';
73+
const maxIntensity = earthquake.earthquake?.maxScale || 0;
74+
const time = earthquake.earthquake?.time || '情報なし';
75+
const borderClass = getBorderClass(maxIntensity);
7676

77-
return `
78-
<div class="custom-card p-4 rounded-xl bg-white bg-opacity-10 backdrop-blur-md shadow-md my-4">
77+
content += `
78+
<div class="w-full max-w-md p-4 bg-gray-800 rounded-lg shadow-lg text-center my-2 border-4 ${borderClass}">
7979
<p><strong>震源地:</strong> ${hypocenter}</p>
8080
<p><strong>マグニチュード:</strong> ${magnitude}</p>
81-
<p><strong>最大震度:</strong> ${maxIntensity}</p>
82-
<p><strong>発生日時:</strong> ${time}</p>
81+
<p><strong>最大震度:</strong> ${convertIntensity(maxIntensity)}</p>
82+
<p><strong>発生日時:</strong> ${formatDateTime(time)}</p>
8383
</div>
8484
`;
85-
}
85+
});
8686

87-
infoDiv.innerHTML = `
88-
<h2 class="text-xl font-bold">最新の地震</h2>
89-
${formatEarthquake(latest)}
90-
${previous ? `<h2 class="text-lg mt-6">一つ前の地震</h2>${formatEarthquake(previous)}` : ''}
91-
`;
87+
infoDiv.innerHTML = content;
9288
})
9389
.catch(error => {
9490
console.error('エラー:', error);
95-
document.getElementById('earthquake-info').innerHTML = '<p>データの取得に失敗しました。</p>';
91+
document.getElementById('earthquake-info').innerHTML = '<p class="text-center">データの取得に失敗しました。</p>';
9692
});
9793
}
9894

9995
// 📌 初回データ取得
10096
fetchEarthquakeInfo();
10197

102-
// 📌 5分ごと（300,000ミリ秒）にデータ更新
98+
// 📌 5分ごとにデータ更新
10399
setInterval(fetchEarthquakeInfo, 300000);
104100
</script>
101+
105102
</body>
106103
</html>

0 commit comments

Comments
 (0)