Day-16 美化及優化網頁-1

2025 iThome 鐵人賽

DAY 16

生成式 AI

30天製作生成式AI的互動網頁專案系列第 16 篇

17th鐵人賽

max

2025-09-14 22:05:03

26 瀏覽

分享至

今天將把原本很陽春的介面修改一下，讓他美化的好看一點，並且把排版也修整一下。

新版的程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PHI-4 網頁問答測試</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(to right, #e0ecff, #f5f9ff);
      margin: 0;
      padding: 0;
    }

    h1 {
      text-align: center;
      color: #2c3e50;
      margin: 40px 0 20px;
    }

    .container {
      width: 80%;
      margin: auto;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      padding: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }

    .form-section,
    .response-section {
      flex: 1;
    }

    form {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    label {
      font-size: 1.1em;
      color: #34495e;
      margin-bottom: 10px;
    }

    input[type="text"] {
      width: 100%;
      padding: 12px;
      border-radius: 5px;
      border: 1px solid #ccc;
      font-size: 1em;
      margin-bottom: 20px;
    }

    button {
      padding: 12px 20px;
      background-color: #3498db;
      color: white;
      font-size: 1em;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background-color: #2980b9;
    }

    .response-section h2 {
      margin-bottom: 10px;
      color: #2c3e50;
    }

    #response {
      background-color: #eef3fd;
      border-left: 5px solid #3498db;
      padding: 20px;
      border-radius: 5px;
      font-size: 1.1em;
      color: #2c3e50;
      min-height: 120px;
      word-wrap: break-word;
      text-align: center; 
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
        align-items: stretch;
      }
    }
  </style>
</head>
<body>
  <h1>PHI-4 網頁問答測試</h1>
  <div class="container">
    <!-- 提問區 -->
    <div class="form-section">
      <form id="userForm" action="/page1" method="post">
        <h2>提問：</h2>
        <input type="text" id="Q" name="Q" required>
        <button type="submit">送出</button>
      </form>
    </div>

    <!-- 回應區 -->
    <div class="response-section">
      <h2>PHI-4 回應：</h2>
      <div id="response"></div>
    </div>
  </div>

  <script>
    document.getElementById("Q").value = "";
    document.addEventListener('DOMContentLoaded', function () {
      const form = document.getElementById('userForm');
      const responseDiv = document.getElementById('response');
      const inputField = document.getElementById('Q');

      form.addEventListener('submit', function (event) {
        event.preventDefault();

        const formData = new FormData(form);

        fetch('/page1', {
          method: 'POST',
          body: formData
        })
          .then(response => response.text())
          .then(data => {
            responseDiv.innerText = data;
            inputField.value = ""; // 
          })
          .catch(error => {
            responseDiv.innerText = '錯誤：' + error;
            inputField.value = ""; // 
          });
      });
    });
    
  </script>
</body>
</html>

新版的網頁視覺效果:

本次先將新版的程式碼放上來，這段程式碼建立了一個名為「PHI-4 網頁問答測試」的簡易前端問答介面，主要功能是提供使用者輸入問題並提交至伺服器 /page1，然後將伺服器回應顯示在頁面上。整體設計包含以下幾個核心功能：

視覺設計與排版：使用 CSS 美化頁面，包括背景漸層、卡片式內容框、響應式設計（適用手機裝置）等，讓使用者介面清爽且具現代感。
輸入與提交表單：透過元素與欄位，讓使用者輸入問題，點擊按鈕後以 POST 方法將資料送出。
非同步處理回應：使用 JavaScript 的 fetch API 攔截表單提交事件，非同步將問題送出，避免頁面重新載入。
顯示伺服器回應：接收到伺服器回傳的文字資料後，將其顯示於右側的 #response 區塊，並清空輸入框，便於下一次提問。
基本錯誤處理：若請求過程中發生錯誤，會顯示錯誤訊息提示使用者。

明天將會進行程式碼的細部講解和分析。