Spaces:

Hosdroid
/

Aplood

Running

File size: 42,215 Bytes

157d396

<!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="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⭐</text></svg>">
<style>
@import url('https://cdn.jsdelivr.net/fontsource/fonts/vazirmatn@latest/persian-400-normal.css');
@import url('https://cdn.jsdelivr.net/fontsource/fonts/vazirmatn@latest/persian-700-normal.css');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-0: #05060f;
  --bg-1: #0a0d1f;
  --bg-2: #121633;
  --accent: #8b5cf6;
  --accent-2: #ec4899;
  --accent-3: #06b6d4;
  --text: #e8ecf4;
  --text-dim: #94a3b8;
  --border: rgba(255,255,255,0.08);
  --glass: rgba(20, 25, 50, 0.6);
  --success: #10b981;
  --danger: #ef4444;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--bg-0);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.7;
}

.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.cosmos::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(139, 92, 246, 0.25), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(236, 72, 153, 0.2), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(6, 182, 212, 0.18), transparent 50%);
  animation: nebula 30s infinite alternate ease-in-out;
}
@keyframes nebula {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.2) rotate(10deg); }
}
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(2px 2px at 80% 10%, white, transparent),
    radial-gradient(1px 1px at 90% 60%, white, transparent);
  background-size: 300px 300px;
  animation: twinkle 4s infinite;
}
@keyframes twinkle {
  0%,100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  background: rgba(5, 6, 15, 0.7);
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
  animation: spin 20s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.logo-text h1 {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-text p {
  font-size: 11px;
  color: var(--text-dim);
}

.header-actions {
  display: flex;
  gap: 8px;
}
.icon-btn {
  width: 38px; height: 38px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}
.icon-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 10px 24px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 6, 15, 0.5);
  backdrop-filter: blur(10px);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.tab.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.15));
  border-color: rgba(139, 92, 246, 0.3);
  color: #fff;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
}
.tab-emoji { font-size: 15px; }

main {
  flex: 1;
  padding: 24px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.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); }
}

.panel-header {
  margin-bottom: 20px;
}
.panel-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panel-desc {
  color: var(--text-dim);
  font-size: 13px;
}

.chat-container {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.chat-messages {
  height: 520px;
  overflow-y: auto;
  padding: 20px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 3px; }

.message {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  animation: msgIn 0.3s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.message.user { flex-direction: row-reverse; }
.msg-avatar {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.message.bot .msg-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
.message.user .msg-avatar {
  background: linear-gradient(135deg, var(--accent-3), #3b82f6);
}
.msg-content {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.8;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.message.bot .msg-content {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-top-right-radius: 4px;
}
.message.user .msg-content {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-top-left-radius: 4px;
}
.msg-content pre {
  background: rgba(0,0,0,0.5);
  padding: 10px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
  direction: ltr;
  text-align: left;
  font-size: 12.5px;
  font-family: 'Courier New', monospace;
}
.msg-content code {
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: 'Courier New', monospace;
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
.typing-dots span {
  width: 7px; height: 7px;
  background: #c4b5fd;
  border-radius: 50%;
  animation: bounce 1.4s infinite;
}
.typing-dots span:nth-child(2){ animation-delay: 0.2s; }
.typing-dots span:nth-child(3){ animation-delay: 0.4s; }
@keyframes bounce {
  0%,60%,100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.chat-input-area {
  padding: 14px;
  border-top: 1px solid var(--border);
  background: rgba(5, 6, 15, 0.5);
}
.chat-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  transition: border-color 0.2s;
}
.chat-input-wrap:focus-within { border-color: rgba(139, 92, 246, 0.5); }
.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 6px 10px;
  resize: none;
  max-height: 120px;
  min-height: 24px;
  line-height: 1.6;
}
.chat-input::placeholder { color: #64748b; }

.send-btn {
  padding: 9px 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}
.send-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5); }
.send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.quick-prompt {
  padding: 5px 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 11.5px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.quick-prompt:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #fff;
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .image-grid { grid-template-columns: 1fr; }
}

.control-card, .image-result, .video-display, .about-content, .tool-workspace {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(20px);
}
.control-card h3, .image-result h3 {
  font-size: 15px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group {
  margin-bottom: 14px;
}
.form-label {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: rgba(139, 92, 246, 0.5);
}
.form-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}
.form-select {
  cursor: pointer;
}
.form-select option { background: var(--bg-1); }

.btn {
  padding: 10px 18px;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
  width: 100%;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); }

.image-result {
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.image-display {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  position: relative;
  overflow: hidden;
}
.image-display img {
  max-width: 100%;
  max-height: 500px;
  border-radius: 12px;
}
.image-placeholder {
  text-align: center;
  color: var(--text-dim);
  padding: 20px;
}
.image-placeholder .big-icon {
  font-size: 56px;
  margin-bottom: 10px;
  opacity: 0.5;
}
.image-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.image-actions .btn { width: auto; flex: 1; min-width: 100px; }

.loader {
  display: inline-block;
  width: 40px; height: 40px;
  border: 4px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
}
.loader.sm { width: 20px; height: 20px; border-width: 2px; }
@keyframes rotate {
  to { transform: rotate(360deg); }
}

.video-display { margin-top: 20px; }
.video-canvas {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  margin: 0 auto;
  display: block;
}
.video-controls {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.video-controls .btn { width: auto; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.tool-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: all 0.2s;
}
.tool-card:hover {
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}
.tool-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 700;
}
.tool-card h4 {
  font-size: 15px;
  margin-bottom: 5px;
}
.tool-card p {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

.tool-workspace {
  display: none;
  margin-top: 20px;
}
.tool-workspace.active { display: block; }
.tool-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.tool-workspace-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.drop-zone {
  border: 2px dashed rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(139, 92, 246, 0.05);
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.1);
}
.drop-zone-icon { font-size: 36px; margin-bottom: 8px; }
.drop-zone-text { color: var(--text-dim); font-size: 13px; }

.about-content h3 {
  font-size: 18px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-content p {
  color: var(--text-dim);
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.9;
}
.feature-list {
  list-style: none;
  margin: 14px 0;
}
.feature-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before {
  content: '✨';
  font-size: 16px;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.tech-badge {
  padding: 5px 11px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 100px;
  font-size: 11.5px;
  color: #c4b5fd;
}

footer {
  padding: 22px;
  text-align: center;
  border-top: 1px solid var(--border);
  background: rgba(5, 6, 15, 0.6);
  backdrop-filter: blur(20px);
  margin-top: 40px;
}
footer p {
  color: var(--text-dim);
  font-size: 12.5px;
  margin-bottom: 6px;
}
footer .powered {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 100px;
  font-size: 12.5px;
  color: #c4b5fd;
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  padding: 11px 18px;
  border-radius: 12px;
  color: var(--text);
  font-size: 13px;
  z-index: 1000;
  transition: transform 0.3s;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { border-color: rgba(16, 185, 129, 0.5); }
.toast.error { border-color: rgba(239, 68, 68, 0.5); }

.output-box {
  padding: 12px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  min-height: 50px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.7;
  margin-top: 12px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.btn-row .btn { width: auto; }

@media (max-width: 640px) {
  main { padding: 14px; }
  .panel-title { font-size: 20px; }
  .chat-messages { height: 420px; }
  .msg-content { max-width: 85%; }
  header { padding: 12px 14px; }
  .logo-text h1 { font-size: 16px; }
  .tabs { padding: 8px 14px; }
  .tab { padding: 8px 12px; font-size: 12px; }
}
</style>
</head>
<body>

<div class="cosmos">
  <div class="stars"></div>
</div>

<div class="app">

  <header>
    <div class="logo">
      <div class="logo-icon">⭐</div>
      <div class="logo-text">
        <h1>کوکب تک</h1>
        <p>Kawkab Tech — پلتفرم هوش مصنوعی</p>
      </div>
    </div>
    <div class="header-actions">
      <button class="icon-btn" id="clearChatBtn" title="پاک کردن چت">🗑️</button>
    </div>
  </header>

  <nav class="tabs">
    <button class="tab active" data-tab="chat">
      <span class="tab-emoji">💬</span> چت هوشمند
    </button>
    <button class="tab" data-tab="image">
      <span class="tab-emoji">🎨</span> تولید تصویر
    </button>
    <button class="tab" data-tab="video">
      <span class="tab-emoji">🎬</span> تولید ویدیو
    </button>
    <button class="tab" data-tab="tools">
      <span class="tab-emoji">🛠️</span> ابزارهای تبدیل
    </button>
    <button class="tab" data-tab="about">
      <span class="tab-emoji">ℹ️</span> درباره
    </button>
  </nav>

  <main>

    <section class="panel active" id="panel-chat">
      <div class="panel-header">
        <h2 class="panel-title">💬 چت هوشمند با AI</h2>
        <p class="panel-desc">گفتگوی زنده با مدل زبانی پیشرفته — بدون ثبت‌نام، کاملاً رایگان</p>
      </div>
      <div class="chat-container">
        <div class="chat-messages" id="chatMessages">
          <div class="message bot">
            <div class="msg-avatar">⭐</div>
            <div class="msg-content">
              سلام! من دستیار هوشمند <strong>کوکب تک</strong> هستم 🌟<br>
              هر سوالی داری بپرس — از برنامه‌نویسی و ریاضی گرفته تا ترجمه، تحلیل، ایده‌پردازی و هر چیز دیگه.
            </div>
          </div>
        </div>
        <div class="chat-input-area">
          <div class="chat-input-wrap">
            <textarea class="chat-input" id="chatInput" placeholder="پیامت رو بنویس... (Shift+Enter برای خط جدید)" rows="1"></textarea>
            <button class="send-btn" id="sendBtn">ارسال ➤</button>
          </div>
          <div class="quick-prompts">
            <button class="quick-prompt" data-prompt="یک داستان کوتاه خلاقانه بنویس">📖 داستان</button>
            <button class="quick-prompt" data-prompt="کد پایتون برای مرتب‌سازی لیست بنویس">💻 کد پایتون</button>
            <button class="quick-prompt" data-prompt="تفاوت React و Vue را توضیح بده">⚛️ React vs Vue</button>
            <button class="quick-prompt" data-prompt="یک شعر زیبا درباره ستاره ها بگو">✨ شعر</button>
            <button class="quick-prompt" data-prompt="معنی کلمه Serendipity چیست؟">📚 ترجمه</button>
          </div>
        </div>
      </div>
    </section>

    <section class="panel" id="panel-image">
      <div class="panel-header">
        <h2 class="panel-title">🎨 تولید تصویر با AI</h2>
        <p class="panel-desc">تصویر دلخواهت را توصیف کن — هوش مصنوعی آن را خلق می‌کند</p>
      </div>
      <div class="image-grid">
        <div class="control-card">
          <h3>⚙️ تنظیمات تصویر</h3>
          <div class="form-group">
            <label class="form-label">توصیف تصویر (انگلیسی بهتر است)</label>
            <textarea class="form-textarea" id="imagePrompt" placeholder="مثال: A majestic Persian cat sitting on a throne in a cosmic galaxy, digital art, highly detailed"></textarea>
          </div>
          <div class="form-group">
            <label class="form-label">سبک هنری</label>
            <select class="form-select" id="imageStyle">
              <option value="">بدون سبک خاص</option>
              <option value=", digital art, highly detailed">Digital Art</option>
              <option value=", oil painting, classical">Oil Painting</option>
              <option value=", anime style, vibrant colors">Anime</option>
              <option value=", photorealistic, 8k, ultra detailed">Photorealistic</option>
              <option value=", watercolor painting, soft">Watercolor</option>
              <option value=", cyberpunk, neon lights, futuristic">Cyberpunk</option>
              <option value=", fantasy art, magical, ethereal">Fantasy</option>
              <option value=", minimalist, clean, modern">Minimalist</option>
              <option value=", 3d render, octane, cinema 4d">3D Render</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">ابعاد تصویر</label>
            <select class="form-select" id="imageSize">
              <option value="1024x1024">مربع (1024×1024)</option>
              <option value="1280x720">افقی (1280×720)</option>
              <option value="720x1280">عمودی (720×1280)</option>
              <option value="1920x1080">Full HD (1920×1080)</option>
              <option value="512x512">کوچک (512×512)</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">مدل</label>
            <select class="form-select" id="imageModel">
              <option value="flux">Flux (پیشنهادی)</option>
              <option value="flux-realism">Flux Realism</option>
              <option value="flux-anime">Flux Anime</option>
              <option value="flux-3d">Flux 3D</option>
              <option value="turbo">Turbo (سریع)</option>
            </select>
          </div>
          <button class="btn btn-primary" id="generateImageBtn">✨ خلق تصویر</button>
        </div>
        <div class="image-result">
          <h3>🖼️ نتیجه</h3>
          <div class="image-display" id="imageDisplay">
            <div class="image-placeholder">
              <div class="big-icon">🎨</div>
              <p>توصیف تصویر را وارد کن و روی "خلق تصویر" کلیک کن</p>
            </div>
          </div>
          <div class="image-actions" id="imageActions" style="display:none;">
            <button class="btn btn-secondary" id="downloadImageBtn">💾 دانلود</button>
            <button class="btn btn-secondary" id="copyImageBtn">📋 کپی لینک</button>
            <button class="btn btn-secondary" id="regenerateImageBtn">🔄 تولید مجدد</button>
          </div>
        </div>
      </div>
    </section>

    <section class="panel" id="panel-video">
      <div class="panel-header">
        <h2 class="panel-title">🎬 تولید ویدیو از متن</h2>
        <p class="panel-desc">متن خود را به ویدیوی متحرک تبدیل کن — با افکت‌های زیبا</p>
      </div>
      <div class="control-card">
        <h3>⚙️ تنظیمات ویدیو</h3>
        <div class="form-group">
          <label class="form-label">متن ویدیو</label>
          <textarea class="form-textarea" id="videoText" placeholder="متنی که می‌خواهی در ویدیو نمایش داده شود..."></textarea>
        </div>
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
          <div class="form-group">
            <label class="form-label">سبک انیمیشن</label>
            <select class="form-select" id="videoStyle">
              <option value="typewriter">ماشین تحریر</option>
              <option value="fade">محو شدن</option>
              <option value="bounce">پرش</option>
              <option value="glitch">گلیچ</option>
              <option value="neon">نئون</option>
              <option value="particles">ذرات</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">رنگ پس‌زمینه</label>
            <select class="form-select" id="videoBg">
              <option value="cosmic">کهکشانی</option>
              <option value="sunset">غروب</option>
              <option value="ocean">اقیانوس</option>
              <option value="forest">جنگل</option>
              <option value="dark">تیره</option>
            </select>
          </div>
        </div>
        <button class="btn btn-primary" id="generateVideoBtn">🎬 ساخت ویدیو</button>
      </div>
      <div class="video-display" id="videoDisplay" style="display:none;">
        <canvas class="video-canvas" id="videoCanvas" width="1280" height="720"></canvas>
        <div class="video-controls">
          <button class="btn btn-secondary" id="playVideoBtn">▶️ پخش</button>
          <button class="btn btn-secondary" id="pauseVideoBtn">⏸️ توقف</button>
          <button class="btn btn-secondary" id="resetVideoBtn">🔄 بازنشانی</button>
          <button class="btn btn-primary" id="recordVideoBtn" style="width:auto;">🔴 ضبط ویدیو</button>
        </div>
      </div>
    </section>

    <section class="panel" id="panel-tools">
      <div class="panel-header">
        <h2 class="panel-title">🛠️ ابزارهای تبدیل و پردازش</h2>
        <p class="panel-desc">مجموعه‌ای از ابزارهای کاربردی برای تبدیل و پردازش محتوا</p>
      </div>

      <div class="tools-grid" id="toolsGrid">
        <div class="tool-card" data-tool="text2speech">
          <div class="tool-icon">🔊</div>
          <h4>تبدیل متن به گفتار</h4>
          <p>متن فارسی یا انگلیسی را به صدا تبدیل کن</p>
        </div>
        <div class="tool-card" data-tool="image-convert">
          <div class="tool-icon">🖼️</div>
          <h4>تبدیل فرمت تصویر</h4>
          <p>PNG, JPG, WebP, BMP — تبدیل بین فرمت‌ها</p>
        </div>
        <div class="tool-card" data-tool="image-resize">
          <div class="tool-icon">📐</div>
          <h4>تغییر اندازه تصویر</h4>
          <p>ابعاد تصویر را به دلخواه تغییر بده</p>
        </div>
        <div class="tool-card" data-tool="text-tools">
          <div class="tool-icon">📝</div>
          <h4>ابزارهای متن</h4>
          <p>شمارش کلمات، تبدیل حروف، کدگذاری و...</p>
        </div>
        <div class="tool-card" data-tool="color-tools">
          <div class="tool-icon">🎨</div>
          <h4>ابزارهای رنگ</h4>
          <p>تبدیل HEX, RGB, HSL — پالت رنگ</p>
        </div>
        <div class="tool-card" data-tool="qr-code">
          <div class="tool-icon">📱</div>
          <h4>ساخت QR Code</h4>
          <p>از هر متن یا لینک، QR Code بساز</p>
        </div>
        <div class="tool-card" data-tool="password-gen">
          <div class="tool-icon">🔐</div>
          <h4>تولید رمز عبور</h4>
          <p>رمز عبور قامن و تصادفی بساز</p>
        </div>
        <div class="tool-card" data-tool="json-formatter">
          <div class="tool-icon">{ }</div>
          <h4>مرتب‌ساز JSON</h4>
          <p>JSON را زیبا و مرتب کن یا فشرده</p>
        </div>
      </div>

      <div class="tool-workspace" id="workspace-text2speech">
        <div class="tool-workspace-header">
          <h3>🔊 تبدیل متن به گفتار</h3>
          <button class="btn btn-secondary close-tool-btn">✕ بستن</button>
        </div>
        <div class="form-group">
          <label class="form-label">متن</label>
          <textarea class="form-textarea" id="ttsText" placeholder="متن خود را اینجا بنویسید..."></textarea>
        </div>
        <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px;">
          <div class="form-group">
            <label class="form-label">صدا</label>
            <select class="form-select" id="ttsVoice"></select>
          </div>
          <div class="form-group">
            <label class="form-label">سرعت: <span id="ttsRateVal">1</span></label>
            <input type="range" id="ttsRate" min="0.5" max="2" step="0.1" value="1" style="width:100%;">
          </div>
          <div class="form-group">
            <label class="form-label">زیر و بمی: <span id="ttsPitchVal">1</span></label>
            <input type="range" id="ttsPitch" min="0" max="2" step="0.1" value="1" style="width:100%;">
          </div>
        </div>
        <div style="display:flex; gap:8px;">
          <button class="btn btn-primary" id="speakBtn" style="width:auto;">▶️ پخش</button>
          <button class="btn btn-secondary" id="stopSpeechBtn">⏹️ توقف</button>
        </div>
      </div>

      <div class="tool-workspace" id="workspace-image-convert">
        <div class="tool-workspace-header">
          <h3>🖼️ تبدیل فرمت تصویر</h3>
          <button class="btn btn-secondary close-tool-btn">✕ بستن</button>
        </div>
        <div class="drop-zone" id="imgConvertDrop">
          <div class="drop-zone-icon">📁</div>
          <div class="drop-zone-text">تصویر را اینجا بکش یا کلیک کن</div>
          <input type="file" id="imgConvertFile" accept="image/*" style="display:none;">
        </div>
        <div class="form-group" style="margin-top:14px;">
          <label class="form-label">فرمت خروجی</label>
          <select class="form-select" id="imgConvertFormat">
            <option value="image/png">PNG</option>
            <option value="image/jpeg">JPEG</option>
            <option value="image/webp">WebP</option>
            <option value="image/bmp">BMP</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">کیفیت: <span id="imgQualityVal">90</span>%</label>
          <input type="range" id="imgQuality" min="10" max="100" value="90" style="width:100%;">
        </div>
        <button class="btn btn-primary" id="convertImageBtn">💾 تبدیل و دانلود</button>
        <div id="imgConvertPreview" style="margin-top:14px;"></div>
      </div>

      <div class="tool-workspace" id="workspace-image-resize">
        <div class="tool-workspace-header">
          <h3>📐 تغییر اندازه تصویر</h3>
          <button class="btn btn-secondary close-tool-btn">✕ بستن</button>
        </div>
        <div class="drop-zone" id="imgResizeDrop">
          <div class="drop-zone-icon">📁</div>
          <div class="drop-zone-text">تصویر را اینجا بکش یا کلیک کن</div>
          <input type="file" id="imgResizeFile" accept="image/*" style="display:none;">
        </div>
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px;">
          <div class="form-group">
            <label class="form-label">عرض (px)</label>
            <input type="number" class="form-input" id="resizeWidth" value="800">
          </div>
          <div class="form-group">
            <label class="form-label">ارتفاع (px)</label>
            <input type="number" class="form-input" id="resizeHeight" value="600">
          </div>
        </div>
        <button class="btn btn-primary" id="resizeImageBtn">📐 تغییر اندازه و دانلود</button>
      </div>

      <div class="tool-workspace" id="workspace-text-tools">
        <div class="tool-workspace-header">
          <h3>📝 ابزارهای متن</h3>
          <button class="btn btn-secondary close-tool-btn">✕ بستن</button>
        </div>
        <div class="form-group">
          <label class="form-label">متن ورودی</label>
          <textarea class="form-textarea" id="textToolInput" placeholder="متن خود را وارد کنید..." style="min-height:140px;"></textarea>
        </div>
        <div class="btn-row">
          <button class="btn btn-secondary" data-text-op="upper">حروف بزرگ</button>
          <button class="btn btn-secondary" data-text-op="lower">حروف کوچک</button>
          <button class="btn btn-secondary" data-text-op="reverse">معکوس</button>
          <button class="btn btn-secondary" data-text-op="trim">حذف فاصله‌ها</button>
          <button class="btn btn-secondary" data-text-op="encode-base64">Base64 Encode</button>
          <button class="btn btn-secondary" data-text-op="decode-base64">Base64 Decode</button>
          <button class="btn btn-secondary" data-text-op="encode-url">URL Encode</button>
          <button class="btn btn-secondary" data-text-op="count">آمار متن</button>
        </div>
        <div class="output-box" id="textToolOutput"></div>
      </div>

      <div class="tool-workspace" id="workspace-color-tools">
        <div class="tool-workspace-header">
          <h3>🎨 ابزارهای رنگ</h3>
          <button class="btn btn-secondary close-tool-btn">✕ بستن</button>
        </div>
        <div class="form-group">
          <label class="form-label">یک رنگ انتخاب کن</label>
          <input type="color" id="colorPicker" value="#8b5cf6" style="width:100%; height:60px; border-radius:10px; cursor:pointer; border:1px solid var(--border);">
        </div>
        <div class="output-box" id="colorOutput"></div>
      </div>

      <div class="tool-workspace" id="workspace-qr-code">
        <div class="tool-workspace-header">
          <h3>📱 ساخت QR Code</h3>
          <button class="btn btn-secondary close-tool-btn">✕ بستن</button>
        </div>
        <div class="form-group">
          <label class="form-label">متن یا لینک</label>
          <input type="text" class="form-input" id="qrInput" placeholder="https://example.com">
        </div>
        <button class="btn btn-primary" id="generateQRBtn">🔳 ساخت QR Code</button>
        <div id="qrOutput" style="margin-top:14px; text-align:center;"></div>
      </div>

      <div class="tool-workspace" id="workspace-password-gen">
        <div class="tool-workspace-header">
          <h3>🔐 تولید رمز عبور</h3>
          <button class="btn btn-secondary close-tool-btn">✕ بستن</button>
        </div>
        <div class="form-group">
          <label class="form-label">طول رمز: <span id="pwdLenVal">16</span></label>
          <input type="range" id="pwdLen" min="6" max="64" value="16" style="width:100%;">
        </div>
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
          <label style="display:flex; align-items:center; gap:8px; font-size:13px;"><input type="checkbox" id="pwdUpper" checked> حروف بزرگ</label>
          <label style="display:flex; align-items:center; gap:8px; font-size:13px;"><input type="checkbox" id="pwdLower" checked> حروف کوچک</label>
          <label style="display:flex; align-items:center; gap:8px; font-size:13px;"><input type="checkbox" id="pwdNumbers" checked> اعداد</label>
          <label style="display:flex; align-items:center; gap:8px; font-size:13px;"><input type="checkbox" id="pwdSymbols" checked> نمادها</label>
        </div>
        <button class="btn btn-primary" id="generatePasswordBtn" style="margin-top:14px;">🎲 تولید رمز</button>
        <div class="output-box" id="pwdOutput" style="direction:ltr; text-align:left; font-family:monospace; word-break:break-all;"></div>
      </div>

      <div class="tool-workspace" id="workspace-json-formatter">
        <div class="tool-workspace-header">
          <h3>{ } مرتب‌ساز JSON</h3>
          <button class="btn btn-secondary close-tool-btn">✕ بستن</button>
        </div>
        <div class="form-group">
          <label class="form-label">JSON ورودی</label>
          <textarea class="form-textarea" id="jsonInput" placeholder='{"name":"کوکب","version":1}' style="min-height:140px; direction:ltr; text-align:left; font-family:monospace;"></textarea>
        </div>
        <div class="btn-row">
          <button class="btn btn-primary" data-json-op="pretty" style="width:auto;">✨ مرتب‌سازی</button>
          <button class="btn btn-secondary" data-json-op="minify">📦 فشرده‌سازی</button>
          <button class="btn btn-secondary" data-json-op="validate">✅ اعتبارسنجی</button>
        </div>
        <div class="output-box" id="jsonOutput" style="direction:ltr; text-align:left; font-family:monospace; white-space:pre-wrap; font-size:12.5px;"></div>
      </div>

    </section>

    <section class="panel" id="panel-about">
      <div class="panel-header">
        <h2 class="panel-title">ℹ️ درباره کوکب تک</h2>
        <p class="panel-desc">پلتفرمی برای همه — بدون ثبت‌نام، بدون محدودیت، کاملاً رایگان</p>
      </div>
      <div class="about-content">
        <h3>⭐ کوکب تک چیست؟</h3>
        <p>
          <strong>کوکب تک</strong> یک پلتفرم یکپارچه هوش مصنوعی است که با هدف ارائه ابزارهای پیشرفته AI به صورت کاملاً رایگان و بدون نیاز به ثبت‌نام طراحی شده است.
        </p>
        <h3 style="margin-top:20px;">🚀 قابلیت‌ها</h3>
        <ul class="feature-list">
          <li>چت هوشمند با مدل زبانی پیشرفته (متن‌باز و رایگان)</li>
          <li>تولید تصویر با AI — چندین سبک هنری و ابعاد مختلف</li>
          <li>ساخت ویدیوهای متنی با افکت‌های متنوع</li>
          <li>تبدیل متن به گفتار (TTS) با پشتیبانی از فارسی</li>
          <li>تبدیل فرمت تصویر (PNG, JPG, WebP, BMP)</li>
          <li>تغییر اندازه تصویر بدون افت کیفیت</li>
          <li>ابزارهای متن (شمارش، تبدیل، کدگذاری)</li>
          <li>تولید QR Code از هر متن یا لینک</li>
          <li>تولید رمز عبور قامن و تصادفی</li>
          <li>مرتب‌ساز و اعتبارسنج JSON</li>
          <li>ابزارهای تبدیل رنگ (HEX, RGB, HSL)</li>
          <li>رابط کاربری فارسی، زیبا و واکنش‌گرا</li>
        </ul>
        <h3 style="margin-top:20px;">🔧 فناوری‌های استفاده‌شده</h3>
        <div class="tech-stack">
          <span class="tech-badge">Pollinations AI (Chat)</span>
          <span class="tech-badge">Pollinations Image API</span>
          <span class="tech-badge">Web Speech API</span>
          <span class="tech-badge">Canvas API</span>
          <span class="tech-badge">MediaRecorder API</span>
          <span class="tech-badge">QR Server API</span>
          <span class="tech-badge">HTML5 / CSS3</span>
          <span class="tech-badge">Vanilla JavaScript</span>
        </div>
        <h3 style="margin-top:20px;">💡 چرا رایگان؟</h3>
        <p>
          کوکب تک از API های متن‌باز و عمومی مانند <strong>Pollinations.ai</strong> استفاده می‌کند که به صورت رایگان در دسترس همه قرار دارند.
        </p>
      </div>
    </section>

  </main>

  <footer>
    <p>⭐ کوکب تک — ساخته شده با عشق برای جامعه فارسی‌زبان</p>
    <div class="powered">
      ✨ با کمک <strong style="color:#fff; margin:0 4px;">Qwen AI</strong> — کاملاً متصل به API های هوش مصنوعی
    </div>
  </footer>

</div>

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

<script>
// Tab Navigation
document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
  });
});

// Toast
function showToast(msg, type = 'success') {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.className = 'toast show ' + type;
  clearTimeout(toast._timer);
  toast._timer = setTimeout(() => toast.classList.remove('show'), 3000);
}

// Markdown Parser
function parseMarkdown(text) {
  if (!text) return '';
  let html = text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
  
  html = html.replace(/