You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
15 lines
1.9 KiB
15 lines
1.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<title>Earthquake Data 2026</title>
|
|
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
|
|
<style>
|
|
body{font-family:Arial;margin:0;padding:20px;background:linear-gradient(135deg,#1a2a6c 0%,#b21f1f 50%,#fdbb2d 100%);}
|
|
.container{max-width:1400px;margin:0 auto;}
|
|
.panel{background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,0.2);margin-bottom:30px;}
|
|
h1{text-align:center;color:#fff;margin-bottom:30px;}
|
|
table{width:100%;border-collapse:collapse;margin-top:20px;}
|
|
th,td{padding:12px;border:1px solid #ddd;text-align:center;}
|
|
th{background:#f5f5f5;}
|
|
</style></head><body><div class='container'><h1>Earthquake Data 2026</h1><div class='panel'><canvas id='magnitudeChart'></canvas></div><div class='panel'><table><tr><th>Time</th><th>Magnitude</th><th>Location</th></tr><tr><td>2026-05-30 20:53:55</td><td>5.0</td><td>Sichuan Aba</td></tr><tr><td>2026-05-29 02:53:55</td><td>4.4</td><td>Yunnan Dali</td></tr><tr><td>2026-05-28 22:53:55</td><td>5.1</td><td>Xinjiang Hotan</td></tr><tr><td>2026-05-27 15:53:55</td><td>5.4</td><td>Qinghai Yushu</td></tr><tr><td>2026-05-26 09:53:55</td><td>6.3</td><td>Tibet Shigatse</td></tr><tr><td>2026-05-25 15:53:55</td><td>5.2</td><td>Gansu Gannan</td></tr><tr><td>2026-05-24 18:53:55</td><td>6.2</td><td>Sichuan Liangshan</td></tr><tr><td>2026-05-23 17:53:55</td><td>4.1</td><td>Yunnan Baoshan</td></tr><tr><td>2026-05-22 11:53:55</td><td>5.6</td><td>Xinjiang Kizilsu</td></tr><tr><td>2026-05-21 19:53:55</td><td>5.2</td><td>Qinghai Haixi</td></tr></table></div></div><script>const magnitudes=[5.0,4.4,5.1,5.4,6.3,5.2,6.2,4.1,5.6,5.2];new Chart(document.getElementById('magnitudeChart'),{type:'bar',data:{labels:magnitudes.map((_,i)=>'EQ'+(i+1)),datasets:[{label:'Magnitude',data:magnitudes,backgroundColor:'rgba(231,76,60,0.8)'}]},options:{responsive:true}});</script></body></html>
|