113-2_FCU_Database-Final-Project/index.html at main · JW-Albert/113-2_FCU_Database-Final-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="zh-TW">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>逢甲大學資訊工程學系</title>
  <link id="dynamic-favicon" rel="icon" type="image/png">
  <link rel="stylesheet" href="/~D1210799/header-footer.css">
  <link rel="stylesheet" href="/~D1210799/index.css">
  <script src="/~D1210799/js/config.js"></script>
</head>

<body>
  <div id="header-include"></div>
  <!-- 圖片輪播區 -->
  <div class="poster-container">
    <button class="arrow left" onclick="prevImage()">&#10094;</button>
    <img id="poster" src="/${BASE_PATH}/pics/posters/1.jpg" alt="系所介紹海報" />
    <button class="arrow right" onclick="nextImage()">&#10095;</button>
  </div>
  <div id="footer-include"></div>
  <script>
    function fixBasePathForLinksAndImages(container) {
      if (typeof BASE_PATH === 'undefined') return;
      // 修正 a 標籤
      container.querySelectorAll('a').forEach(link => {
        const href = link.getAttribute('href');
        if (href && href.startsWith('/') && !href.startsWith(BASE_PATH)) {
          link.setAttribute('href', BASE_PATH + href);
        }
      });
      // 修正 img 標籤
      container.querySelectorAll('img').forEach(img => {
        const src = img.getAttribute('src');
        if (src && src.startsWith('/') && !src.startsWith(BASE_PATH)) {
          img.setAttribute('src', BASE_PATH + src);
        }
      });
    }
    function includeHTML(id, file, callback) {
      if (typeof BASE_PATH === 'undefined') return;
      fetch(BASE_PATH + '/' + file).then(res => res.text()).then(html => {
        const container = document.getElementById(id);
        container.innerHTML = html;
        fixBasePathForLinksAndImages(container);
        if (typeof callback === 'function') callback();
      });
    }
    includeHTML('header-include', 'header.html');
    includeHTML('footer-include', 'footer.html', loadDepartmentInfo);
    // 動態設定 favicon
    document.addEventListener('DOMContentLoaded', function () {
      if (typeof BASE_PATH !== 'undefined') {
        var favicon = document.getElementById('dynamic-favicon');
        if (favicon) {
          favicon.href = BASE_PATH + '/pics/iecs_logo.png';
        }
      }
    });
    // 更新所有連結的函數
    function updateLinks() {
      // 更新所有圖片路徑
      document.querySelectorAll('img').forEach(img => {
        const src = img.getAttribute('src');
        if (src && src.startsWith('/') && !src.startsWith(BASE_PATH)) {
          img.src = `${BASE_PATH}${src}`;
        }
      });
      // 更新所有連結
      document.querySelectorAll('a').forEach(link => {
        const href = link.getAttribute('href');
        if (href && href.startsWith('/') && !href.startsWith(BASE_PATH)) {
          link.href = `${BASE_PATH}${href}`;
        }
      });
    }
    // 頁面載入時執行
    window.addEventListener('load', updateLinks);
    const images = [
      "/pics/posters/1.jpg",
      "/pics/posters/2.jpg",
      "/pics/posters/3.jpg"
    ];
    let index = 0;
    const poster = document.getElementById("poster");
    let interval = setInterval(nextImage, 2000);
    function showImage(newIndex) {
      poster.classList.add("fade-out");
      setTimeout(() => {
        index = (newIndex + images.length) % images.length;
        poster.src = `${BASE_PATH}${images[index]}`;
        poster.classList.remove("fade-out");
      }, 500);
    }
    function nextImage() {
      showImage(index + 1);
      resetInterval();
    }
    function prevImage() {
      showImage(index - 1);
      resetInterval();
    }
    function resetInterval() {
      clearInterval(interval);
      interval = setInterval(nextImage, 2000);
    }
    // 初始化第一張圖片的路徑
    window.addEventListener('load', () => {
      poster.src = `${BASE_PATH}${images[0]}`;
    });
    // 載入 footer.html 後自動載入聯絡資訊
    function loadDepartmentInfo() {
      fetch(BASE_PATH + '/api/department.php?id=D001')
        .then(response => {
          if (!response.ok) throw new Error('Network response was not ok');
          return response.json();
        })
        .then(data => {
          if (data.success) {
            const dept = data.data;
            document.getElementById('footer-address').textContent = `地址：${dept.locat || '無資料'}`;
            document.getElementById('footer-office').textContent = `系辦：${dept.office || '無資料'}`;
            document.getElementById('footer-phone').textContent = `電話：${dept.phone_extension || '無資料'}`;
            document.getElementById('footer-email').textContent = `信箱：${dept.email || '無資料'}`;
          } else {
            throw new Error(data.message || 'Failed to load department info');
          }
        })
        .catch(error => {
          console.error('Error loading department info:', error);
          document.getElementById('footer-address').textContent = '地址：載入失敗';
          document.getElementById('footer-office').textContent = '系辦：載入失敗';
          document.getElementById('footer-phone').textContent = '電話：載入失敗';
          document.getElementById('footer-email').textContent = '信箱：載入失敗';
        });
    }
  </script>
</body>

</html>