Hugging Face's logo

Spaces:
Hosdroid
/
Aplood
Running

App Files Community
Aplood / 0.html
Hosdroid's picture
Hosdroid
Create 0.html
157d396 verified
Raw
History Blame Contribute Delete
42.2 kB
<!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(/