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.
14 lines
2.9 KiB
14 lines
2.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<title>News Rank 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,#f093fb 0%,#f5576c 100%);}
|
|
.container{max-width:1200px;margin:0 auto;background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,0.2);}
|
|
h1{text-align:center;color:#333;margin-bottom:30px;}
|
|
.item{padding:20px;margin:15px 0;border-radius:10px;background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);}
|
|
.rank{font-size:28px;font-weight:bold;color:#e74c3c;display:inline-block;margin-right:15px;background:#fff;width:50px;height:50px;border-radius:50%;text-align:center;line-height:50px;}
|
|
.title{font-size:18px;font-weight:bold;color:#333;}
|
|
</style></head><body><div class='container'><h1>News Rank Top 10</h1><canvas id='newsChart'></canvas><h2 style='margin-top:40px;'>News Details</h2><div class='item'><span class='rank'>1</span><span class='title'>Tech Frontier: AI Model Breaks Record</span></div><div class='item'><span class='rank'>2</span><span class='title'>Economic Outlook: Q1 2026 Analysis</span></div><div class='item'><span class='rank'>3</span><span class='title'>Sports: World Cup Qualifiers</span></div><div class='item'><span class='rank'>4</span><span class='title'>Culture: Annual Film Festival Opens</span></div><div class='item'><span class='rank'>5</span><span class='title'>Health: New Vaccine Developed</span></div><div class='item'><span class='rank'>6</span><span class='title'>Environment: Carbon Neutral Progress</span></div><div class='item'><span class='rank'>7</span><span class='title'>Education: Exam Policy Adjusted</span></div><div class='item'><span class='rank'>8</span><span class='title'>Military: Defense Tech Breakthrough</span></div><div class='item'><span class='rank'>9</span><span class='title'>Entertainment: Celebrity's New Work</span></div><div class='item'><span class='rank'>10</span><span class='title'>Society: Infrastructure Accelerates</span></div></div><script>const titles=['Tech Frontier: AI Model B...','Economic Outlook: Q1 2026...','Sports: World Cup Qualifi...','Culture: Annual Film Fest...','Health: New Vaccine Devel...','Environment: Carbon Neutr...','Education: Exam Policy Ad...','Military: Defense Tech Br...','Entertainment: Celebrity'...','Society: Infrastructure A...'];const hots=[4982567,3892456,3567234,2987654,2876543,2567890,2345678,2109876,1987654,1876543];new Chart(document.getElementById('newsChart'),{type:'bar',data:{labels:titles,datasets:[{label:'Hot Index',data:hots,backgroundColor:['rgba(255,99,132,0.8)','rgba(54,162,235,0.8)','rgba(255,206,86,0.8)','rgba(75,192,192,0.8)','rgba(153,102,255,0.8)','rgba(255,159,64,0.8)','rgba(199,199,199,0.8)','rgba(83,102,255,0.8)','rgba(40,167,69,0.8)','rgba(220,53,69,0.8)']}]},options:{indexAxis:'y',responsive:true}});</script></body></html>
|