樹德國小-資訊組: 樹德ITmanager 網路管理首頁

用 PHP 整理了一個可以方便點開 MRTG 、其一天流量分析的網頁。

原始碼
<?php
// 設定時區為台灣（UTC+8）
date_default_timezone_set('Asia/Taipei');
// 產生過去7天（不含今天）的日期與連結陣列
$links = [];
for ($i = 1; $i <= 6; $i++) {
$ts = strtotime("-{$i} day");
$display_date = date('Y年m月d日', $ts);
$link_date = date('ymd', $ts);
$url = "https://netflow2.tc.edu.tw/TANet2/IPv4/1{$link_date}/schoolsummary-1708.html";
$links[] = [
'display_date' => $display_date,
'url' => $url
];
}

?>
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ITmanager 網路管理首頁</title>
<style>
body {
font-family: 'Segoe UI', '微軟正黑體', Arial, sans-serif;
background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 60px auto;
background: #fff;
border-radius: 18px;
box-shadow: 0 6px 24px rgba(0,0,0,0.07);
padding: 36px 40px 30px 40px;
}
h1 {
color: #1e293b;
font-size: 2.2rem;
letter-spacing: 2px;
margin-bottom: 26px;
border-left: 5px solid #6366f1;
padding-left: 15px;
}
.section {
margin-top: 20px;
}
.subtitle {
font-size: 1.18rem;
color: #4f46e5;
margin-bottom: 14px;
font-weight: bold;
letter-spacing: 1px;
}
.date-list {
padding-left: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
}
.date-list li {
margin: 0;
}
.date-list a {
color: #2563eb;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.date-list a:hover .date-badge {
background: #7c3aed;
}
.date-badge {
background: #6366f1;
color: #fff;
border-radius: 8px;
padding: 6px 14px;
font-size: 1rem;
vertical-align: middle;
display: inline-block;
min-width: 110px;
text-align: center;
}
.banner-group {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 32px;
}
.banner-item {
width: 100%;
background: #f3f4f6;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(99,102,241,0.06);
display: flex;
flex-direction: column;
align-items: center;
padding: 14px 10px 12px 10px;
}
.banner-img {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(99,102,241,0.08);
}
.banner-caption {
font-size: 1.01rem;
color: #6366f1;
font-weight: 600;
text-align: center;
letter-spacing: 1px;
margin-top: 2px;
}
@media (max-width: 900px) {
.banner-group { flex-direction: column; gap: 16px; }
.banner-item { max-width: 100%; }
}
.footer {
text-align: center;
margin-top: 38px;
padding: 18px 0 10px 0;
background: none;
color: #64748b;
font-size: 1.08rem;
}
.footer a {
color: #4f46e5;
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
}
.footer a:hover {
color: #2563eb;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>樹德ITmanager 網路管理首頁</h1>
<div class="banner-group">
<div class="banner-item">
<img src="https://mrtg.tc.edu.tw/schools/sdps-day.png" alt="每日流量" class="banner-img">
<div class="banner-caption">每日流量</div>
</div>
<div class="banner-item">
<img src="https://mrtg.tc.edu.tw/schools/sdps-week.png" alt="每週流量" class="banner-img">
<div class="banner-caption">每週流量</div>
</div>
<div class="banner-item">
<img src="https://mrtg.tc.edu.tw/schools/sdps-month.png" alt="每月流量" class="banner-img">
<div class="banner-caption">每月流量</div>
</div>
<div class="banner-item">
<img src="https://mrtg.tc.edu.tw/schools/sdps-year.png" alt="年度流量" class="banner-img">
<div class="banner-caption">年度流量</div>
</div>
</div>

<div class="section">
<h2 class="subtitle">網路流量分析表</h2>
<ul class="date-list">
<?php foreach ($links as $item): ?>
<li>
<a href="<?php echo $item['url']; ?>" target="_blank">
<span class="date-badge"><?php echo $item['display_date']; ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<footer class="footer">
<a href="https://shude2024.blogspot.com/" target="_blank">樹德網管</a>
</footer>
</body>
</html>

常用

2025-05-08

樹德ITmanager 網路管理首頁

沒有留言:

張貼留言