<title>Snake Game + GPT AI Chat</title> <style> body { font-family: monospace; background: #222; color: #eee; text-align: center; } canvas { background: #111; margin: 20px auto; display: block; } #aiResponse { background: #333; color: #fff; min-height: 2em; margin: 10px auto; max-width: 400px; border-radius: 8px; padding: 10px; } #chat { margin-top: 16px; } input, button { font-size: 16px; } </style>

🐍 Snake Game + GPT AI Chat

<script> // 簡易 Snake 遊戲 const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); const tileCount = 20; const gridSize = canvas.width / tileCount; let tail = 5; let snakeTrail = []; let snake = { x: 10, y: 10 }; let velocity = { x: 0, y: 0 }; let fruit = { x: 5, y: 5 };

function gameLoop() {
  snake.x += velocity.x;
  snake.y += velocity.y;

  // 撞牆
  if (snake.x < 0 || snake.x >= tileCount || snake.y < 0 || snake.y >= tileCount) {
    resetGame();
  }

  // 吃到自己
  for (let t of snakeTrail) {
    if (t.x === snake.x && t.y === snake.y) resetGame();
  }

  // 畫面
  ctx.fillStyle = "#111";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "lime";
  for (let t of snakeTrail) ctx.fillRect(t.x * gridSize, t.y * gridSize, gridSize - 2, gridSize - 2);

  ctx.fillStyle = "yellow";
  ctx.fillRect(snake.x * gridSize, snake.y * gridSize, gridSize - 2, gridSize - 2);

  ctx.fillStyle = "red";
  ctx.fillRect(fruit.x * gridSize, fruit.y * gridSize, gridSize - 2, gridSize - 2);

  snakeTrail.push({ x: snake.x, y: snake.y });
  while (snakeTrail.length > tail) snakeTrail.shift();

  // 吃到果實
  if (snake.x === fruit.x && snake.y === fruit.y) {
    tail++;
    fruit.x = Math.floor(Math.random() * tileCount);
    fruit.y = Math.floor(Math.random() * tileCount);
  }
}

function resetGame() {
  tail = 5;
  snakeTrail = [];
  snake = { x: 10, y: 10 };
  velocity = { x: 0, y: 0 };
}

document.addEventListener('keydown', e => {
  switch (e.key) {
    case 'ArrowLeft': velocity = { x: -1, y: 0 }; break;
    case 'ArrowUp': velocity = { x: 0, y: -1 }; break;
    case 'ArrowRight': velocity = { x: 1, y: 0 }; break;
    case 'ArrowDown': velocity = { x: 0, y: 1 }; break;
  }
});

setInterval(gameLoop, 100);

// --- AI 聊天區 ---
const apiKey = '你的API Key'; // ←←←這裡貼上你的API Key！

async function chatWithGPT(prompt) {
  const endpoint = 'https://api.openai.com/v1/chat/completions';
  const response = await fetch(endpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: prompt }],
      max_tokens: 300
    })
  });
  const data = await response.json();
  return data.choices?.[0]?.message?.content || "AI 沒有回應";
}

async function askAI() {
  const question = document.getElementById('userInput').value;
  if (!question) return;
  document.getElementById('aiResponse').innerText = "AI 正在思考...";
  try {
    const answer = await chatWithGPT(question);
    document.getElementById('aiResponse').innerText = answer;
  } catch (err) {
    document.getElementById('aiResponse').innerText = "AI 請求失敗，請檢查 API Key 或網路";
  }
}

</script>

<title>智慧分帳計算機</title> <script src="https://cdn.tailwindcss.com"></script> <style> /* 讓輸入欄位文字靠右對齊，符合金額輸入習慣 */ #totalBill { text-align: right; } /* 隱藏 Chrome/Safari 的數字輸入框上下箭頭 */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* 隱藏 Firefox 的數字輸入框上下箭頭 */ input[type=number] { -moz-appearance: textfield; } </style> <script> // 設定 Tailwind CSS 配置，使用一個現代高對比配色 tailwind.config = { theme: { extend: { colors: { 'primary': '#2563EB', // 藍色 'secondary': '#10B981', // 綠色 'background': '#F3F4F6', // 淺灰背景 'card-bg': '#FFFFFF', // 卡片背景 'dark-bg': '#1F2937', // 深色區塊背景 'dark-text': '#F3F4F6', // 深色區塊文字 } } } } </script>

<div class="max-w-md mx-auto bg-card-bg shadow-2xl rounded-xl overflow-hidden">
    <header class="bg-primary text-white p-6">
        <h1 class="text-2xl font-bold text-center">💸 智慧分帳計算機</h1>
    </header>

    <main class="p-6 space-y-6">

        <div class="space-y-4">
            <h2 class="text-lg font-semibold text-gray-700 border-b pb-2">輸入資訊</h2>

            <div>
                <label for="totalBill" class="block text-sm font-medium text-gray-600 mb-1">總金額 (Total Bill)</label>
                <div class="relative rounded-lg shadow-sm">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <span class="text-gray-500">NT$</span>
                    </div>
                    <input type="number" id="totalBill" value="500" min="0" placeholder="0.00"
                        class="block w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg text-lg focus:ring-primary focus:border-primary">
                </div>
            </div>

            <div>
                <div class="flex justify-between items-center mb-1">
                    <label class="text-sm font-medium text-gray-600">小費百分比 (Tip %)</label>
                    <span id="tipPercentageValue" class="text-lg font-bold text-primary">10%</span>
                </div>
                <input type="range" id="tipPercentage" value="10" min="0" max="30" step="1"
                    class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-600 mb-2">人數 (People)</label>
                <div class="flex items-center justify-center space-x-4 bg-gray-100 p-3 rounded-lg">
                    <button id="decrementPeople" class="text-3xl font-bold text-primary hover:text-primary-dark transition duration-150 p-1.5 rounded-full hover:bg-white">-</button>
                    <span id="peopleValue" class="text-3xl font-extrabold text-gray-800 w-16 text-center">2</span>
                    <button id="incrementPeople" class="text-3xl font-bold text-primary hover:text-primary-dark transition duration-150 p-1.5 rounded-full hover:bg-white">+</button>
                </div>
            </div>
        </div>

        <div class="bg-dark-bg text-dark-text p-5 rounded-xl shadow-lg space-y-5">
            <h2 class="text-xl font-bold border-b border-gray-700 pb-3 mb-4">✨ 即時運算結果</h2>
            
            <div class="flex justify-between items-center">
                <span class="text-base font-medium text-gray-400">總金額 (含小費)：</span>
                <span id="totalAmountDisplay" class="text-2xl font-bold text-secondary">NT$ 0.00</span>
            </div>

            <div class="text-center pt-4 border-t border-gray-700">
                <p class="text-lg font-medium text-gray-400 mb-1">每人應付金額 (Per Person)</p>
                <p id="perPersonDisplay" class="text-5xl font-extrabold text-white">NT$ 0.00</p>
            </div>
        </div>

    </main>
</div>

<script>
    // 取得所有 DOM 元素
    const totalBillInput = document.getElementById('totalBill');
    const tipPercentageSlider = document.getElementById('tipPercentage');
    const tipPercentageValue = document.getElementById('tipPercentageValue');
    const peopleValueSpan = document.getElementById('peopleValue');
    const incrementPeopleBtn = document.getElementById('incrementPeople');
    const decrementPeopleBtn = document.getElementById('decrementPeople');
    const totalAmountDisplay = document.getElementById('totalAmountDisplay');
    const perPersonDisplay = document.getElementById('perPersonDisplay');

    let totalBill = parseFloat(totalBillInput.value) || 0;
    let tipPercentage = parseInt(tipPercentageSlider.value) || 0;
    let people = parseInt(peopleValueSpan.textContent) || 1; // 確保人數至少為 1

    /**
     * 主計算函式：計算總金額與每人應付金額
     */
    function calculateSplit() {
        // 1. 取得最新數值
        totalBill = parseFloat(totalBillInput.value) || 0;
        tipPercentage = parseInt(tipPercentageSlider.value) || 0;
        people = parseInt(peopleValueSpan.textContent) || 1;

        // 處理小費計算
        const tipAmount = totalBill * (tipPercentage / 100);
        
        // 計算總金額 (含小費)
        const totalAmountWithTip = totalBill + tipAmount;

        // 計算每人應付金額
        const perPersonAmount = people > 0 ? totalAmountWithTip / people : 0;
        
        // 2. 更新介面顯示
        
        // 更新小費百分比顯示
        tipPercentageValue.textContent = `${tipPercentage}%`;

        // 更新總金額 (含小費) 顯示，四捨五入到小數點第二位
        totalAmountDisplay.textContent = `NT$ ${totalAmountWithTip.toFixed(2)}`;

        // 更新每人應付金額顯示，四捨五入到小數點第二位
        perPersonDisplay.textContent = `NT$ ${perPersonAmount.toFixed(2)}`;
    }

    // --- 事件監聽器 ---

    // 1. 總金額輸入變更
    totalBillInput.addEventListener('input', calculateSplit);

    // 2. 小費滑桿變更
    tipPercentageSlider.addEventListener('input', calculateSplit);

    // 3. 人數增加按鈕
    incrementPeopleBtn.addEventListener('click', () => {
        people = parseInt(peopleValueSpan.textContent) + 1;
        peopleValueSpan.textContent = people;
        calculateSplit();
    });

    // 4. 人數減少按鈕
    decrementPeopleBtn.addEventListener('click', () => {
        people = parseInt(peopleValueSpan.textContent);
        if (people > 1) { // 確保人數至少為 1
            people -= 1;
            peopleValueSpan.textContent = people;
            calculateSplit();
        }
    });

    // 頁面載入時先執行一次計算，顯示初始值
    window.onload = calculateSplit;

</script>

<title>SwiftCargo – النقل السريع واللوجستيك الاحترافي</title> <style> body { margin: 0; font-family: Arial, sans-serif; color: #222; background: #f4f6f9; line-height: 1.6; } header { background: #0d1b2a; padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; color: white; } .logo { font-size: 26px; font-weight: bold; letter-spacing: 1px; } .hero { text-align: center; padding: 60px 20px; background: linear-gradient(120deg, #0d1b2a, #1b263b); color: white; } .hero img { width: 85%; max-width: 900px; border-radius: 10px; margin-top: 25px; } .features { padding: 40px 20px; max-width: 1100px; margin: auto; } .features h2 { text-align: center; margin-bottom: 30px; font-size: 28px; color: #0d1b2a; } .feature-box { background: white; padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 3px 12px rgba(0,0,0,0.1); border-left: 5px solid #1b263b; } .cta { text-align: center; padding: 50px 20px; } .cta a { display: inline-block; background: #1b263b; color: white; padding: 15px 35px; border-radius: 8px; font-size: 20px; text-decoration: none; transition: 0.3s; } .cta a:hover { background: #415a77; } footer { background: #0d1b2a; color: white; padding: 20px; text-align: center; margin-top: 40px; } form { background: white; padding: 20px; border-radius: 12px; max-width: 600px; margin: 20px auto; box-shadow: 0 3px 12px rgba(0,0,0,0.1); } input, textarea { width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; } button { background: #1b263b; color: white; padding: 14px; border: none; border-radius: 8px; width: 100%; cursor: pointer; font-size: 18px; } button:hover { background: #415a77; } </style>

النقل اللوجستي بلا حدود

نقل سريع، آمن وموثوق عبر Volkswagen Crafter عالية السعة.

<!-- ★ ضع صورتك هنا بعد تسميتها: crafter-real.jpg -->
<img src="crafter-real.jpg" alt="SwiftCargo Volkswagen Crafter">

لماذا SwiftCargo؟

<div class="feature-box">✔ نقل لوجستي احترافي للشركات والمطارات والموانئ باستخدام Volkswagen Crafter</div>
<div class="feature-box">✔ تتبع مباشر لكل شحنة لضمان وصولها في الوقت المحدد</div>
<div class="feature-box">✔ حلول شحن آمنة، سريعة وفعالة</div>
<div class="feature-box">✔ فريق متخصص، عمليات دقيقة، وانسيابية كاملة في الخدمة</div>

ابدأ شحنتك الآن

تواصل معنا

    <input type="text" name="name" placeholder="الاسم الكامل" required>
    <input type="email" name="email" placeholder="البريد الإلكتروني" required>
    <input type="text" name="phone" placeholder="رقم الهاتف" required>
    <textarea name="message" placeholder="اكتب رسالتك..." rows="5" required></textarea>
    
    <button type="submit">إرسال</button>
</form>

للتواصل:
📧 [email protected]
📞 0666116722

© 2025 SwiftCargo