Skip to content

Commit ff8c2f3

Browse files
kaedeekkaedeek
committed
fix & jsfile add.
1 parent 1a3ca87 commit ff8c2f3

3 files changed

Lines changed: 122 additions & 145 deletions

File tree

‎index.css‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,37 @@ body {
55
color: white;
66
text-align: center;
77
margin: 0;
8-
padding: 0;
8+
padding: 20px;
9+
}
10+
11+
/* 📌 ヘッダー */
12+
.header {
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
gap: 10px;
17+
}
18+
19+
h1 {
20+
font-size: 24px;
21+
}
22+
23+
/* 📌 タブメニュー */
24+
.tab-menu {
25+
display: flex;
26+
justify-content: center;
27+
margin-top: 20px;
928
}
1029

11-
/* 📌 タブボタン */
1230
.tab-button {
1331
padding: 10px 20px;
1432
font-size: 16px;
15-
font-weight: bold;
1633
border: 2px solid white;
1734
background: rgba(255, 255, 255, 0.1);
1835
cursor: pointer;
1936
transition: background 0.3s, border-color 0.3s;
2037
border-radius: 5px;
38+
color: white;
2139
}
2240

2341
.tab-button:hover {
@@ -27,30 +45,26 @@ body {
2745
.tab-button.active {
2846
background: #007bff;
2947
border-color: #0056b3;
30-
color: white;
3148
}
3249

33-
/* 📌 タブの表示切り替え */
50+
/* 📌 情報エリア */
3451
.info-tab {
3552
display: none;
53+
margin-top: 20px;
3654
}
3755

3856
.info-tab.active {
3957
display: block;
4058
}
4159

42-
/* 📌 地震情報カード */
60+
/* 📌 情報カード */
4361
.custom-card {
4462
background: rgba(255, 255, 255, 0.1);
4563
border-radius: 10px;
4664
padding: 20px;
65+
margin: 10px auto;
4766
backdrop-filter: blur(10px);
4867
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
49-
transition: transform 0.3s ease-in-out;
50-
}
51-
52-
.custom-card:hover {
53-
transform: scale(1.05);
5468
}
5569

5670
/* 🚀 ぐるぐる回る地球 */
@@ -59,7 +73,6 @@ body {
5973
animation: spin 8s linear infinite;
6074
}
6175

62-
/* 🎥 アニメーション */
6376
@keyframes spin {
6477
from {
6578
transform: rotate(0deg);
@@ -72,11 +85,7 @@ body {
7285
/* 📱 スマホ対応 */
7386
@media (max-width: 600px) {
7487
h1 {
75-
font-size: 24px;
76-
}
77-
.custom-card {
78-
width: 90%;
79-
padding: 15px;
88+
font-size: 20px;
8089
}
8190
.tab-button {
8291
font-size: 14px;

‎index.html‎

Lines changed: 18 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -8,142 +8,32 @@
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 flex flex-col items-center justify-center min-h-screen font-sans p-4">
11+
<body>
1212

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>
13+
<!-- ヘッダー -->
14+
<div class="header">
15+
<div class="spin-slow">🌍</div>
16+
<h1>最新の地震・津波情報</h1>
1717
</div>
1818

1919
<!-- タブメニュー -->
20-
<div class="flex mt-4 space-x-4">
21-
<button id="tab-earthquake" class="tab-button active">地震情報</button>
22-
<button id="tab-tsunami" class="tab-button">津波情報</button>
20+
<div class="tab-menu">
21+
<button class="tab-button active" data-tab="earthquake">地震情報</button>
22+
<button class="tab-button" data-tab="tsunami">津波情報</button>
2323
</div>
2424

25-
<!-- 情報エリア -->
26-
<div id="earthquake-info" class="info-tab"></div>
27-
<div id="tsunami-info" class="info-tab hidden"></div>
28-
29-
<footer class="mt-4 text-sm text-gray-400">Developer By Kaede</footer>
30-
31-
<script>
32-
// 📌 震度の変換マップ
33-
function convertIntensity(scale) {
34-
const intensityMap = {
35-
10: '震度1', 20: '震度2', 30: '震度3',
36-
40: '震度4', 45: '震度5弱', 50: '震度5強',
37-
55: '震度6弱', 60: '震度6強', 70: '震度7'
38-
};
39-
return intensityMap[scale] || '情報なし';
40-
}
41-
42-
// 📌 日時のフォーマット処理
43-
function formatDateTime(dateString) {
44-
try {
45-
const date = new Date(dateString);
46-
if (isNaN(date.getTime())) return '情報なし';
47-
return date.toLocaleString('ja-JP', {
48-
year: 'numeric', month: '2-digit', day: '2-digit',
49-
hour: '2-digit', minute: '2-digit', second: '2-digit'
50-
});
51-
} catch (error) {
52-
console.error('日時の変換エラー:', error);
53-
return '情報なし';
54-
}
55-
}
56-
57-
// 📌 震度ごとのボーダーカラーを決定
58-
function getBorderClass(intensity) {
59-
if (intensity >= 70) return "border-t-purple-500 border-b-purple-500"; // 震度7
60-
if (intensity >= 60) return "border-t-red-500 border-b-red-500"; // 震度6
61-
if (intensity >= 50) return "border-t-yellow-500 border-b-yellow-500"; // 震度5
62-
return "border-t-gray-600 border-b-gray-600"; // 震度4以下
63-
}
64-
65-
// 📌 地震情報を取得
66-
function fetchEarthquakeInfo() {
67-
fetch('https://api.p2pquake.net/v2/history?codes=551&limit=2')
68-
.then(response => response.json())
69-
.then(data => {
70-
const infoDiv = document.getElementById('earthquake-info');
71-
if (!data || data.length === 0) {
72-
infoDiv.innerHTML = '<p class="text-center">地震情報が見つかりませんでした。</p>';
73-
return;
74-
}
75-
76-
let content = "";
77-
data.forEach(earthquake => {
78-
const hypocenter = earthquake.earthquake?.hypocenter?.name || '情報なし';
79-
const magnitude = earthquake.earthquake?.hypocenter?.magnitude?.toFixed(1) || '情報なし';
80-
const maxIntensity = earthquake.earthquake?.maxScale || 0;
81-
const time = earthquake.earthquake?.time || '情報なし';
82-
const borderClass = getBorderClass(maxIntensity);
83-
84-
content += `
85-
<div class="w-full max-w-md p-4 bg-gray-800 rounded-lg shadow-lg text-center my-2 border-4 ${borderClass}">
86-
<p><strong>震源地:</strong> ${hypocenter}</p>
87-
<p><strong>マグニチュード:</strong> ${magnitude}</p>
88-
<p><strong>最大震度:</strong> ${convertIntensity(maxIntensity)}</p>
89-
<p><strong>発生日時:</strong> ${formatDateTime(time)}</p>
90-
</div>
91-
`;
92-
});
93-
94-
infoDiv.innerHTML = content;
95-
})
96-
.catch(error => {
97-
console.error('エラー:', error);
98-
document.getElementById('earthquake-info').innerHTML = '<p class="text-center">データの取得に失敗しました。</p>';
99-
});
100-
}
101-
102-
// 📌 津波情報を取得
103-
function fetchTsunamiInfo() {
104-
fetch('https://www.data.jma.go.jp/developer/xml/feed/eqvol_l.xml')
105-
.then(response => response.text())
106-
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
107-
.then(data => {
108-
const items = data.querySelectorAll("entry");
109-
let content = "";
110-
111-
items.forEach(item => {
112-
const title = item.querySelector("title")?.textContent || "情報なし";
113-
const link = item.querySelector("link")?.getAttribute("href") || "#";
114-
115-
if (title.includes("津波")) {
116-
content += `
117-
<div class="w-full max-w-md p-4 bg-blue-800 rounded-lg shadow-lg text-center my-2">
118-
<p><strong>${title}</strong></p>
119-
<p><a href="${link}" class="text-blue-300 underline" target="_blank">詳細を見る</a></p>
120-
</div>
121-
`;
122-
}
123-
});
124-
125-
document.getElementById('tsunami-info').innerHTML = content || '<p class="text-center">津波情報はありません。</p>';
126-
})
127-
.catch(error => {
128-
console.error('エラー:', error);
129-
document.getElementById('tsunami-info').innerHTML = '<p class="text-center">データの取得に失敗しました。</p>';
130-
});
131-
}
25+
<!-- 地震情報 -->
26+
<div id="earthquake-info" class="info-tab active">
27+
<p>地震情報を取得中...</p>
28+
</div>
13229

133-
// 📌 初回データ取得
134-
fetchEarthquakeInfo();
135-
fetchTsunamiInfo();
30+
<!-- 津波情報 -->
31+
<div id="tsunami-info" class="info-tab">
32+
<p>津波情報を取得中...</p>
33+
</div>
13634

137-
// 📌 タブ切り替え
138-
document.getElementById('tab-earthquake').addEventListener('click', () => {
139-
document.getElementById('earthquake-info').classList.remove('hidden');
140-
document.getElementById('tsunami-info').classList.add('hidden');
141-
});
35+
<footer>Developer By Kaede</footer>
14236

143-
document.getElementById('tab-tsunami').addEventListener('click', () => {
144-
document.getElementById('earthquake-info').classList.add('hidden');
145-
document.getElementById('tsunami-info').classList.remove('hidden');
146-
});
147-
</script>
37+
<script src="script.js"></script>
14838
</body>
14939
</html>

‎script.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
// タブ切り替え処理
3+
const tabs = document.querySelectorAll(".tab-button");
4+
const contents = document.querySelectorAll(".info-tab");
5+
6+
tabs.forEach(tab => {
7+
tab.addEventListener("click", () => {
8+
tabs.forEach(t => t.classList.remove("active"));
9+
contents.forEach(c => c.classList.remove("active"));
10+
11+
tab.classList.add("active");
12+
document.getElementById(tab.getAttribute("data-tab") + "-info").classList.add("active");
13+
});
14+
});
15+
16+
fetchEarthquakeInfo();
17+
fetchTsunamiInfo();
18+
19+
setInterval(fetchEarthquakeInfo, 300000);
20+
setInterval(fetchTsunamiInfo, 300000);
21+
});
22+
23+
// 📌 震度変換マップ
24+
function convertIntensity(scale) {
25+
const intensityMap = {
26+
10: '震度1', 20: '震度2', 30: '震度3',
27+
40: '震度4', 45: '震度5弱', 50: '震度5強',
28+
55: '震度6弱', 60: '震度6強', 70: '震度7'
29+
};
30+
return intensityMap[scale] || '情報なし';
31+
}
32+
33+
// 📌 地震情報の取得
34+
function fetchEarthquakeInfo() {
35+
fetch('https://api.p2pquake.net/v2/history?codes=551&limit=2')
36+
.then(response => response.json())
37+
.then(data => {
38+
const infoDiv = document.getElementById('earthquake-info');
39+
infoDiv.innerHTML = "";
40+
data.forEach(earthquake => {
41+
const hypocenter = earthquake.earthquake?.hypocenter?.name || '情報なし';
42+
const magnitude = earthquake.earthquake?.hypocenter?.magnitude?.toFixed(1) || '情報なし';
43+
const maxIntensity = earthquake.earthquake?.maxScale || 0;
44+
const time = new Date(earthquake.earthquake?.time).toLocaleString('ja-JP');
45+
46+
infoDiv.innerHTML += `
47+
<div class="custom-card">
48+
<p><strong>震源地:</strong> ${hypocenter}</p>
49+
<p><strong>マグニチュード:</strong> ${magnitude}</p>
50+
<p><strong>最大震度:</strong> ${convertIntensity(maxIntensity)}</p>
51+
<p><strong>発生日時:</strong> ${time}</p>
52+
</div>
53+
`;
54+
});
55+
})
56+
.catch(() => {
57+
document.getElementById('earthquake-info').innerHTML = '<p>データの取得に失敗しました。</p>';
58+
});
59+
}
60+
61+
// 📌 津波情報の取得
62+
function fetchTsunamiInfo() {
63+
fetch('https://www.data.jma.go.jp/developer/xml/feed/eqvol_l.xml')
64+
.then(response => response.text())
65+
.then(xmlText => {
66+
const parser = new DOMParser();
67+
const xml = parser.parseFromString(xmlText, "text/xml");
68+
const items = xml.getElementsByTagName("entry");
69+
const infoDiv = document.getElementById('tsunami-info');
70+
infoDiv.innerHTML = "";
71+
for (let i = 0; i < items.length && i < 2; i++) {
72+
infoDiv.innerHTML += `<div class="custom-card"><p>${items[i].getElementsByTagName("title")[0].textContent}</p></div>`;
73+
}
74+
})
75+
.catch(() => {
76+
document.getElementById('tsunami-info').innerHTML = '<p>データの取得に失敗しました。</p>';
77+
});
78+
}

0 commit comments

Comments
 (0)