| <!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 { |
| 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 { 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); } |
| |
| |
| .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-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-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-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 { |
| 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 { |
| 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 { |
| 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); } |
| |
| |
| @media (max-width: 900px) { |
| .sidebar { display: none; } |
| .image-gen { grid-template-columns: 1fr; height: auto; } |
| .tool-workspace { grid-template-columns: 1fr; } |
| .main { padding: 16px; } |
| } |
| |
| |
| ::-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"> |
| |
| <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 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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
| |
| 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('پاکسازی شد'); |
| } |
| |
| |
| 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; |
| } |
| |
| |
| 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 کپی شد'); |
| } |
| |
| |
| 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; |
| } |
| |
| |
| 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; |
| } |
| } |
| |
| |
| 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; } |
| } |
| |
| |
| 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'); |
| |
| |
| 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)) + ' دقیقه'; |
| }); |
| |
| |
| 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; } |
| } |
| |
| |
| 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(); |
| } |
| |
| |
| 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 || '✅ دو متن یکسان هستند'}`; |
| } |
| |
| |
| function copyText(id) { |
| const text = document.getElementById(id).textContent; |
| navigator.clipboard.writeText(text); |
| showToast('کپی شد ✓'); |
| } |
| |
| |
| generateLorem(); |
| </script> |
| </body> |
| </html> |
|
|
