webapp

Running

App Files Files Community

jackyanghxc commited on Dec 7, 2025

Commit

9ebb683

verified ·

1 Parent(s): 47b4642

Update index.html

Browse files

Files changed (1) hide show

index.html +748 -19

index.html CHANGED Viewed

@@ -1,19 +1,748 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="th">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>เซียนกุ้งลาดพร้าว - Ladprao Shrimp Oracle</title>
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600;700&display=swap');
+    body {
+      font-family: 'Prompt', sans-serif;
+    }
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 4px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: rgba(255,255,255,0.1);
+      border-radius: 4px;
+    }
+    @keyframes fadeSlideIn {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .animate-fade-slide {
+      animation: fadeSlideIn 0.5s ease-out forwards;
+    }
+    @keyframes pulse-glow {
+      0%, 100% { box-shadow: 0 0 15px rgba(249, 115, 22, 0.3); }
+      50% { box-shadow: 0 0 25px rgba(249, 115, 22, 0.5); }
+    }
+    .pulse-glow {
+      animation: pulse-glow 2s infinite;
+    }
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="time"]::-webkit-calendar-picker-indicator {
+      filter: invert(1) opacity(0.5);
+    }
+  </style>
+</head>
+<body class="min-h-screen bg-[#0f172a] text-slate-100 flex flex-col">
+  <!-- Background -->
+  <div class="fixed inset-0 z-0 pointer-events-none">
+    <div class="absolute top-0 left-0 w-full h-[300px] bg-gradient-to-b from-purple-900/30 to-transparent"></div>
+  </div>
+  <!-- Header -->
+  <header class="flex-none h-16 bg-[#0f172a]/90 backdrop-blur-md border-b border-white/10 flex items-center justify-between px-4 z-50 sticky top-0">
+    <div class="flex items-center gap-3">
+      <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-orange-500 to-red-600 flex items-center justify-center shadow-lg pulse-glow">
+        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
+        </svg>
+      </div>
+      <div class="leading-tight">
+        <h1 id="headerTitle" class="text-base font-bold text-white">เซียนกุ้งลาดพร้าว</h1>
+        <p id="headerSubtitle" class="text-[10px] text-slate-400">AI ทำนายผล คู่/คี่</p>
+      </div>
+    </div>
+    <div class="flex gap-2">
+      <button id="langBtn" class="p-2 bg-white/5 rounded-full hover:bg-white/10 transition-colors">
+        <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="10"/>
+          <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+        </svg>
+      </button>
+      <button id="resetBtn" class="p-2 bg-white/5 rounded-full text-red-400 hover:bg-white/10 transition-colors hidden">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+        </svg>
+      </button>
+    </div>
+  </header>
+  <!-- Main Content -->
+  <main id="mainContent" class="flex-1 p-4 pb-48 custom-scrollbar relative z-10">
+    <!-- Input Step -->
+    <div id="inputStep" class="max-w-md mx-auto space-y-6 animate-fade-slide">
+      <!-- Intro Card -->
+      <div class="bg-gradient-to-br from-slate-800 to-slate-900 border border-white/10 rounded-2xl p-5 shadow-xl">
+        <h2 class="text-orange-400 font-bold mb-2 flex items-center gap-2 text-sm uppercase tracking-wider">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+          </svg>
+          <span id="introTitle">ระบบคำนวณดวงเกมตกกุ้ง</span>
+        </h2>
+        <p id="introText" class="text-xs text-slate-300 leading-relaxed">ระบบ AI ผสานศาสตร์ปาจื้อและจื่อเวยฯ วิเคราะห์เกมชั่งน้ำหนักกุ้งลาดพร้าว คำนวณดัชนีโชคลาภและฟันธง 'คู่' หรือ 'คี่' ตามเวลาจริง</p>
+      </div>
+      <!-- API Key -->
+      <div class="space-y-2">
+        <label id="apiKeyLabel" class="text-xs font-semibold text-purple-400 uppercase ml-1">1. ใส่คีย์สมอง (DeepSeek API)</label>
+        <div class="relative">
+          <svg class="absolute left-3 top-3.5 h-4 w-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
+          </svg>
+          <input
+            type="password"
+            id="apiKeyInput"
+            placeholder="sk-..."
+            class="w-full pl-10 pr-4 py-3 bg-slate-900/50 border border-white/20 rounded-xl text-sm focus:border-orange-500 outline-none transition-all"
+          />
+        </div>
+        <p id="apiKeyNote" class="text-[10px] text-slate-500 ml-1">*คีย์ใช้ส่งข้อมูลหา AI เท่านั้น ไม่มีการบันทึก</p>
+        <!-- Demo Mode Toggle -->
+        <label class="flex items-center gap-2 mt-2 cursor-pointer group">
+          <input type="checkbox" id="demoModeToggle" class="w-4 h-4 rounded bg-slate-800 border-orange-500 text-orange-500 focus:ring-orange-500 focus:ring-offset-0">
+          <span id="demoModeLabel" class="text-xs text-orange-400 group-hover:text-orange-300">🎮 โหมดทดสอบ (ไม่ต้องใช้ API Key)</span>
+        </label>
+      </div>
+      <!-- User Form -->
+      <div class="space-y-3 bg-white/5 p-4 rounded-2xl border border-white/5">
+        <label id="userInfoLabel" class="text-xs font-semibold text-purple-400 uppercase mb-2 block">2. ข้อมูลเจ้าชะตา (กรอกครั้งเดียว)</label>
+        <div class="grid grid-cols-2 gap-3">
+          <div>
+            <label id="nameLabelEl" class="text-[10px] text-slate-500 mb-1 block">ชื่อเล่น</label>
+            <input type="text" id="nameInput" class="w-full p-2 bg-slate-900 rounded-lg border border-white/10 text-sm outline-none focus:border-orange-500" />
+          </div>
+          <div>
+            <label id="genderLabelEl" class="text-[10px] text-slate-500 mb-1 block">เพศ</label>
+            <div class="flex bg-slate-900 rounded-lg p-1 border border-white/10 h-[38px]">
+              <button id="maleBtn" class="flex-1 rounded-md text-xs bg-blue-600 text-white transition-colors">ชาย</button>
+              <button id="femaleBtn" class="flex-1 rounded-md text-xs text-slate-500 transition-colors">หญิง</button>
+            </div>
+          </div>
+        </div>
+        <div class="grid grid-cols-2 gap-3">
+          <div>
+            <label id="birthDateLabelEl" class="text-[10px] text-slate-500 mb-1 block">วันเกิด</label>
+            <input type="date" id="birthDateInput" class="w-full p-2 bg-slate-900 rounded-lg border border-white/10 text-sm text-slate-300 outline-none focus:border-orange-500" />
+          </div>
+          <div>
+            <label id="birthTimeLabelEl" class="text-[10px] text-slate-500 mb-1 block">เวลาเกิด</label>
+            <input type="time" id="birthTimeInput" class="w-full p-2 bg-slate-900 rounded-lg border border-white/10 text-sm text-slate-300 outline-none focus:border-orange-500" />
+          </div>
+        </div>
+        <div>
+          <label id="birthCityLabelEl" class="text-[10px] text-slate-500 mb-1 block">จังหวัดเกิด</label>
+          <input type="text" id="birthCityInput" placeholder="กทม." class="w-full p-2 bg-slate-900 rounded-lg border border-white/10 text-sm outline-none focus:border-orange-500" />
+        </div>
+      </div>
+      <!-- Initial Target -->
+      <div class="space-y-3">
+        <label id="targetLabel" class="text-xs font-semibold text-purple-400 uppercase ml-1">3. เริ่มทำนายรอบแรก</label>
+        <div class="grid grid-cols-2 gap-3">
+          <div class="relative">
+            <svg class="absolute left-3 top-3 h-4 w-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+              <line x1="16" y1="2" x2="16" y2="6"/>
+              <line x1="8" y1="2" x2="8" y2="6"/>
+              <line x1="3" y1="10" x2="21" y2="10"/>
+            </svg>
+            <input type="date" id="targetDateInput" class="w-full pl-9 p-3 bg-slate-900/50 border border-white/20 rounded-xl text-sm text-white outline-none focus:border-orange-500" />
+          </div>
+          <div class="relative">
+            <svg class="absolute left-3 top-3 h-4 w-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="10"/>
+              <polyline points="12 6 12 12 16 14"/>
+            </svg>
+            <input type="time" id="targetTimeInput" value="20:30" class="w-full pl-9 p-3 bg-slate-900/50 border border-white/20 rounded-xl text-sm text-white outline-none focus:border-orange-500" />
+          </div>
+        </div>
+      </div>
+      <!-- Start Button -->
+      <button id="startBtn" class="w-full py-4 bg-gradient-to-r from-orange-600 to-red-600 text-white font-bold rounded-xl shadow-lg shadow-orange-900/40 active:scale-95 transition-transform flex items-center justify-center gap-2 hover:from-orange-500 hover:to-red-500">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
+        </svg>
+        <span id="startBtnText">วิเคราะห์ผล (คู่/คี่)</span>
+      </button>
+      <!-- Advanced Toggle -->
+      <div class="pt-2 text-center">
+        <button id="advancedToggle" class="text-[10px] text-slate-500 flex items-center justify-center gap-1 mx-auto hover:text-slate-400 transition-colors">
+          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="3"/>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+          </svg>
+          <span id="advancedText">ตั้งค่า AI (ขั้นสูง)</span>
+          <svg id="advancedChevron" class="w-3 h-3 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <polyline points="6 9 12 15 18 9"/>
+          </svg>
+        </button>
+        <div id="advancedPanel" class="hidden mt-2">
+          <textarea id="systemPromptInput" class="w-full h-32 bg-black/30 border border-white/10 rounded-lg p-2 text-[10px] font-mono text-slate-400 outline-none focus:border-orange-500"></textarea>
+          <button id="restoreDefaultBtn" class="mt-2 text-[10px] text-orange-400 hover:text-orange-300">คืนค่าเดิม</button>
+        </div>
+      </div>
+    </div>
+    <!-- Chat Step -->
+    <div id="chatStep" class="max-w-md mx-auto space-y-4 hidden">
+      <div id="chatMessages"></div>
+      <!-- Loading -->
+      <div id="loadingIndicator" class="hidden flex justify-start">
+        <div class="bg-slate-800 rounded-2xl rounded-tl-none p-3 flex items-center gap-2">
+          <svg class="w-4 h-4 animate-spin text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
+          <span id="loadingText" class="text-xs text-slate-400">AI กำลังคำนวณดวง...</span>
+        </div>
+      </div>
+      <div id="chatEnd" class="h-4"></div>
+    </div>
+  </main>
+  <!-- Bottom Action Bar (for repeat bets) -->
+  <div id="bottomBar" class="fixed bottom-0 left-0 right-0 bg-[#0f172a]/95 backdrop-blur-xl border-t border-white/10 p-4 z-50 hidden animate-fade-slide">
+    <div class="max-w-md mx-auto">
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-xs font-bold text-purple-400 uppercase flex items-center gap-1">
+          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
+          <span id="nextRoundTitle">รอบถัดไป?</span>
+        </span>
+        <span id="nextRoundDesc" class="text-[10px] text-slate-500">ดวงเดิม เปลี่ยนแค่เวลาแทง</span>
+      </div>
+      <div class="flex gap-2">
+        <div class="relative flex-1">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <svg class="h-4 w-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="10"/>
+              <polyline points="12 6 12 12 16 14"/>
+            </svg>
+          </div>
+          <input
+            type="time"
+            id="nextTimeInput"
+            value="20:30"
+            class="block w-full pl-10 pr-2 py-3 bg-slate-900 border border-white/20 rounded-xl text-sm text-white focus:ring-2 focus:ring-orange-500 focus:border-transparent outline-none font-mono"
+          />
+        </div>
+        <button
+          id="predictNextBtn"
+          class="bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-500 hover:to-red-500 text-white px-6 rounded-xl font-bold shadow-lg shadow-orange-900/30 active:scale-95 transition-all flex items-center gap-2"
+        >
+          <span id="predictNextText">ทำนายรอบใหม่</span>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <line x1="5" y1="12" x2="19" y2="12"/>
+            <polyline points="12 5 19 12 12 19"/>
+          </svg>
+        </button>
+      </div>
+      <div class="mt-2 text-center">
+        <input
+          type="date"
+          id="nextDateInput"
+          class="bg-transparent text-[10px] text-slate-600 text-center w-24 outline-none"
+        />
+      </div>
+    </div>
+  </div>
+  <script>
+    // --- Translation Data ---
+    const TRANSLATIONS = {
+      'th': {
+        title: "เซียนกุ้งลาดพร้าว",
+        subtitle: "AI ทำนายผล คู่/คี่",
+        reset: "ล้างข้อมูล",
+        introTitle: "ระบบคำนวณดวงเกมตกกุ้ง",
+        introText: "ระบบ AI ผสานศาสตร์ปาจื้อและจื่อเวยฯ วิเคราะห์เกมชั่งน้ำหนักกุ้งลาดพร้าว คำนวณดัชนีโชคลาภและฟันธง 'คู่' หรือ 'คี่' ตามเวลาจริง",
+        apiKeyLabel: "1. ใส่คีย์สมอง (DeepSeek API)",
+        apiKeyPlaceholder: "sk-...",
+        apiKeyNote: "*คีย์ใช้ส่งข้อมูลหา AI เท่านั้น ไม่มีการบันทึก",
+        userInfoLabel: "2. ข้อมูลเจ้าชะตา (กรอกครั้งเดียว)",
+        nameLabel: "ชื่อเล่น",
+        genderLabel: "เพศ",
+        male: "ชาย",
+        female: "หญิง",
+        birthDateLabel: "วันเกิด",
+        birthTimeLabel: "เวลาเกิด",
+        birthCityLabel: "จังหวัดเกิด",
+        birthCityPlaceholder: "กทม.",
+        targetLabel: "3. เริ่มทำนายรอบแรก",
+        targetDateLabel: "วันที่เล่น",
+        targetQuestionLabel: "เวลาที่จะแทง",
+        advancedSettings: "ตั้งค่า AI (ขั้นสูง)",
+        restoreDefault: "คืนค่าเดิม",
+        startAnalysis: "วิเคราะห์ผล (คู่/คี่)",
+        loading: "AI กำลังคำนวณดวง...",
+        reportTitle: "ผลการทำนาย",
+        errorApiKey: "ต้องใส่ API Key ก่อนครับ",
+        errorInfo: "กรุณากรอกวันเวลาเกิดให้ครบ",
+        aiRole: "หมอดู AI",
+        initialGreeting: (name) => `สวัสดีคุณ ${name} ได้รับข้อมูลดวงชะตาแล้ว กำลังเชื่อมต่อจักรวาล...`,
+        nextRoundTitle: "รอบถัดไป?",
+        nextRoundDesc: "ดวงเดิม เปลี่ยนแค่เวลาแทง",
+        predictNext: "ทำนายรอบใหม่"
+      },
+      'zh-TW': {
+        title: "曼谷運勢智囊",
+        subtitle: "DeepSeek AI 驅動 - 釣蝦場單雙預測",
+        reset: "重置",
+        introTitle: "命理融合預測系統",
+        introText: "本系統結合八字與紫微斗數，專門針對曼谷 Ladprao 釣蝦場的秤重遊戲進行分析。AI 將計算您的偏財指數與最佳下注策略（單/雙）。",
+        apiKeyLabel: "1. API 金鑰",
+        apiKeyPlaceholder: "sk-...",
+        apiKeyNote: "*您的 Key 不會被儲存。",
+        userInfoLabel: "2. 命主資料",
+        nameLabel: "暱稱",
+        genderLabel: "性別",
+        male: "男",
+        female: "女",
+        birthDateLabel: "出生日期",
+        birthTimeLabel: "出生時間",
+        birthCityLabel: "出生地",
+        birthCityPlaceholder: "曼谷",
+        targetLabel: "3. 首次預測",
+        targetDateLabel: "日期",
+        targetQuestionLabel: "下注時間",
+        advancedSettings: "進階設定",
+        restoreDefault: "恢復預設",
+        startAnalysis: "開始預測",
+        loading: "正在計算...",
+        reportTitle: "預測報告",
+        errorApiKey: "請輸入 API Key。",
+        errorInfo: "請填寫完整資訊。",
+        aiRole: "AI",
+        initialGreeting: (name) => `您好 ${name}，資料已確認，正在推算...`,
+        nextRoundTitle: "下一輪預測?",
+        nextRoundDesc: "保留命盤，僅修改時間",
+        predictNext: "預測新時間"
+      },
+      'en': {
+        title: "Ladprao Oracle",
+        subtitle: "Shrimp Game AI Prediction",
+        reset: "Reset",
+        introTitle: "Prediction System",
+        introText: "Combines BaZi and ZiWei DouShu to analyze the Ladprao Shrimp weighing game. AI calculates Odd/Even strategy based on time.",
+        apiKeyLabel: "1. DeepSeek API Key",
+        apiKeyPlaceholder: "sk-...",
+        apiKeyNote: "*Key is not stored.",
+        userInfoLabel: "2. Your Details",
+        nameLabel: "Name",
+        genderLabel: "Gender",
+        male: "Male",
+        female: "Female",
+        birthDateLabel: "Birth Date",
+        birthTimeLabel: "Birth Time",
+        birthCityLabel: "Birth City",
+        birthCityPlaceholder: "Bangkok",
+        targetLabel: "3. First Bet",
+        targetDateLabel: "Game Date",
+        targetQuestionLabel: "Bet Time",
+        advancedSettings: "Advanced",
+        restoreDefault: "Default",
+        startAnalysis: "Predict Odd/Even",
+        loading: "Calculating...",
+        reportTitle: "Report",
+        errorApiKey: "API Key required.",
+        errorInfo: "Incomplete Info.",
+        aiRole: "AI",
+        initialGreeting: (name) => `Hello ${name}, calculating your luck...`,
+        nextRoundTitle: "Next Round?",
+        nextRoundDesc: "Same person, new time",
+        predictNext: "Predict Next"
+      }
+    };
+    // --- System Prompts ---
+    const SYSTEM_PROMPTS = {
+      'th': `คุณคือปรมาจารย์โหราศาสตร์ (ปาจื้อและจื่อเวยโต่วซู่) หน้าที่ของคุณคือวิเคราะห์ดวงโชคลาภสำหรับเกมเสี่ยงโชค
+โปรดปฏิบัติตามตรรกะนี้:
+[ตรรกะการวิเคราะห์]
+1. คำนวณธาตุให้คุณและดาวโชคลาภในเรือนทรัพย์สินจากวันเกิด
+2. **วิเคราะห์เกม**: นี่คือเกมที่บ่อตกกุ้งลาดพร้าว กรุงเทพฯ หลัง 20:00 น. จะมีการชั่งน้ำหนักกุ้ง 9 ตัว ให้ทายเลขท้ายน้ำหนักว่า "คี่" หรือ "คู่"
+   - คี่ (Odd) = ปุ่มสีแดง
+   - คู่ (Even) = ปุ่มสีน้ำเงิน
+3. คุณต้องคำนวณ "ดัชนีโชคลาภ" ของผู้ใช้ ณ เวลาที่ระบุ และฟันธงว่าเวลานี้ ควรแทง "คี่" หรือ "คู่"
+[รูปแบบการตอบกลับ - ห้ามเยิ่นเย้อ]
+1. **เวลา**: [เวลาที่ถาม]
+2. **ดัชนีโชค**: (0-100%)
+3. **ฟันธง**: 🔴 คี่ (RED) หรือ 🔵 คู่ (BLUE) (เลือก 1 อย่างเท่านั้นให้ชัดเจน)
+4. **เคล็ดลับสั้นๆ**: ทิศที่ควรนั่ง หรือ สีเสื้อเสริมดวง`,
+      'zh-TW': `你是一位精通「八字」與「紫微斗數」的大師。針對曼谷 Ladprao 釣蝦場秤重遊戲進行單雙預測。
+遊戲規則：晚上8點後，秤9隻蝦，猜尾數單雙。
+請根據用戶提供的出生資料與下注時間，計算當下的偏財運。
+【輸出格式 - 請簡潔】
+1. **下注時間**: [時間]
+2. **偏財指數**: (0-100%)
+3. **建議選擇**: 🔴 單 (RED) 或 🔵 雙 (BLUE)
+4. **簡短建議**: 吉祥方位或顏色`,
+      'en': `You are an Astrology Master. Analyze luck for the Ladprao Shrimp Weighing Game (Odd/Even betting).
+Based on birth data and betting time, calculate the windfall luck.
+[Output Format - Be Concise]
+1. **Time**: [Target Time]
+2. **Luck Index**: (0-100%)
+3. **Prediction**: 🔴 ODD (RED) or 🔵 EVEN (BLUE)
+4. **Tip**: Lucky direction or color`
+    };
+    // --- App State ---
+    let state = {
+      lang: 'th',
+      step: 'input',
+      gender: 'male',
+      chatHistory: [],
+      loading: false,
+      demoMode: false
+    };
+    // --- DOM Elements ---
+    const $ = (id) => document.getElementById(id);
+    // Set today's date as default
+    const todayDate = new Date().toISOString().split('T')[0];
+    $('targetDateInput').value = todayDate;
+    $('nextDateInput').value = todayDate;
+    $('systemPromptInput').value = SYSTEM_PROMPTS['th'];
+    // --- Update UI based on language ---
+    function updateLanguage() {
+      const t = TRANSLATIONS[state.lang];
+      $('headerTitle').textContent = t.title;
+      $('headerSubtitle').textContent = t.subtitle;
+      $('introTitle').textContent = t.introTitle;
+      $('introText').textContent = t.introText;
+      $('apiKeyLabel').textContent = t.apiKeyLabel;
+      $('apiKeyInput').placeholder = t.apiKeyPlaceholder;
+      $('apiKeyNote').textContent = t.apiKeyNote;
+      $('userInfoLabel').textContent = t.userInfoLabel;
+      $('nameLabelEl').textContent = t.nameLabel;
+      $('genderLabelEl').textContent = t.genderLabel;
+      $('maleBtn').textContent = t.male;
+      $('femaleBtn').textContent = t.female;
+      $('birthDateLabelEl').textContent = t.birthDateLabel;
+      $('birthTimeLabelEl').textContent = t.birthTimeLabel;
+      $('birthCityLabelEl').textContent = t.birthCityLabel;
+      $('birthCityInput').placeholder = t.birthCityPlaceholder;
+      $('targetLabel').textContent = t.targetLabel;
+      $('advancedText').textContent = t.advancedSettings;
+      $('restoreDefaultBtn').textContent = t.restoreDefault;
+      $('startBtnText').textContent = t.startAnalysis;
+      $('loadingText').textContent = t.loading;
+      $('nextRoundTitle').textContent = t.nextRoundTitle;
+      $('nextRoundDesc').textContent = t.nextRoundDesc;
+      $('predictNextText').textContent = t.predictNext;
+      $('systemPromptInput').value = SYSTEM_PROMPTS[state.lang];
+    }
+    // --- Render chat messages ---
+    function renderContent(text) {
+      return text.split('\n').map(line => {
+        if (line.includes('🔴') || line.includes('คี่') || line.includes('ODD') || line.includes('單')) {
+          return `<div class="bg-red-500/20 border border-red-500/50 text-red-100 p-3 rounded-xl my-2 font-bold text-lg text-center shadow-[0_0_15px_rgba(239,68,68,0.3)]">${line}</div>`;
+        }
+        if (line.includes('🔵') || line.includes('คู่') || line.includes('EVEN') || line.includes('雙')) {
+          return `<div class="bg-blue-500/20 border border-blue-500/50 text-blue-100 p-3 rounded-xl my-2 font-bold text-lg text-center shadow-[0_0_15px_rgba(59,130,246,0.3)]">${line}</div>`;
+        }
+        if (line.startsWith('**')) {
+          return `<p class="font-bold text-amber-400 mt-2">${line.replace(/\*\*/g, '')}</p>`;
+        }
+        return `<p class="mb-1">${line}</p>`;
+      }).join('');
+    }
+    function renderChat() {
+      const t = TRANSLATIONS[state.lang];
+      const container = $('chatMessages');
+      container.innerHTML = state.chatHistory.map((msg, idx) => {
+        if (msg.role === 'assistant') {
+          return `
+            <div class="flex justify-start animate-fade-slide" style="animation-delay: ${idx * 0.1}s">
+              <div class="max-w-[90%] bg-slate-800 border border-white/10 rounded-2xl rounded-tl-none p-4 shadow-md">
+                <div class="flex items-center gap-2 mb-2 border-b border-white/5 pb-2">
+                  <div class="w-5 h-5 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-[8px] font-bold">AI</div>
+                  <span class="text-xs font-bold text-purple-300">${t.reportTitle}</span>
+                </div>
+                <div class="text-sm text-slate-200 leading-relaxed">${renderContent(msg.content)}</div>
+              </div>
+            </div>
+          `;
+        } else {
+          return `
+            <div class="flex justify-end animate-fade-slide">
+              <div class="max-w-[80%] bg-orange-600 text-white rounded-2xl rounded-tr-none p-3 shadow-md text-sm">
+                ${msg.content}
+              </div>
+            </div>
+          `;
+        }
+      }).join('');
+      // Scroll to bottom
+      setTimeout(() => {
+        $('chatEnd').scrollIntoView({ behavior: 'smooth' });
+      }, 100);
+    }
+    // --- Generate Demo Response ---
+    function generateDemoResponse(targetTime, name) {
+      const isOdd = Math.random() > 0.5;
+      const luckIndex = Math.floor(Math.random() * 40) + 55; // 55-95%
+      const directions = ['ทิศตะวันออก', 'ทิศเหนือ', 'ทิศใต้', 'ทิศตะวันตก'];
+      const colors = ['สีแดง', 'สีทอง', 'สีเขียว', 'สีขาว'];
+      const dir = directions[Math.floor(Math.random() * directions.length)];
+      const color = colors[Math.floor(Math.random() * colors.length)];
+      if (state.lang === 'th') {
+        return `**เวลา**: ${targetTime}
+**ดัชนีโชค**: ${luckIndex}%
+**ฟันธง**: ${isOdd ? '🔴 คี่ (RED)' : '🔵 คู่ (BLUE)'}
+**เคล็ดลับ**: ควรนั่ง${dir} สวมเสื้อ${color}เสริมดวง
+⚠️ *นี่คือโหมดทดสอบ - ผลลัพธ์สุ่มเพื่อทดสอบ UI*`;
+      } else if (state.lang === 'en') {
+        return `**Time**: ${targetTime}
+**Luck Index**: ${luckIndex}%
+**Prediction**: ${isOdd ? '🔴 ODD (RED)' : '🔵 EVEN (BLUE)'}
+**Tip**: Face East, wear golden colors
+⚠️ *Demo Mode - Random result for UI testing*`;
+      } else {
+        return `**下注時間**: ${targetTime}
+**偏財指數**: ${luckIndex}%
+**建議選擇**: ${isOdd ? '🔴 單 (RED)' : '🔵 雙 (BLUE)'}
+**簡短建議**: 面向東方，穿戴金色
+⚠️ *測試模式 - 隨機結果*`;
+      }
+    }
+    // --- API Call ---
+    async function startAnalysis(isNewRound = false) {
+      const t = TRANSLATIONS[state.lang];
+      const apiKey = $('apiKeyInput').value;
+      const demoMode = $('demoModeToggle').checked;
+      const name = $('nameInput').value;
+      const birthDate = $('birthDateInput').value;
+      const birthTime = $('birthTimeInput').value;
+      const birthCity = $('birthCityInput').value;
+      const targetDate = isNewRound ? $('nextDateInput').value : $('targetDateInput').value;
+      const targetTime = isNewRound ? $('nextTimeInput').value : $('targetTimeInput').value;
+      if (!demoMode && !apiKey) return alert(t.errorApiKey);
+      if (!name || !birthDate) return alert(t.errorInfo);
+      // Switch to chat view
+      state.step = 'chatting';
+      $('inputStep').classList.add('hidden');
+      $('chatStep').classList.remove('hidden');
+      $('resetBtn').classList.remove('hidden');
+      $('bottomBar').classList.add('hidden');
+      state.loading = true;
+      $('loadingIndicator').classList.remove('hidden');
+      $('loadingIndicator').classList.add('flex');
+      // Add greeting or user message
+      if (!isNewRound && state.chatHistory.length === 0) {
+        state.chatHistory.push({
+          role: 'assistant',
+          content: t.initialGreeting(name)
+        });
+      } else {
+        state.chatHistory.push({
+          role: 'user',
+          content: `${t.targetQuestionLabel}: ${targetTime}`
+        });
+      }
+      renderChat();
+      // Sync date inputs
+      $('nextDateInput').value = targetDate;
+      $('nextTimeInput').value = targetTime;
+      const userPrompt = `
+        [Target Request]
+        Analyze luck for Shrimp Game.
+        Target Date: ${targetDate}
+        Target Time: ${targetTime}
+        [User Info]
+        Name: ${name}
+        Gender: ${state.gender}
+        Birth: ${birthDate} ${birthTime} @ ${birthCity}
+      `;
+      const systemPrompt = $('systemPromptInput').value;
+      // Demo Mode - use mock response
+      if (demoMode) {
+        await new Promise(resolve => setTimeout(resolve, 1500)); // Simulate delay
+        const demoResponse = generateDemoResponse(targetTime, name);
+        state.chatHistory.push({ role: 'assistant', content: demoResponse });
+        state.loading = false;
+        $('loadingIndicator').classList.add('hidden');
+        $('loadingIndicator').classList.remove('flex');
+        $('bottomBar').classList.remove('hidden');
+        renderChat();
+        return;
+      }
+      try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
+        const response = await fetch('https://api.deepseek.com/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
+          },
+          body: JSON.stringify({
+            model: "deepseek-chat",
+            messages: [
+              { role: "system", content: systemPrompt },
+              { role: "user", content: userPrompt }
+            ],
+            temperature: 1.3,
+            stream: false
+          }),
+          signal: controller.signal
+        });
+        clearTimeout(timeoutId);
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error?.message || `HTTP ${response.status}: ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (data.error) throw new Error(data.error.message);
+        const aiResponse = data.choices[0].message.content;
+        state.chatHistory.push({ role: 'assistant', content: aiResponse });
+      } catch (error) {
+        let errorMsg = error.message;
+        if (error.name === 'AbortError') {
+          errorMsg = state.lang === 'th' ? 'หมดเวลาเชื่อมต่อ กรุณาลองใหม่' : 'Connection timeout. Please try again.';
+        } else if (error.message === 'Failed to fetch' || error.message.includes('load failed')) {
+          errorMsg = state.lang === 'th'
+            ? '❌ ไม่สามารถเชื่อมต่อ API ได้\n\nสาเหตุที่เป็นไปได้:\n1. API Key ไม่ถูกต้อง\n2. ปัญหาการเชื่อมต่ออินเทอร์เน็ต\n3. DeepSeek API อาจมีปัญหาชั่วคราว\n\n💡 ลองตรวจสอบ API Key หรือลองใหม่อีกครั้ง'
+            : '❌ Cannot connect to API\n\nPossible causes:\n1. Invalid API Key\n2. Network connection issue\n3. DeepSeek API temporary issue\n\n💡 Please check your API Key or try again.';
+        }
+        state.chatHistory.push({ role: 'assistant', content: errorMsg });
+      } finally {
+        state.loading = false;
+        $('loadingIndicator').classList.add('hidden');
+        $('loadingIndicator').classList.remove('flex');
+        $('bottomBar').classList.remove('hidden');
+        renderChat();
+      }
+    }
+    // --- Reset App ---
+    function resetApp() {
+      state.step = 'input';
+      state.chatHistory = [];
+      $('inputStep').classList.remove('hidden');
+      $('chatStep').classList.add('hidden');
+      $('resetBtn').classList.add('hidden');
+      $('bottomBar').classList.add('hidden');
+      $('chatMessages').innerHTML = '';
+    }
+    // --- Event Listeners ---
+    $('langBtn').addEventListener('click', () => {
+      const langs = ['th', 'en', 'zh-TW'];
+      const idx = langs.indexOf(state.lang);
+      state.lang = langs[(idx + 1) % langs.length];
+      updateLanguage();
+    });
+    $('maleBtn').addEventListener('click', () => {
+      state.gender = 'male';
+      $('maleBtn').className = 'flex-1 rounded-md text-xs bg-blue-600 text-white transition-colors';
+      $('femaleBtn').className = 'flex-1 rounded-md text-xs text-slate-500 transition-colors';
+    });
+    $('femaleBtn').addEventListener('click', () => {
+      state.gender = 'female';
+      $('femaleBtn').className = 'flex-1 rounded-md text-xs bg-pink-600 text-white transition-colors';
+      $('maleBtn').className = 'flex-1 rounded-md text-xs text-slate-500 transition-colors';
+    });
+    $('advancedToggle').addEventListener('click', () => {
+      const panel = $('advancedPanel');
+      const chevron = $('advancedChevron');
+      panel.classList.toggle('hidden');
+      chevron.style.transform = panel.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
+    });
+    $('restoreDefaultBtn').addEventListener('click', () => {
+      $('systemPromptInput').value = SYSTEM_PROMPTS[state.lang];
+    });
+    $('startBtn').addEventListener('click', () => startAnalysis(false));
+    $('predictNextBtn').addEventListener('click', () => startAnalysis(true));
+    $('resetBtn').addEventListener('click', resetApp);
+    // Initialize
+    updateLanguage();
+  </script>
+</body>
+</html>