isdaviddong/index.html

alan050765-creator · 2025-08-26T19:27:25Z

https://www.instagram.com/yu.xzzz?igsh=MWIwNTUxdnRiem1uNw%3D%3D&utm_source=qr

anita2016001-create · 2025-09-19T05:47:38Z

<title>Accessories Store</title> <style> /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

header {
  background: url('https://images.unsplash.com/photo-1522312346375-d1a52e2b99b3?auto=format&fit=crop&w=1500&q=80') no-repeat center/cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}

header::after {
  content: "";
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.5);
}

header .content {
  position: relative;
  z-index: 1;
}

header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

header p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #ff6b6b;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background 0.3s;
}

.btn:hover {
  background: #ff4040;
}

section {
  padding: 60px 20px;
  max-width: 1100px;
  margin: auto;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  background: #fff;
  transition: transform 0.3s;
}

.product:hover {
  transform: translateY(-5px);
}

.product img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.product h3 {
  margin: 15px 0 5px;
}

.product p {
  margin-bottom: 15px;
  color: #555;
}

.about {
  text-align: center;
}

.testimonials {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 30px;
}

.testimonial {
  margin-bottom: 20px;
  font-style: italic;
}

footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

footer a {
  color: #ff6b6b;
  text-decoration: none;
}

</style>

Elevate Your Style

Discover premium accessories that define confidence.

Shop Now

Featured Accessories

Luxury Watch

$199

Elegant Bag

$249

Classic Sunglasses

$99

Why Choose Us?

We design timeless accessories that combine elegance with durability. Every piece is crafted with care to elevate your everyday look.

What Our Customers Say

“Absolutely love my new watch. It goes with everything!” – Sarah

“High-quality products at great prices. Will shop again.” – David

“Fast shipping and amazing service!” – Emily

AnonymousTalent · 2025-11-12T05:47:30Z

<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

問 AI

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>

gxzhjjnm2y-blip · 2025-11-21T13:03:39Z

<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>

raaq605-cmd · 2025-12-04T22:48:54Z

<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>

SwiftCargo

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

نقل سريع، آمن وموثوق عبر 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>

	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8" />
	<script>
	function Auth() {
	var URL = 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize?';
	URL += 'response_type=code';
	URL += '&client_id={請換成您的Client id}'; //請換成您的App Client id
	URL += '&redirect_uri=http://localhost:13555/index.html'; //請換成您的URL
	URL += '&scope=openid https://graph.microsoft.com/user.read'; //請換成您要索取的權限
	URL += '&response_mode=query';
	URL += '&state=12345';
	URL += '&nonce=678910';
	window.location.href = URL;
	}
	</script>
	</head>
	<body>
	<button onclick="Auth();">點選這裡連結AAD 2.0 Login</button>
	</body>
	</html>

isdaviddong/index.html

Select an option

No results found

Select an option

No results found

alan050765-creator commented Aug 26, 2025

Uh oh!

anita2016001-create commented Sep 19, 2025

Uh oh!

AnonymousTalent commented Nov 12, 2025

Uh oh!

gxzhjjnm2y-blip commented Nov 21, 2025

Uh oh!

raaq605-cmd commented Dec 4, 2025

Uh oh!