Spaces:

Hosdroid
/

Aplood

Running

File size: 56,307 Bytes

cd0b2cb

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>کوکب تک | Kawkab Tech - پلتفرم هوش مصنوعی چندمنظوره</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/vazirmatn@5.0.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/vazirmatn@5.0.0/700.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vazirmatn', sans-serif; }
:root {
  --bg-1: #0a0e27;
  --bg-2: #141836;
  --bg-3: #1a1f45;
  --accent-1: #7c3aed;
  --accent-2: #ec4899;
  --accent-3: #06b6d4;
  --text: #e8eaf6;
  --text-dim: #9ca3af;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
}
body {
  background: var(--bg-1);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
}
.app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 280px;
  background: rgba(10, 14, 39, 0.8);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--glass-border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 24px;
}
.logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}
.logo-text h1 { font-size: 18px; font-weight: 700; background: linear-gradient(135deg, #fff, #c4b5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.logo-text p { font-size: 11px; color: var(--text-dim); }

.nav-section { margin-top: 16px; margin-bottom: 8px; padding: 0 12px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  color: var(--text-dim);
  font-size: 14px;
}
.nav-item:hover { background: var(--glass); color: var(--text); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.15));
  color: var(--text);
  border: 1px solid rgba(124, 58, 237, 0.3);
}
.nav-item i { width: 20px; text-align: center; }
.nav-badge { margin-right: auto; background: var(--accent-2); color: white; font-size: 10px; padding: 2px 8px; border-radius: 10px; }

.sidebar-footer {
  margin-top: auto;
  padding: 16px;
  background: var(--glass);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.8;
}
.sidebar-footer strong { color: var(--accent-3); }

/* Main */
.main { flex: 1; padding: 24px 32px; overflow-y: auto; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.topbar h2 { font-size: 26px; font-weight: 700; }
.topbar p { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.topbar-actions { display: flex; gap: 10px; }
.btn-icon {
  width: 40px; height: 40px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s;
}
.btn-icon:hover { background: rgba(124, 58, 237, 0.2); border-color: var(--accent-1); }

/* Panels */
.panel { display: none; animation: fadeIn 0.4s ease; }
.panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Chat */
.chat-container {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.message { display: flex; gap: 12px; max-width: 85%; animation: slideIn 0.3s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.message.user { margin-right: auto; flex-direction: row-reverse; }
.message-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.message.assistant .message-avatar { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); }
.message.user .message-avatar { background: linear-gradient(135deg, var(--accent-3), #0891b2); }
.message-content {
  background: rgba(255, 255, 255, 0.05);
  padding: 12px 16px;
  border-radius: 14px;
  line-height: 1.8;
  font-size: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.message.user .message-content { background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1)); }
.message-content img { max-width: 100%; border-radius: 10px; margin-top: 8px; }
.typing { display: flex; gap: 4px; padding: 8px 0; }
.typing span { width: 8px; height: 8px; background: var(--accent-1); border-radius: 50%; animation: typing 1.4s infinite; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-8px); opacity: 1; } }

.chat-input-area {
  padding: 16px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  gap: 10px;
  align-items: center;
}
.chat-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  resize: none;
  outline: none;
  transition: all 0.3s;
  min-height: 48px;
  max-height: 150px;
}
.chat-input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); }
.send-btn {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}
.send-btn:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Image Generator */
.image-gen {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px;
  height: calc(100vh - 180px);
}
.gen-controls, .gen-preview {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(10px);
}
.gen-controls h3, .gen-preview h3 { font-size: 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: all 0.3s;
  font-family: inherit;
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--accent-1); }
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-chip {
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}
.style-chip:hover { border-color: var(--accent-1); }
.style-chip.active { background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(236, 72, 153, 0.2)); border-color: var(--accent-1); }
.generate-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.generate-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4); }
.generate-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.gen-preview { display: flex; flex-direction: column; }
.preview-area {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  min-height: 400px;
}
.preview-placeholder { text-align: center; color: var(--text-dim); }
.preview-placeholder i { font-size: 60px; margin-bottom: 16px; opacity: 0.3; }
.preview-area img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.preview-actions { display: flex; gap: 10px; margin-top: 16px; }
.preview-actions button {
  flex: 1;
  padding: 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
}
.preview-actions button:hover { background: rgba(124, 58, 237, 0.2); }

/* Tools */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.tool-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}
.tool-card:hover { transform: translateY(-4px); border-color: var(--accent-1); box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2); }
.tool-icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.tool-card h4 { font-size: 16px; margin-bottom: 6px; }
.tool-card p { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

/* Tool Panel */
.tool-panel {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(10px);
}
.tool-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--glass-border); }
.tool-panel-header h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.back-btn {
  padding: 8px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}
.tool-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tool-workspace textarea {
  width: 100%;
  min-height: 300px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  line-height: 1.8;
}
.tool-workspace .output-area {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px;
  min-height: 300px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.8;
  overflow-y: auto;
}
.tool-options { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tool-options select, .tool-options button {
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.tool-options button { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); border: none; font-weight: 700; }
.tool-options button:hover { transform: translateY(-1px); }

/* Loader */
.loader {
  width: 50px; height: 50px;
  border: 4px solid var(--glass-border);
  border-top-color: var(--accent-1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  padding: 12px 24px;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
  transition: transform 0.3s;
  z-index: 1000;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* Mobile */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .image-gen { grid-template-columns: 1fr; height: auto; }
  .tool-workspace { grid-template-columns: 1fr; }
  .main { padding: 16px; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.5); }
</style>
</head>
<body>
<div class="app">
  <!-- Sidebar -->
  <aside class="sidebar">
    <div class="logo">
      <div class="logo-icon"><i class="fas fa-star"></i></div>
      <div class="logo-text">
        <h1>کوکب تک</h1>
        <p>Kawkab Tech AI</p>
      </div>
    </div>

    <div class="nav-section">ابزارهای اصلی</div>
    <div class="nav-item active" data-panel="chat">
      <i class="fas fa-comments"></i>
      <span>چت هوشمند</span>
    </div>
    <div class="nav-item" data-panel="image">
      <i class="fas fa-image"></i>
      <span>تولید تصویر</span>
      <span class="nav-badge">AI</span>
    </div>
    <div class="nav-item" data-panel="tools">
      <i class="fas fa-toolbox"></i>
      <span>ابزارهای کاربردی</span>
    </div>

    <div class="nav-section">تبدیل و پردازش</div>
    <div class="nav-item" data-panel="tool-text">
      <i class="fas fa-font"></i>
      <span>پردازش متن</span>
    </div>
    <div class="nav-item" data-panel="tool-json">
      <i class="fas fa-code"></i>
      <span>JSON / فرمت‌بندی</span>
    </div>
    <div class="nav-item" data-panel="tool-encode">
      <i class="fas fa-lock"></i>
      <span>رمزنگاری / Base64</span>
    </div>
    <div class="nav-item" data-panel="tool-color">
      <i class="fas fa-palette"></i>
      <span>تبدیل رنگ</span>
    </div>
    <div class="nav-item" data-panel="tool-counter">
      <i class="fas fa-calculator"></i>
      <span>آمار متن</span>
    </div>
    <div class="nav-item" data-panel="tool-regex">
      <i class="fas fa-magnifying-glass"></i>
      <span>تست Regex</span>
    </div>

    <div class="sidebar-footer">
      <strong>⚡ کوکب تک</strong><br>
      با کمک <strong>Qwen AI</strong> — کاملاً متصل به هوش مصنوعی، بدون ثبت‌نام و رایگان.
    </div>
  </aside>

  <!-- Main -->
  <main class="main">
    <div class="topbar">
      <div>
        <h2 id="panelTitle">چت هوشمند</h2>
        <p id="panelDesc">گفتگو با هوش مصنوعی قدرتمند</p>
      </div>
      <div class="topbar-actions">
        <button class="btn-icon" title="پاکسازی" onclick="clearCurrent()"><i class="fas fa-trash"></i></button>
        <button class="btn-icon" title="تنظیمات" onclick="showToast('به‌زودی فعال می‌شود')"><i class="fas fa-gear"></i></button>
      </div>
    </div>

    <!-- Chat Panel -->
    <div class="panel active" id="panel-chat">
      <div class="chat-container">
        <div class="chat-messages" id="chatMessages">
          <div class="message assistant">
            <div class="message-avatar"><i class="fas fa-robot"></i></div>
            <div class="message-content">سلام! 👋 من دستیار هوشمند کوکب تک هستم. هر سوالی داری بپرس، از برنامه‌نویسی گرفته تا ترجمه، نوشتن متن، ایده‌پردازی و... همه رایگان و بدون ثبت‌نام!</div>
          </div>
        </div>
        <div class="chat-input-area">
          <textarea class="chat-input" id="chatInput" placeholder="پیام خود را بنویسید... (Shift+Enter برای خط جدید)" rows="1"></textarea>
          <button class="send-btn" id="sendBtn" onclick="sendMessage()"><i class="fas fa-paper-plane"></i></button>
        </div>
      </div>
    </div>

    <!-- Image Panel -->
    <div class="panel" id="panel-image">
      <div class="image-gen">
        <div class="gen-controls">
          <h3><i class="fas fa-wand-magic-sparkles"></i> تنظیمات تصویر</h3>
          <div class="form-group">
            <label>توضیح تصویر (Prompt)</label>
            <textarea id="imgPrompt" placeholder="مثال: یک گربه فضانورد روی ماه، با پس‌زمینه کهکشان، سبک سینمایی"></textarea>
          </div>
          <div class="form-group">
            <label>سبک هنری</label>
            <div class="style-grid" id="styleGrid">
              <div class="style-chip active" data-style="">طبیعی</div>
              <div class="style-chip" data-style=", digital art, highly detailed">دیجیتال</div>
              <div class="style-chip" data-style=", oil painting, classical">نقاشی</div>
              <div class="style-chip" data-style=", anime style, manga">انیمه</div>
              <div class="style-chip" data-style=", 3d render, octane">سه‌بعدی</div>
              <div class="style-chip" data-style=", cinematic, movie still">سینمایی</div>
              <div class="style-chip" data-style=", watercolor, soft">آبرنگ</div>
              <div class="style-chip" data-style=", pixel art, retro">پیکسل</div>
              <div class="style-chip" data-style=", photorealistic, 8k">واقع‌گرا</div>
            </div>
          </div>
          <div class="form-group">
            <label>نسبت تصویر</label>
            <select id="imgRatio">
              <option value="1024x1024">مربع (1:1)</option>
              <option value="1280x720">افقی (16:9)</option>
              <option value="720x1280">عمودی (9:16)</option>
              <option value="1024x768">استاندارد (4:3)</option>
            </select>
          </div>
          <button class="generate-btn" id="generateBtn" onclick="generateImage()">
            <i class="fas fa-sparkles"></i>
            <span>تولید تصویر</span>
          </button>
        </div>
        <div class="gen-preview">
          <h3><i class="fas fa-eye"></i> پیش‌نمایش</h3>
          <div class="preview-area" id="previewArea">
            <div class="preview-placeholder">
              <i class="fas fa-image"></i>
              <p>تصویر تولید شده اینجا نمایش داده می‌شود</p>
            </div>
          </div>
          <div class="preview-actions">
            <button onclick="downloadImage()"><i class="fas fa-download"></i> دانلود</button>
            <button onclick="regenerateImage()"><i class="fas fa-rotate"></i> تولید مجدد</button>
            <button onclick="copyPrompt()"><i class="fas fa-copy"></i> کپی Prompt</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Tools List -->
    <div class="panel" id="panel-tools">
      <div class="tools-grid">
        <div class="tool-card" onclick="openTool('text')">
          <div class="tool-icon" style="background:linear-gradient(135deg,#7c3aed,#ec4899)"><i class="fas fa-font"></i></div>
          <h4>پردازش متن</h4>
          <p>تبدیل به حروف بزرگ/کوچک، معکوس، حذف خطوط خالی و...</p>
        </div>
        <div class="tool-card" onclick="openTool('json')">
          <div class="tool-icon" style="background:linear-gradient(135deg,#06b6d4,#3b82f6)"><i class="fas fa-code"></i></div>
          <h4>JSON Formatter</h4>
          <p>فرمت‌بندی، اعتبارسنجی و تبدیل JSON</p>
        </div>
        <div class="tool-card" onclick="openTool('encode')">
          <div class="tool-icon" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><i class="fas fa-lock"></i></div>
          <h4>رمزنگاری / Base64</h4>
          <p>تبدیل Base64، URL Encode، MD5 و...</p>
        </div>
        <div class="tool-card" onclick="openTool('color')">
          <div class="tool-icon" style="background:linear-gradient(135deg,#ec4899,#f59e0b)"><i class="fas fa-palette"></i></div>
          <h4>تبدیل رنگ</h4>
          <p>HEX ↔ RGB ↔ HSL با پیش‌نمایش زنده</p>
        </div>
        <div class="tool-card" onclick="openTool('counter')">
          <div class="tool-icon" style="background:linear-gradient(135deg,#10b981,#06b6d4)"><i class="fas fa-calculator"></i></div>
          <h4>آمار متن</h4>
          <p>شمارش کاراکتر، کلمه، خط، جمله و زمان خواندن</p>
        </div>
        <div class="tool-card" onclick="openTool('regex')">
          <div class="tool-icon" style="background:linear-gradient(135deg,#8b5cf6,#06b6d4)"><i class="fas fa-magnifying-glass"></i></div>
          <h4>تست Regex</h4>
          <p>تست الگوهای باقاعده روی متن با هایلایت</p>
        </div>
        <div class="tool-card" onclick="openTool('lorem')">
          <div class="tool-icon" style="background:linear-gradient(135deg,#ef4444,#ec4899)"><i class="fas fa-paragraph"></i></div>
          <h4>تولید متن آزمایشی</h4>
          <p>تولید Lorem Ipsum فارسی و انگلیسی</p>
        </div>
        <div class="tool-card" onclick="openTool('diff')">
          <div class="tool-icon" style="background:linear-gradient(135deg,#3b82f6,#10b981)"><i class="fas fa-code-compare"></i></div>
          <h4>مقایسه متن</h4>
          <p>مقایسه دو متن و نمایش تفاوت‌ها</p>
        </div>
      </div>
    </div>

    <!-- Text Tool -->
    <div class="panel" id="panel-tool-text">
      <div class="tool-panel">
        <div class="tool-panel-header">
          <h3><i class="fas fa-font" style="color:#ec4899"></i> پردازش متن</h3>
          <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button>
        </div>
        <div class="tool-options">
          <button onclick="textOp('upper')">حروف بزرگ</button>
          <button onclick="textOp('lower')">حروف کوچک</button>
          <button onclick="textOp('capitalize')">اول حرف بزرگ</button>
          <button onclick="textOp('reverse')">معکوس</button>
          <button onclick="textOp('trim')">حذف فاصله‌ها</button>
          <button onclick="textOp('removeEmpty')">حذف خطوط خالی</button>
          <button onclick="textOp('sort')">مرتب‌سازی خطوط</button>
          <button onclick="textOp('unique')">حذف تکراری‌ها</button>
          <button onclick="textOp('slug')">تبدیل به Slug</button>
          <button onclick="textOp('persian')">اصلاح ی/ک فارسی</button>
        </div>
        <div class="tool-workspace">
          <textarea id="textInput" placeholder="متن ورودی..."></textarea>
          <div class="output-area" id="textOutput">خروجی اینجا نمایش داده می‌شود...</div>
        </div>
      </div>
    </div>

    <!-- JSON Tool -->
    <div class="panel" id="panel-tool-json">
      <div class="tool-panel">
        <div class="tool-panel-header">
          <h3><i class="fas fa-code" style="color:#3b82f6"></i> JSON Formatter</h3>
          <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button>
        </div>
        <div class="tool-options">
          <button onclick="jsonOp('format')">فرمت‌بندی (Pretty)</button>
          <button onclick="jsonOp('minify')">فشرده‌سازی</button>
          <button onclick="jsonOp('validate')">اعتبارسنجی</button>
          <button onclick="jsonOp('escape')">Escape</button>
          <button onclick="jsonOp('unescape')">Unescape</button>
        </div>
        <div class="tool-workspace">
          <textarea id="jsonInput" placeholder='{"name":"کوکب","version":1}'></textarea>
          <div class="output-area" id="jsonOutput">خروجی...</div>
        </div>
      </div>
    </div>

    <!-- Encode Tool -->
    <div class="panel" id="panel-tool-encode">
      <div class="tool-panel">
        <div class="tool-panel-header">
          <h3><i class="fas fa-lock" style="color:#f59e0b"></i> رمزنگاری / Base64</h3>
          <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button>
        </div>
        <div class="tool-options">
          <button onclick="encodeOp('b64e')">Base64 Encode</button>
          <button onclick="encodeOp('b64d')">Base64 Decode</button>
          <button onclick="encodeOp('urlE')">URL Encode</button>
          <button onclick="encodeOp('urlD')">URL Decode</button>
          <button onclick="encodeOp('hex')">به Hex</button>
          <button onclick="encodeOp('unhex')">از Hex</button>
          <button onclick="encodeOp('reverse')">معکوس</button>
        </div>
        <div class="tool-workspace">
          <textarea id="encodeInput" placeholder="متن ورودی..."></textarea>
          <div class="output-area" id="encodeOutput">خروجی...</div>
        </div>
      </div>
    </div>

    <!-- Color Tool -->
    <div class="panel" id="panel-tool-color">
      <div class="tool-panel">
        <div class="tool-panel-header">
          <h3><i class="fas fa-palette" style="color:#ec4899"></i> تبدیل رنگ</h3>
          <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button>
        </div>
        <div class="form-group">
          <label>انتخاب رنگ</label>
          <input type="color" id="colorPicker" value="#7c3aed" style="height:60px;cursor:pointer">
        </div>
        <div class="tool-workspace">
          <div>
            <div class="form-group"><label>HEX</label><input type="text" id="hexVal" value="#7c3aed"></div>
            <div class="form-group"><label>RGB</label><input type="text" id="rgbVal" readonly></div>
            <div class="form-group"><label>HSL</label><input type="text" id="hslVal" readonly></div>
          </div>
          <div class="output-area" id="colorPreview" style="display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700">پیش‌نمایش رنگ</div>
        </div>
      </div>
    </div>

    <!-- Counter Tool -->
    <div class="panel" id="panel-tool-counter">
      <div class="tool-panel">
        <div class="tool-panel-header">
          <h3><i class="fas fa-calculator" style="color:#10b981"></i> آمار متن</h3>
          <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button>
        </div>
        <textarea id="counterInput" placeholder="متن خود را وارد کنید..." style="width:100%;min-height:200px;margin-bottom:20px"></textarea>
        <div class="tools-grid" id="counterStats">
          <div class="tool-card"><h4>کاراکترها</h4><p id="statChars">0</p></div>
          <div class="tool-card"><h4>کاراکتر (بدون فاصله)</h4><p id="statCharsNoSpace">0</p></div>
          <div class="tool-card"><h4>کلمات</h4><p id="statWords">0</p></div>
          <div class="tool-card"><h4>جملات</h4><p id="statSentences">0</p></div>
          <div class="tool-card"><h4>پاراگراف‌ها</h4><p id="statParagraphs">0</p></div>
          <div class="tool-card"><h4>خطوط</h4><p id="statLines">0</p></div>
          <div class="tool-card"><h4>زمان خواندن</h4><p id="statReadTime">0 دقیقه</p></div>
          <div class="tool-card"><h4>زمان گفتار</h4><p id="statSpeakTime">0 دقیقه</p></div>
        </div>
      </div>
    </div>

    <!-- Regex Tool -->
    <div class="panel" id="panel-tool-regex">
      <div class="tool-panel">
        <div class="tool-panel-header">
          <h3><i class="fas fa-magnifying-glass" style="color:#8b5cf6"></i> تست Regex</h3>
          <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button>
        </div>
        <div class="form-group">
          <label>الگو (Pattern)</label>
          <input type="text" id="regexPattern" placeholder="مثال: \b\w+@\w+\.\w+\b">
        </div>
        <div class="form-group">
          <label>پرچم‌ها (Flags)</label>
          <input type="text" id="regexFlags" value="gi" placeholder="gi">
        </div>
        <div class="form-group">
          <label>متن آزمایشی</label>
          <textarea id="regexText" placeholder="متن را وارد کنید..."></textarea>
        </div>
        <button class="generate-btn" onclick="testRegex()" style="margin-bottom:16px">
          <i class="fas fa-play"></i> تست
        </button>
        <div class="output-area" id="regexOutput" style="min-height:150px">نتایج اینجا...</div>
      </div>
    </div>

    <!-- Lorem Tool -->
    <div class="panel" id="panel-tool-lorem">
      <div class="tool-panel">
        <div class="tool-panel-header">
          <h3><i class="fas fa-paragraph" style="color:#ef4444"></i> تولید متن آزمایشی</h3>
          <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button>
        </div>
        <div class="tool-options">
          <select id="loremLang">
            <option value="fa">فارسی</option>
            <option value="en">انگلیسی</option>
          </select>
          <select id="loremCount">
            <option value="1">1 پاراگراف</option>
            <option value="3" selected>3 پاراگراف</option>
            <option value="5">5 پاراگراف</option>
            <option value="10">10 پاراگراف</option>
          </select>
          <button onclick="generateLorem()">تولید</button>
          <button onclick="copyText('loremOutput')">کپی</button>
        </div>
        <div class="output-area" id="loremOutput" style="min-height:300px">متن آزمایشی اینجا...</div>
      </div>
    </div>

    <!-- Diff Tool -->
    <div class="panel" id="panel-tool-diff">
      <div class="tool-panel">
        <div class="tool-panel-header">
          <h3><i class="fas fa-code-compare" style="color:#10b981"></i> مقایسه متن</h3>
          <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button>
        </div>
        <div class="tool-workspace">
          <div>
            <label style="font-size:13px;color:var(--text-dim);margin-bottom:8px;display:block">متن اصلی</label>
            <textarea id="diffA" placeholder="متن اول..."></textarea>
          </div>
          <div>
            <label style="font-size:13px;color:var(--text-dim);margin-bottom:8px;display:block">متن مقایسه</label>
            <textarea id="diffB" placeholder="متن دوم..."></textarea>
          </div>
        </div>
        <button class="generate-btn" onclick="compareDiff()" style="margin-top:16px"><i class="fas fa-code-compare"></i> مقایسه</button>
        <div class="output-area" id="diffOutput" style="margin-top:16px;min-height:200px">نتیجه مقایسه...</div>
      </div>
    </div>

  </main>
</div>

<div class="toast" id="toast"></div>

<script>
// ============ Navigation ============
const panelInfo = {
  'chat': ['چت هوشمند', 'گفتگو با هوش مصنوعی قدرتمند'],
  'image': ['تولید تصویر', 'ساخت تصاویر با هوش مصنوعی'],
  'tools': ['ابزارهای کاربردی', 'مجموعه‌ای از ابزارهای متن‌باز و کاربردی'],
  'tool-text': ['پردازش متن', 'ابزارهای پردازش و تبدیل متن'],
  'tool-json': ['JSON Formatter', 'فرمت‌بندی و اعتبارسنجی JSON'],
  'tool-encode': ['رمزنگاری / Base64', 'تبدیل و رمزنگاری داده‌ها'],
  'tool-color': ['تبدیل رنگ', 'تبدیل بین فرمت‌های رنگ'],
  'tool-counter': ['آمار متن', 'تحلیل و شمارش متن'],
  'tool-regex': ['تست Regex', 'تست الگوهای باقاعده'],
  'tool-lorem': ['تولید متن آزمایشی', 'Lorem Ipsum فارسی و انگلیسی'],
  'tool-diff': ['مقایسه متن', 'مقایسه و یافتن تفاوت‌ها']
};

function switchPanel(name) {
  document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
  document.getElementById('panel-' + name).classList.add('active');
  const navItem = document.querySelector(`.nav-item[data-panel="${name}"]`);
  if (navItem) navItem.classList.add('active');
  const info = panelInfo[name];
  if (info) {
    document.getElementById('panelTitle').textContent = info[0];
    document.getElementById('panelDesc').textContent = info[1];
  }
}

document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('click', () => switchPanel(item.dataset.panel));
});

function openTool(name) { switchPanel('tool-' + name); }

function showToast(msg) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 2500);
}

function clearCurrent() {
  const active = document.querySelector('.panel.active');
  if (!active) return;
  const id = active.id;
  if (id === 'panel-chat') {
    document.getElementById('chatMessages').innerHTML = `
      <div class="message assistant">
        <div class="message-avatar"><i class="fas fa-robot"></i></div>
        <div class="message-content">چت پاک شد. می‌توانید گفتگوی جدیدی شروع کنید!</div>
      </div>`;
  } else {
    active.querySelectorAll('textarea, input[type=text]').forEach(el => el.value = '');
    active.querySelectorAll('.output-area').forEach(el => el.textContent = '');
  }
  showToast('پاکسازی شد');
}

// ============ Chat ============
const chatMessages = document.getElementById('chatMessages');
const chatInput = document.getElementById('chatInput');
const sendBtn = document.getElementById('sendBtn');
let chatHistory = [];

chatInput.addEventListener('input', () => {
  chatInput.style.height = 'auto';
  chatInput.style.height = Math.min(chatInput.scrollHeight, 150) + 'px';
});
chatInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    sendMessage();
  }
});

function addMessage(role, content) {
  const div = document.createElement('div');
  div.className = 'message ' + role;
  const icon = role === 'user' ? 'fa-user' : 'fa-robot';
  div.innerHTML = `
    <div class="message-avatar"><i class="fas ${icon}"></i></div>
    <div class="message-content"></div>
  `;
  div.querySelector('.message-content').textContent = content;
  chatMessages.appendChild(div);
  chatMessages.scrollTop = chatMessages.scrollHeight;
  return div.querySelector('.message-content');
}

function addTyping() {
  const div = document.createElement('div');
  div.className = 'message assistant';
  div.id = 'typingMsg';
  div.innerHTML = `
    <div class="message-avatar"><i class="fas fa-robot"></i></div>
    <div class="message-content"><div class="typing"><span></span><span></span><span></span></div></div>
  `;
  chatMessages.appendChild(div);
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

async function sendMessage() {
  const text = chatInput.value.trim();
  if (!text) return;
  addMessage('user', text);
  chatInput.value = '';
  chatInput.style.height = 'auto';
  sendBtn.disabled = true;
  addTyping();
  chatHistory.push({ role: 'user', content: text });

  try {
    const response = await fetch('https://text.pollinations.ai/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        messages: [
          { role: 'system', content: 'تو دستیار هوشمند سایت کوکب تک هستی. به فارسی پاسخ بده، دوستانه و حرفه‌ای. پاسخ‌ها را مختصر و کاربردی بده.' },
          ...chatHistory
        ],
        model: 'openai',
        seed: Math.floor(Math.random() * 100000)
      })
    });
    const reply = await response.text();
    document.getElementById('typingMsg')?.remove();
    addMessage('assistant', reply);
    chatHistory.push({ role: 'assistant', content: reply });
    if (chatHistory.length > 20) chatHistory = chatHistory.slice(-20);
  } catch (err) {
    document.getElementById('typingMsg')?.remove();
    addMessage('assistant', 'متأسفانه خطایی در ارتباط رخ داد. لطفاً دوباره تلاش کنید.');
  }
  sendBtn.disabled = false;
}

// ============ Image Generator ============
let currentStyle = '';
let lastImageUrl = '';
let lastPrompt = '';

document.querySelectorAll('#styleGrid .style-chip').forEach(chip => {
  chip.addEventListener('click', () => {
    document.querySelectorAll('#styleGrid .style-chip').forEach(c => c.classList.remove('active'));
    chip.classList.add('active');
    currentStyle = chip.dataset.style;
  });
});

async function generateImage() {
  const prompt = document.getElementById('imgPrompt').value.trim();
  if (!prompt) { showToast('لطفاً توضیح تصویر را وارد کنید'); return; }
  const ratio = document.getElementById('imgRatio').value.split('x');
  const btn = document.getElementById('generateBtn');
  const preview = document.getElementById('previewArea');
  btn.disabled = true;
  btn.innerHTML = '<div class="loader" style="width:20px;height:20px;border-width:2px"></div> در حال تولید...';
  preview.innerHTML = '<div class="loader"></div>';

  const fullPrompt = prompt + currentStyle + ', high quality, detailed';
  lastPrompt = fullPrompt;
  const seed = Math.floor(Math.random() * 1000000);
  const url = `https://image.pollinations.ai/prompt/${encodeURIComponent(fullPrompt)}?width=${ratio[0]}&height=${ratio[1]}&seed=${seed}&nologo=true`;

  const img = new Image();
  img.onload = () => {
    preview.innerHTML = '';
    preview.appendChild(img);
    lastImageUrl = url;
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-sparkles"></i><span>تولید تصویر</span>';
    showToast('تصویر با موفقیت ساخته شد ✨');
  };
  img.onerror = () => {
    preview.innerHTML = '<div class="preview-placeholder"><i class="fas fa-triangle-exclamation"></i><p>خطا در تولید تصویر</p></div>';
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-sparkles"></i><span>تولید تصویر</span>';
    showToast('خطا در تولید تصویر');
  };
  img.src = url;
}

function regenerateImage() { if (lastPrompt) generateImage(); else showToast('ابتدا یک تصویر بسازید'); }
function downloadImage() {
  if (!lastImageUrl) { showToast('تصویری برای دانلود نیست'); return; }
  const a = document.createElement('a');
  a.href = lastImageUrl;
  a.download = 'kawkab-tech-' + Date.now() + '.jpg';
  a.target = '_blank';
  a.click();
}
function copyPrompt() {
  if (!lastPrompt) { showToast('prompt موجود نیست'); return; }
  navigator.clipboard.writeText(lastPrompt);
  showToast('Prompt کپی شد');
}

// ============ Text Tool ============
function textOp(op) {
  const input = document.getElementById('textInput').value;
  let out = input;
  switch (op) {
    case 'upper': out = input.toUpperCase(); break;
    case 'lower': out = input.toLowerCase(); break;
    case 'capitalize': out = input.replace(/\b\w/g, c => c.toUpperCase()); break;
    case 'reverse': out = input.split('').reverse().join(''); break;
    case 'trim': out = input.split('\n').map(l => l.trim()).join('\n'); break;
    case 'removeEmpty': out = input.split('\n').filter(l => l.trim()).join('\n'); break;
    case 'sort': out = input.split('\n').sort().join('\n'); break;
    case 'unique': out = [...new Set(input.split('\n'))].join('\n'); break;
    case 'slug': out = input.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, ''); break;
    case 'persian': out = input.replace(/ي/g, 'ی').replace(/ك/g, 'ک'); break;
  }
  document.getElementById('textOutput').textContent = out;
}

// ============ JSON Tool ============
function jsonOp(op) {
  const input = document.getElementById('jsonInput').value;
  const out = document.getElementById('jsonOutput');
  try {
    const parsed = JSON.parse(input);
    if (op === 'format') out.textContent = JSON.stringify(parsed, null, 2);
    else if (op === 'minify') out.textContent = JSON.stringify(parsed);
    else if (op === 'validate') out.textContent = '✅ JSON معتبر است\n\nنوع: ' + (Array.isArray(parsed) ? 'آرایه' : typeof parsed) + '\nتعداد کلیدها: ' + (typeof parsed === 'object' ? Object.keys(parsed).length : '-');
    else if (op === 'escape') out.textContent = JSON.stringify(input);
    else if (op === 'unescape') out.textContent = JSON.parse(input);
  } catch (e) {
    out.textContent = '❌ خطا: ' + e.message;
  }
}

// ============ Encode Tool ============
function encodeOp(op) {
  const input = document.getElementById('encodeInput').value;
  const out = document.getElementById('encodeOutput');
  try {
    switch (op) {
      case 'b64e': out.textContent = btoa(unescape(encodeURIComponent(input))); break;
      case 'b64d': out.textContent = decodeURIComponent(escape(atob(input))); break;
      case 'urlE': out.textContent = encodeURIComponent(input); break;
      case 'urlD': out.textContent = decodeURIComponent(input); break;
      case 'hex': out.textContent = Array.from(input).map(c => c.charCodeAt(0).toString(16).padStart(2, '0')).join(' '); break;
      case 'unhex': out.textContent = input.replace(/\s+/g, '').match(/.{1,2}/g).map(h => String.fromCharCode(parseInt(h, 16))).join(''); break;
      case 'reverse': out.textContent = input.split('').reverse().join(''); break;
    }
  } catch (e) { out.textContent = '❌ خطا: ' + e.message; }
}

// ============ Color Tool ============
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return [r, g, b];
}
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) { h = s = 0; }
  else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}
function updateColor(hex) {
  const [r, g, b] = hexToRgb(hex);
  const [h, s, l] = rgbToHsl(r, g, b);
  document.getElementById('hexVal').value = hex;
  document.getElementById('rgbVal').value = `rgb(${r}, ${g}, ${b})`;
  document.getElementById('hslVal').value = `hsl(${h}, ${s}%, ${l}%)`;
  const preview = document.getElementById('colorPreview');
  preview.style.background = hex;
  preview.style.color = l > 50 ? '#000' : '#fff';
  preview.textContent = hex.toUpperCase();
}
document.getElementById('colorPicker').addEventListener('input', e => updateColor(e.target.value));
document.getElementById('hexVal').addEventListener('input', e => {
  let v = e.target.value;
  if (/^#?[0-9a-fA-F]{6}$/.test(v)) {
    if (!v.startsWith('#')) v = '#' + v;
    document.getElementById('colorPicker').value = v;
    updateColor(v);
  }
});
updateColor('#7c3aed');

// ============ Counter Tool ============
document.getElementById('counterInput').addEventListener('input', e => {
  const t = e.target.value;
  document.getElementById('statChars').textContent = t.length.toLocaleString('fa-IR');
  document.getElementById('statCharsNoSpace').textContent = t.replace(/\s/g, '').length.toLocaleString('fa-IR');
  const words = t.trim() ? t.trim().split(/\s+/).length : 0;
  document.getElementById('statWords').textContent = words.toLocaleString('fa-IR');
  const sentences = t.trim() ? (t.match(/[.!?؟]+/g) || []).length || (t.trim() ? 1 : 0) : 0;
  document.getElementById('statSentences').textContent = sentences.toLocaleString('fa-IR');
  const paras = t.trim() ? t.split(/\n\s*\n/).filter(p => p.trim()).length : 0;
  document.getElementById('statParagraphs').textContent = paras.toLocaleString('fa-IR');
  document.getElementById('statLines').textContent = (t ? t.split('\n').length : 0).toLocaleString('fa-IR');
  document.getElementById('statReadTime').textContent = Math.max(1, Math.ceil(words / 200)) + ' دقیقه';
  document.getElementById('statSpeakTime').textContent = Math.max(1, Math.ceil(words / 130)) + ' دقیقه';
});

// ============ Regex Tool ============
function testRegex() {
  const pattern = document.getElementById('regexPattern').value;
  const flags = document.getElementById('regexFlags').value;
  const text = document.getElementById('regexText').value;
  const out = document.getElementById('regexOutput');
  if (!pattern) { out.textContent = 'الگو را وارد کنید'; return; }
  try {
    const regex = new RegExp(pattern, flags);
    const matches = [...text.matchAll(new RegExp(pattern, flags.includes('g') ? flags : flags + 'g'))];
    if (matches.length === 0) { out.textContent = '❌ هیچ موردی یافت نشد'; return; }
    let result = `✅ ${matches.length} مورد یافت شد:\n\n`;
    matches.forEach((m, i) => {
      result += `[${i + 1}] "${m[0]}" در موقعیت ${m.index}\n`;
      if (m.length > 1) result += `   گروه‌ها: ${m.slice(1).join(', ')}\n`;
    });
    out.textContent = result;
  } catch (e) { out.textContent = '❌ خطا: ' + e.message; }
}

// ============ Lorem Tool ============
function generateLorem() {
  const lang = document.getElementById('loremLang').value;
  const count = parseInt(document.getElementById('loremCount').value);
  const faWords = ['لورم','ایپسوم','متن','ساختگی','با','تولید','سادگی','نامفهوم','از','صنعت','چاپ','و','با','استفاده','طراحان','گرافیک','است','چاپخانه','با','متن','بلند','و','جملات','زیاد','روی','صفحه','اثر','می‌گذارد','و','بخشی','از','آن','را','به','درست','منتقل','نمی‌کند','به','همین','دلیل','ممکن','است','که','از','ابزارهای','جدید','و','کاربردی','برای','طراحی','استفاده','شود','کوکب','تک','هوش','مصنوعی','پیشرفته','تکنولوژی','نوین','دیجیتال','الگوریتم','داده','پردازش','تحلیل','سیستم','شبکه','کد','برنامه','نویسی','توسعه','وب','اپلیکیشن','موبایل','سرور','پایگاه','اطلاعات','امنیت','رمزنگاری','کلید','هویت','احراز','کاربر','رابط','گرافیکی','تجربه','کاربری','طراحی','رنگ','فونت','چیدمان','صفحه','آرایه','ساختار','منطق','شرط','حلقه','تابع','متغیر','شیء','کلاس','وراثت','چندریختی','کپسوله','سازی','انتزاع','الگو','پیاده','سازی','بهینه','سازی','کارایی','سرعت','عملکرد','بهبود','افزایش','کاهش','حذف','اضافه','ویرایش','ذخیره','بارگذاری','دانلود','آپلود','اشتراک','گذاری','انتشار','مدیریت','ناظر','کاربر','دسترسی','مجوز','سطح','نقش','وظیفه','مسئولیت','گزارش','آمار','تحلیل','نمودار','جدول','فیلتر','جستجو','مرتب','سازی','صفحه','بندی','نمایش','چاپ','خروجی','فرمت','تبدیل','تنظیم','پیکربندی','نصب','راه','اندازی','پشتیبان','گیری','بازیابی','خطا','رفع','اشکال','زدایی','آزمایش','تست','اعتبارسنجی','تأیید','رد','پذیرش','توسعه','انتشار','نسخه','به‌روزرسانی','ارتقاء','سازگاری','پشتیبانی','مستند','راهنما','آموزش','یادگیری','مهارت','تجربه','دانش','اطلاعات','منبع','محتوا','مقاله','پست','دیدگاه','نظر','بازخورد','امتیاز','رتبه','بندی','مقایسه','بررسی','ارزیابی','سنجش','اندازه','گیری','محاسبه','فرمول','معادله','رابطه','تناسب','تفاوت','شباهت','ویژگی','خصوصیت','مشخصه','خاصیت','ویژگی','مزیت','عیب','نقطه','قوت','ضعف','فرصت','تهدید','چالش','مشکل','راه','حل','ایده','خلاقیت','نوآوری','اختراع','کشف','تحقیق','مطالعه','بررسی','کاوش','جستجو','یافتن','رسیدن','هدف','مقصد','مسیر','راه','قدم','گام','حرکت','پیشرفت','ترقی','رشد','توسعه','گسترش','افزایش','بهبود','ارتقاء','تعالی','کمال','موفقیت','پیروزی','فتح','دستاورد','افتخار','سربلندی','عزت','کرامت','ارزش','اهمیت','جایگاه','منزلت','شأن','بزرگی','عظمت','شکوه','جلال','جمال','کمال','هنر','زیبایی','ظرافت','لطافت','نرمی','ملایمت','آرامش','صلح','دوستی','محبت','عشق','صداقت','صفا','صمیمیت','وفاداری','پایبندی','تعهد','مسئولیت','وظیفه','وظیفه','شناسی','انجام','اجرا','عمل','کار','تلاش','کوشش','مجاهدت','جهاد','مبارزه','نبرد','پیکار','رقابت','مسابقه','مسابقات','قهرمانی','جام','مدال','نشان','جایزه','پاداش','هدیه','تحفه','سوغات','یادگار','خاطره','حافظه','ذهن','فکر','اندیشه','تأمل','تفکر','تعقل','تدبر','بررسی','مطالعه','تحقیق','کاوش','جستجو','یافتن','کشف','اختراع','ابداع','نوآوری','خلاقیت','ایجاد','ساخت','تولید','تهیه','آماده','سازی','طراحی','برنامه','ریزی','سازماندهی','مدیریت','رهبری','هدایت','راهنمایی','آموزش','یاددهی','یادگیری','تحصیل','مطالعه','خواندن','نوشتن','گوش','دادن','شنیدن','دیدن','مشاهده','نگاه','کردن','توجه','دقت','تمرکز','حضور','آگاهی','هوشیاری','بیداری','خواب','استراحت','آرامش','سکوت','صلح','امنیت','آسایش','رفاه','سلامتی','تندرستی','بهداشت','پاکیزگی','نظافت','تمیزی','زیبایی','آراستگی','ظاهر','باطن','درون','بیرون','داخل','خارج','مرکز','کنار','پهلو','جانب','طرف','جهت','سمت','سو','راستا','مسیر','راه','جاده','خیابان','کوچه','بن','بست','آزاد','باز','بسته','قفل','کلید','رمز','پسورد','عبور','گذر','ورود','خروج','شروع','پایان','ابتدا','انته','اول','آخر','قبل','بعد','پیش','عقب','جلو','عقب','بالا','پایین','چپ','راست','میانه','وسط','کنار','نزدیک','دور','بعید','قریب','سریع','آهسته','تند','کند','زیاد','کم','بیشتر','کمتر','افزایش','کاهش','رشد','افت','صعود','نزول','بالا','پایین','اوج','فرود','قله','دره','کوه','دشت','صحرا','جنگل','دریا','اقیانوس','رود','جوی','چشمه','آب','آتش','خاک','باد','هوا','فضا','زمان','مکان','حرکت','سکون','ثبات','تغییر','تحول','دگرگونی','تبدیل','انتقال','جابجایی','حرکت','رفت','آمد','مسافرت','سفر','طی','کردن','پیمودن','گذر','کردن','عبور','کردن','رسیدن','ماندن','توقف','ایستادن','نشستن','خوابیدن','بیدار','شدن','بلند','شدن','راه','رفتن','دویدن','پریدن','شنا','کردن','پرواز','کردن','افتادن','برخاستن','نشستن','خم','شدن','ایستادن','نشستن','دراز','کشیدن','لم','دادن','تکیه','دادن','تکیه','گاه','صندلی','میز','تخت','فرش','موکت','پارکت','سرامیک','کاشی','دیوار','سقف','در','پنجره','بام','شیروانی','ستون','تیر','دیوار','اتاق','سالن','آشپزخانه','حمام','دستشویی','حیاط','باغ','تراس','بالکن','پشت','بام','زیر','زمین','همکف','طبقه','اول','دوم','سوم','چهارم','پنجم','ششم','هفتم','هشتم','نهم','دهم','یازدهم','دوازدهم'];
  const enWords = ['lorem','ipsum','dolor','sit','amet','consectetur','adipiscing','elit','sed','do','eiusmod','tempor','incididunt','ut','labore','et','dolore','magna','aliqua','enim','ad','minim','veniam','quis','nostrud','exercitation','ullamco','laboris','nisi','aliquip','ex','ea','commodo','consequat','duis','aute','irure','in','reprehenderit','voluptate','velit','esse','cillum','fugiat','nulla','pariatur','excepteur','sint','occaecat','cupidatat','non','proident','sunt','culpa','qui','officia','deserunt','mollit','anim','id','est','laborum'];
  const words = lang === 'fa' ? faWords : enWords;
  let result = '';
  for (let p = 0; p < count; p++) {
    const len = 30 + Math.floor(Math.random() * 40);
    let para = '';
    for (let i = 0; i < len; i++) {
      para += words[Math.floor(Math.random() * words.length)] + ' ';
    }
    para = para.trim();
    para = para.charAt(0).toUpperCase() + para.slice(1);
    if (!para.match(/[.!?]$/)) para += '.';
    result += para + '\n\n';
  }
  document.getElementById('loremOutput').textContent = result.trim();
}

// ============ Diff Tool ============
function compareDiff() {
  const a = document.getElementById('diffA').value.split('\n');
  const b = document.getElementById('diffB').value.split('\n');
  const out = document.getElementById('diffOutput');
  const max = Math.max(a.length, b.length);
  let result = '';
  let diffCount = 0;
  for (let i = 0; i < max; i++) {
    const la = a[i] || '';
    const lb = b[i] || '';
    if (la === lb) {
      result += `  ${i + 1}: ${la}\n`;
    } else {
      diffCount++;
      if (la) result += `- ${i + 1}: ${la}\n`;
      if (lb) result += `+ ${i + 1}: ${lb}\n`;
    }
  }
  out.textContent = `📊 تعداد تفاوت‌ها: ${diffCount}\n\n${result || '✅ دو متن یکسان هستند'}`;
}

// ============ Utilities ============
function copyText(id) {
  const text = document.getElementById(id).textContent;
  navigator.clipboard.writeText(text);
  showToast('کپی شد ✓');
}

// Init lorem
generateLorem();
</script>
</body>
</html>