Download chat.html from Hosdroid/Aplood: direct link, hf CLI and curl.
- Browser
- Download file 56.3 kB
-
https://huggingface.co/spaces/Hosdroid/Aplood/resolve/main/chat.html
- Command line
-
hf download hf://spaces/Hosdroid/Aplood/chat.html
-
curl -L -o chat.html https://huggingface.co/spaces/Hosdroid/Aplood/resolve/main/chat.html
56.3 kB
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>کوکب تک | Kawkab Tech - پلتفرم هوش مصنوعی چندمنظوره</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/vazirmatn@5.0.0/index.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/vazirmatn@5.0.0/700.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vazirmatn', sans-serif; } | |
| :root { | |
| --bg-1: #0a0e27; | |
| --bg-2: #141836; | |
| --bg-3: #1a1f45; | |
| --accent-1: #7c3aed; | |
| --accent-2: #ec4899; | |
| --accent-3: #06b6d4; | |
| --text: #e8eaf6; | |
| --text-dim: #9ca3af; | |
| --glass: rgba(255, 255, 255, 0.05); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| } | |
| body { | |
| background: var(--bg-1); | |
| color: var(--text); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| background-image: | |
| radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 70%); | |
| } | |
| .app { display: flex; min-height: 100vh; } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 280px; | |
| background: rgba(10, 14, 39, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-left: 1px solid var(--glass-border); | |
| padding: 24px 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| overflow-y: auto; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| margin-bottom: 24px; | |
| } | |
| .logo-icon { | |
| width: 44px; | |
| height: 44px; | |
| background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 22px; | |
| box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4); | |
| } | |
| .logo-text h1 { font-size: 18px; font-weight: 700; background: linear-gradient(135deg, #fff, #c4b5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } | |
| .logo-text p { font-size: 11px; color: var(--text-dim); } | |
| .nav-section { margin-top: 16px; margin-bottom: 8px; padding: 0 12px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| color: var(--text-dim); | |
| font-size: 14px; | |
| } | |
| .nav-item:hover { background: var(--glass); color: var(--text); } | |
| .nav-item.active { | |
| background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.15)); | |
| color: var(--text); | |
| border: 1px solid rgba(124, 58, 237, 0.3); | |
| } | |
| .nav-item i { width: 20px; text-align: center; } | |
| .nav-badge { margin-right: auto; background: var(--accent-2); color: white; font-size: 10px; padding: 2px 8px; border-radius: 10px; } | |
| .sidebar-footer { | |
| margin-top: auto; | |
| padding: 16px; | |
| background: var(--glass); | |
| border-radius: 12px; | |
| border: 1px solid var(--glass-border); | |
| font-size: 12px; | |
| color: var(--text-dim); | |
| line-height: 1.8; | |
| } | |
| .sidebar-footer strong { color: var(--accent-3); } | |
| /* Main */ | |
| .main { flex: 1; padding: 24px 32px; overflow-y: auto; } | |
| .topbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 28px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .topbar h2 { font-size: 26px; font-weight: 700; } | |
| .topbar p { color: var(--text-dim); font-size: 13px; margin-top: 4px; } | |
| .topbar-actions { display: flex; gap: 10px; } | |
| .btn-icon { | |
| width: 40px; height: 40px; | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 10px; | |
| color: var(--text); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .btn-icon:hover { background: rgba(124, 58, 237, 0.2); border-color: var(--accent-1); } | |
| /* Panels */ | |
| .panel { display: none; animation: fadeIn 0.4s ease; } | |
| .panel.active { display: block; } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } | |
| /* Chat */ | |
| .chat-container { | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| height: calc(100vh - 180px); | |
| display: flex; | |
| flex-direction: column; | |
| backdrop-filter: blur(10px); | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .message { display: flex; gap: 12px; max-width: 85%; animation: slideIn 0.3s ease; } | |
| @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } | |
| .message.user { margin-right: auto; flex-direction: row-reverse; } | |
| .message-avatar { | |
| width: 36px; height: 36px; | |
| border-radius: 10px; | |
| display: flex; align-items: center; justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 16px; | |
| } | |
| .message.assistant .message-avatar { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); } | |
| .message.user .message-avatar { background: linear-gradient(135deg, var(--accent-3), #0891b2); } | |
| .message-content { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 12px 16px; | |
| border-radius: 14px; | |
| line-height: 1.8; | |
| font-size: 14px; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .message.user .message-content { background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1)); } | |
| .message-content img { max-width: 100%; border-radius: 10px; margin-top: 8px; } | |
| .typing { display: flex; gap: 4px; padding: 8px 0; } | |
| .typing span { width: 8px; height: 8px; background: var(--accent-1); border-radius: 50%; animation: typing 1.4s infinite; } | |
| .typing span:nth-child(2) { animation-delay: 0.2s; } | |
| .typing span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-8px); opacity: 1; } } | |
| .chat-input-area { | |
| padding: 16px; | |
| border-top: 1px solid var(--glass-border); | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .chat-input { | |
| flex: 1; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| color: var(--text); | |
| font-size: 14px; | |
| resize: none; | |
| outline: none; | |
| transition: all 0.3s; | |
| min-height: 48px; | |
| max-height: 150px; | |
| } | |
| .chat-input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); } | |
| .send-btn { | |
| width: 48px; height: 48px; | |
| background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); | |
| border: none; | |
| border-radius: 12px; | |
| color: white; | |
| cursor: pointer; | |
| font-size: 16px; | |
| transition: all 0.3s; | |
| } | |
| .send-btn:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); } | |
| .send-btn:disabled { opacity: 0.5; cursor: not-allowed; } | |
| /* Image Generator */ | |
| .image-gen { | |
| display: grid; | |
| grid-template-columns: 1fr 1.5fr; | |
| gap: 24px; | |
| height: calc(100vh - 180px); | |
| } | |
| .gen-controls, .gen-preview { | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 24px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .gen-controls h3, .gen-preview h3 { font-size: 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } | |
| .form-group { margin-bottom: 18px; } | |
| .form-group label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; } | |
| .form-group input, .form-group textarea, .form-group select { | |
| width: 100%; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 10px; | |
| padding: 10px 14px; | |
| color: var(--text); | |
| font-size: 14px; | |
| outline: none; | |
| transition: all 0.3s; | |
| font-family: inherit; | |
| } | |
| .form-group textarea { resize: vertical; min-height: 100px; } | |
| .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--accent-1); } | |
| .style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } | |
| .style-chip { | |
| padding: 8px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| text-align: center; | |
| cursor: pointer; | |
| font-size: 12px; | |
| transition: all 0.3s; | |
| } | |
| .style-chip:hover { border-color: var(--accent-1); } | |
| .style-chip.active { background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(236, 72, 153, 0.2)); border-color: var(--accent-1); } | |
| .generate-btn { | |
| width: 100%; | |
| padding: 14px; | |
| background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); | |
| border: none; | |
| border-radius: 12px; | |
| color: white; | |
| font-size: 15px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .generate-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4); } | |
| .generate-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } | |
| .gen-preview { display: flex; flex-direction: column; } | |
| .preview-area { | |
| flex: 1; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| position: relative; | |
| min-height: 400px; | |
| } | |
| .preview-placeholder { text-align: center; color: var(--text-dim); } | |
| .preview-placeholder i { font-size: 60px; margin-bottom: 16px; opacity: 0.3; } | |
| .preview-area img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; } | |
| .preview-actions { display: flex; gap: 10px; margin-top: 16px; } | |
| .preview-actions button { | |
| flex: 1; | |
| padding: 10px; | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 10px; | |
| color: var(--text); | |
| cursor: pointer; | |
| font-size: 13px; | |
| transition: all 0.3s; | |
| } | |
| .preview-actions button:hover { background: rgba(124, 58, 237, 0.2); } | |
| /* Tools */ | |
| .tools-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); | |
| gap: 20px; | |
| } | |
| .tool-card { | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 16px; | |
| padding: 24px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| backdrop-filter: blur(10px); | |
| } | |
| .tool-card:hover { transform: translateY(-4px); border-color: var(--accent-1); box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2); } | |
| .tool-icon { | |
| width: 50px; height: 50px; | |
| border-radius: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 22px; | |
| margin-bottom: 14px; | |
| } | |
| .tool-card h4 { font-size: 16px; margin-bottom: 6px; } | |
| .tool-card p { font-size: 13px; color: var(--text-dim); line-height: 1.6; } | |
| /* Tool Panel */ | |
| .tool-panel { | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 28px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .tool-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--glass-border); } | |
| .tool-panel-header h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; } | |
| .back-btn { | |
| padding: 8px 16px; | |
| background: var(--glass); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 10px; | |
| color: var(--text); | |
| cursor: pointer; | |
| font-size: 13px; | |
| } | |
| .tool-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } | |
| .tool-workspace textarea { | |
| width: 100%; | |
| min-height: 300px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 12px; | |
| padding: 14px; | |
| color: var(--text); | |
| font-size: 14px; | |
| outline: none; | |
| resize: vertical; | |
| font-family: inherit; | |
| line-height: 1.8; | |
| } | |
| .tool-workspace .output-area { | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 12px; | |
| padding: 14px; | |
| min-height: 300px; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| font-size: 14px; | |
| line-height: 1.8; | |
| overflow-y: auto; | |
| } | |
| .tool-options { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } | |
| .tool-options select, .tool-options button { | |
| padding: 8px 14px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 8px; | |
| color: var(--text); | |
| font-size: 13px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| .tool-options button { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); border: none; font-weight: 700; } | |
| .tool-options button:hover { transform: translateY(-1px); } | |
| /* Loader */ | |
| .loader { | |
| width: 50px; height: 50px; | |
| border: 4px solid var(--glass-border); | |
| border-top-color: var(--accent-1); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* Toast */ | |
| .toast { | |
| position: fixed; | |
| bottom: 24px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); | |
| padding: 12px 24px; | |
| border-radius: 12px; | |
| color: white; | |
| font-size: 14px; | |
| box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4); | |
| transition: transform 0.3s; | |
| z-index: 1000; | |
| } | |
| .toast.show { transform: translateX(-50%) translateY(0); } | |
| /* Mobile */ | |
| @media (max-width: 900px) { | |
| .sidebar { display: none; } | |
| .image-gen { grid-template-columns: 1fr; height: auto; } | |
| .tool-workspace { grid-template-columns: 1fr; } | |
| .main { padding: 16px; } | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { width: 8px; height: 8px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.3); border-radius: 4px; } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.5); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <div class="logo"> | |
| <div class="logo-icon"><i class="fas fa-star"></i></div> | |
| <div class="logo-text"> | |
| <h1>کوکب تک</h1> | |
| <p>Kawkab Tech AI</p> | |
| </div> | |
| </div> | |
| <div class="nav-section">ابزارهای اصلی</div> | |
| <div class="nav-item active" data-panel="chat"> | |
| <i class="fas fa-comments"></i> | |
| <span>چت هوشمند</span> | |
| </div> | |
| <div class="nav-item" data-panel="image"> | |
| <i class="fas fa-image"></i> | |
| <span>تولید تصویر</span> | |
| <span class="nav-badge">AI</span> | |
| </div> | |
| <div class="nav-item" data-panel="tools"> | |
| <i class="fas fa-toolbox"></i> | |
| <span>ابزارهای کاربردی</span> | |
| </div> | |
| <div class="nav-section">تبدیل و پردازش</div> | |
| <div class="nav-item" data-panel="tool-text"> | |
| <i class="fas fa-font"></i> | |
| <span>پردازش متن</span> | |
| </div> | |
| <div class="nav-item" data-panel="tool-json"> | |
| <i class="fas fa-code"></i> | |
| <span>JSON / فرمتبندی</span> | |
| </div> | |
| <div class="nav-item" data-panel="tool-encode"> | |
| <i class="fas fa-lock"></i> | |
| <span>رمزنگاری / Base64</span> | |
| </div> | |
| <div class="nav-item" data-panel="tool-color"> | |
| <i class="fas fa-palette"></i> | |
| <span>تبدیل رنگ</span> | |
| </div> | |
| <div class="nav-item" data-panel="tool-counter"> | |
| <i class="fas fa-calculator"></i> | |
| <span>آمار متن</span> | |
| </div> | |
| <div class="nav-item" data-panel="tool-regex"> | |
| <i class="fas fa-magnifying-glass"></i> | |
| <span>تست Regex</span> | |
| </div> | |
| <div class="sidebar-footer"> | |
| <strong>⚡ کوکب تک</strong><br> | |
| با کمک <strong>Qwen AI</strong> — کاملاً متصل به هوش مصنوعی، بدون ثبتنام و رایگان. | |
| </div> | |
| </aside> | |
| <!-- Main --> | |
| <main class="main"> | |
| <div class="topbar"> | |
| <div> | |
| <h2 id="panelTitle">چت هوشمند</h2> | |
| <p id="panelDesc">گفتگو با هوش مصنوعی قدرتمند</p> | |
| </div> | |
| <div class="topbar-actions"> | |
| <button class="btn-icon" title="پاکسازی" onclick="clearCurrent()"><i class="fas fa-trash"></i></button> | |
| <button class="btn-icon" title="تنظیمات" onclick="showToast('بهزودی فعال میشود')"><i class="fas fa-gear"></i></button> | |
| </div> | |
| </div> | |
| <!-- Chat Panel --> | |
| <div class="panel active" id="panel-chat"> | |
| <div class="chat-container"> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="message assistant"> | |
| <div class="message-avatar"><i class="fas fa-robot"></i></div> | |
| <div class="message-content">سلام! 👋 من دستیار هوشمند کوکب تک هستم. هر سوالی داری بپرس، از برنامهنویسی گرفته تا ترجمه، نوشتن متن، ایدهپردازی و... همه رایگان و بدون ثبتنام!</div> | |
| </div> | |
| </div> | |
| <div class="chat-input-area"> | |
| <textarea class="chat-input" id="chatInput" placeholder="پیام خود را بنویسید... (Shift+Enter برای خط جدید)" rows="1"></textarea> | |
| <button class="send-btn" id="sendBtn" onclick="sendMessage()"><i class="fas fa-paper-plane"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Panel --> | |
| <div class="panel" id="panel-image"> | |
| <div class="image-gen"> | |
| <div class="gen-controls"> | |
| <h3><i class="fas fa-wand-magic-sparkles"></i> تنظیمات تصویر</h3> | |
| <div class="form-group"> | |
| <label>توضیح تصویر (Prompt)</label> | |
| <textarea id="imgPrompt" placeholder="مثال: یک گربه فضانورد روی ماه، با پسزمینه کهکشان، سبک سینمایی"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label>سبک هنری</label> | |
| <div class="style-grid" id="styleGrid"> | |
| <div class="style-chip active" data-style="">طبیعی</div> | |
| <div class="style-chip" data-style=", digital art, highly detailed">دیجیتال</div> | |
| <div class="style-chip" data-style=", oil painting, classical">نقاشی</div> | |
| <div class="style-chip" data-style=", anime style, manga">انیمه</div> | |
| <div class="style-chip" data-style=", 3d render, octane">سهبعدی</div> | |
| <div class="style-chip" data-style=", cinematic, movie still">سینمایی</div> | |
| <div class="style-chip" data-style=", watercolor, soft">آبرنگ</div> | |
| <div class="style-chip" data-style=", pixel art, retro">پیکسل</div> | |
| <div class="style-chip" data-style=", photorealistic, 8k">واقعگرا</div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>نسبت تصویر</label> | |
| <select id="imgRatio"> | |
| <option value="1024x1024">مربع (1:1)</option> | |
| <option value="1280x720">افقی (16:9)</option> | |
| <option value="720x1280">عمودی (9:16)</option> | |
| <option value="1024x768">استاندارد (4:3)</option> | |
| </select> | |
| </div> | |
| <button class="generate-btn" id="generateBtn" onclick="generateImage()"> | |
| <i class="fas fa-sparkles"></i> | |
| <span>تولید تصویر</span> | |
| </button> | |
| </div> | |
| <div class="gen-preview"> | |
| <h3><i class="fas fa-eye"></i> پیشنمایش</h3> | |
| <div class="preview-area" id="previewArea"> | |
| <div class="preview-placeholder"> | |
| <i class="fas fa-image"></i> | |
| <p>تصویر تولید شده اینجا نمایش داده میشود</p> | |
| </div> | |
| </div> | |
| <div class="preview-actions"> | |
| <button onclick="downloadImage()"><i class="fas fa-download"></i> دانلود</button> | |
| <button onclick="regenerateImage()"><i class="fas fa-rotate"></i> تولید مجدد</button> | |
| <button onclick="copyPrompt()"><i class="fas fa-copy"></i> کپی Prompt</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tools List --> | |
| <div class="panel" id="panel-tools"> | |
| <div class="tools-grid"> | |
| <div class="tool-card" onclick="openTool('text')"> | |
| <div class="tool-icon" style="background:linear-gradient(135deg,#7c3aed,#ec4899)"><i class="fas fa-font"></i></div> | |
| <h4>پردازش متن</h4> | |
| <p>تبدیل به حروف بزرگ/کوچک، معکوس، حذف خطوط خالی و...</p> | |
| </div> | |
| <div class="tool-card" onclick="openTool('json')"> | |
| <div class="tool-icon" style="background:linear-gradient(135deg,#06b6d4,#3b82f6)"><i class="fas fa-code"></i></div> | |
| <h4>JSON Formatter</h4> | |
| <p>فرمتبندی، اعتبارسنجی و تبدیل JSON</p> | |
| </div> | |
| <div class="tool-card" onclick="openTool('encode')"> | |
| <div class="tool-icon" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><i class="fas fa-lock"></i></div> | |
| <h4>رمزنگاری / Base64</h4> | |
| <p>تبدیل Base64، URL Encode، MD5 و...</p> | |
| </div> | |
| <div class="tool-card" onclick="openTool('color')"> | |
| <div class="tool-icon" style="background:linear-gradient(135deg,#ec4899,#f59e0b)"><i class="fas fa-palette"></i></div> | |
| <h4>تبدیل رنگ</h4> | |
| <p>HEX ↔ RGB ↔ HSL با پیشنمایش زنده</p> | |
| </div> | |
| <div class="tool-card" onclick="openTool('counter')"> | |
| <div class="tool-icon" style="background:linear-gradient(135deg,#10b981,#06b6d4)"><i class="fas fa-calculator"></i></div> | |
| <h4>آمار متن</h4> | |
| <p>شمارش کاراکتر، کلمه، خط، جمله و زمان خواندن</p> | |
| </div> | |
| <div class="tool-card" onclick="openTool('regex')"> | |
| <div class="tool-icon" style="background:linear-gradient(135deg,#8b5cf6,#06b6d4)"><i class="fas fa-magnifying-glass"></i></div> | |
| <h4>تست Regex</h4> | |
| <p>تست الگوهای باقاعده روی متن با هایلایت</p> | |
| </div> | |
| <div class="tool-card" onclick="openTool('lorem')"> | |
| <div class="tool-icon" style="background:linear-gradient(135deg,#ef4444,#ec4899)"><i class="fas fa-paragraph"></i></div> | |
| <h4>تولید متن آزمایشی</h4> | |
| <p>تولید Lorem Ipsum فارسی و انگلیسی</p> | |
| </div> | |
| <div class="tool-card" onclick="openTool('diff')"> | |
| <div class="tool-icon" style="background:linear-gradient(135deg,#3b82f6,#10b981)"><i class="fas fa-code-compare"></i></div> | |
| <h4>مقایسه متن</h4> | |
| <p>مقایسه دو متن و نمایش تفاوتها</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Text Tool --> | |
| <div class="panel" id="panel-tool-text"> | |
| <div class="tool-panel"> | |
| <div class="tool-panel-header"> | |
| <h3><i class="fas fa-font" style="color:#ec4899"></i> پردازش متن</h3> | |
| <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button> | |
| </div> | |
| <div class="tool-options"> | |
| <button onclick="textOp('upper')">حروف بزرگ</button> | |
| <button onclick="textOp('lower')">حروف کوچک</button> | |
| <button onclick="textOp('capitalize')">اول حرف بزرگ</button> | |
| <button onclick="textOp('reverse')">معکوس</button> | |
| <button onclick="textOp('trim')">حذف فاصلهها</button> | |
| <button onclick="textOp('removeEmpty')">حذف خطوط خالی</button> | |
| <button onclick="textOp('sort')">مرتبسازی خطوط</button> | |
| <button onclick="textOp('unique')">حذف تکراریها</button> | |
| <button onclick="textOp('slug')">تبدیل به Slug</button> | |
| <button onclick="textOp('persian')">اصلاح ی/ک فارسی</button> | |
| </div> | |
| <div class="tool-workspace"> | |
| <textarea id="textInput" placeholder="متن ورودی..."></textarea> | |
| <div class="output-area" id="textOutput">خروجی اینجا نمایش داده میشود...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- JSON Tool --> | |
| <div class="panel" id="panel-tool-json"> | |
| <div class="tool-panel"> | |
| <div class="tool-panel-header"> | |
| <h3><i class="fas fa-code" style="color:#3b82f6"></i> JSON Formatter</h3> | |
| <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button> | |
| </div> | |
| <div class="tool-options"> | |
| <button onclick="jsonOp('format')">فرمتبندی (Pretty)</button> | |
| <button onclick="jsonOp('minify')">فشردهسازی</button> | |
| <button onclick="jsonOp('validate')">اعتبارسنجی</button> | |
| <button onclick="jsonOp('escape')">Escape</button> | |
| <button onclick="jsonOp('unescape')">Unescape</button> | |
| </div> | |
| <div class="tool-workspace"> | |
| <textarea id="jsonInput" placeholder='{"name":"کوکب","version":1}'></textarea> | |
| <div class="output-area" id="jsonOutput">خروجی...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Encode Tool --> | |
| <div class="panel" id="panel-tool-encode"> | |
| <div class="tool-panel"> | |
| <div class="tool-panel-header"> | |
| <h3><i class="fas fa-lock" style="color:#f59e0b"></i> رمزنگاری / Base64</h3> | |
| <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button> | |
| </div> | |
| <div class="tool-options"> | |
| <button onclick="encodeOp('b64e')">Base64 Encode</button> | |
| <button onclick="encodeOp('b64d')">Base64 Decode</button> | |
| <button onclick="encodeOp('urlE')">URL Encode</button> | |
| <button onclick="encodeOp('urlD')">URL Decode</button> | |
| <button onclick="encodeOp('hex')">به Hex</button> | |
| <button onclick="encodeOp('unhex')">از Hex</button> | |
| <button onclick="encodeOp('reverse')">معکوس</button> | |
| </div> | |
| <div class="tool-workspace"> | |
| <textarea id="encodeInput" placeholder="متن ورودی..."></textarea> | |
| <div class="output-area" id="encodeOutput">خروجی...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Color Tool --> | |
| <div class="panel" id="panel-tool-color"> | |
| <div class="tool-panel"> | |
| <div class="tool-panel-header"> | |
| <h3><i class="fas fa-palette" style="color:#ec4899"></i> تبدیل رنگ</h3> | |
| <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button> | |
| </div> | |
| <div class="form-group"> | |
| <label>انتخاب رنگ</label> | |
| <input type="color" id="colorPicker" value="#7c3aed" style="height:60px;cursor:pointer"> | |
| </div> | |
| <div class="tool-workspace"> | |
| <div> | |
| <div class="form-group"><label>HEX</label><input type="text" id="hexVal" value="#7c3aed"></div> | |
| <div class="form-group"><label>RGB</label><input type="text" id="rgbVal" readonly></div> | |
| <div class="form-group"><label>HSL</label><input type="text" id="hslVal" readonly></div> | |
| </div> | |
| <div class="output-area" id="colorPreview" style="display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700">پیشنمایش رنگ</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Counter Tool --> | |
| <div class="panel" id="panel-tool-counter"> | |
| <div class="tool-panel"> | |
| <div class="tool-panel-header"> | |
| <h3><i class="fas fa-calculator" style="color:#10b981"></i> آمار متن</h3> | |
| <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button> | |
| </div> | |
| <textarea id="counterInput" placeholder="متن خود را وارد کنید..." style="width:100%;min-height:200px;margin-bottom:20px"></textarea> | |
| <div class="tools-grid" id="counterStats"> | |
| <div class="tool-card"><h4>کاراکترها</h4><p id="statChars">0</p></div> | |
| <div class="tool-card"><h4>کاراکتر (بدون فاصله)</h4><p id="statCharsNoSpace">0</p></div> | |
| <div class="tool-card"><h4>کلمات</h4><p id="statWords">0</p></div> | |
| <div class="tool-card"><h4>جملات</h4><p id="statSentences">0</p></div> | |
| <div class="tool-card"><h4>پاراگرافها</h4><p id="statParagraphs">0</p></div> | |
| <div class="tool-card"><h4>خطوط</h4><p id="statLines">0</p></div> | |
| <div class="tool-card"><h4>زمان خواندن</h4><p id="statReadTime">0 دقیقه</p></div> | |
| <div class="tool-card"><h4>زمان گفتار</h4><p id="statSpeakTime">0 دقیقه</p></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Regex Tool --> | |
| <div class="panel" id="panel-tool-regex"> | |
| <div class="tool-panel"> | |
| <div class="tool-panel-header"> | |
| <h3><i class="fas fa-magnifying-glass" style="color:#8b5cf6"></i> تست Regex</h3> | |
| <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button> | |
| </div> | |
| <div class="form-group"> | |
| <label>الگو (Pattern)</label> | |
| <input type="text" id="regexPattern" placeholder="مثال: \b\w+@\w+\.\w+\b"> | |
| </div> | |
| <div class="form-group"> | |
| <label>پرچمها (Flags)</label> | |
| <input type="text" id="regexFlags" value="gi" placeholder="gi"> | |
| </div> | |
| <div class="form-group"> | |
| <label>متن آزمایشی</label> | |
| <textarea id="regexText" placeholder="متن را وارد کنید..."></textarea> | |
| </div> | |
| <button class="generate-btn" onclick="testRegex()" style="margin-bottom:16px"> | |
| <i class="fas fa-play"></i> تست | |
| </button> | |
| <div class="output-area" id="regexOutput" style="min-height:150px">نتایج اینجا...</div> | |
| </div> | |
| </div> | |
| <!-- Lorem Tool --> | |
| <div class="panel" id="panel-tool-lorem"> | |
| <div class="tool-panel"> | |
| <div class="tool-panel-header"> | |
| <h3><i class="fas fa-paragraph" style="color:#ef4444"></i> تولید متن آزمایشی</h3> | |
| <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button> | |
| </div> | |
| <div class="tool-options"> | |
| <select id="loremLang"> | |
| <option value="fa">فارسی</option> | |
| <option value="en">انگلیسی</option> | |
| </select> | |
| <select id="loremCount"> | |
| <option value="1">1 پاراگراف</option> | |
| <option value="3" selected>3 پاراگراف</option> | |
| <option value="5">5 پاراگراف</option> | |
| <option value="10">10 پاراگراف</option> | |
| </select> | |
| <button onclick="generateLorem()">تولید</button> | |
| <button onclick="copyText('loremOutput')">کپی</button> | |
| </div> | |
| <div class="output-area" id="loremOutput" style="min-height:300px">متن آزمایشی اینجا...</div> | |
| </div> | |
| </div> | |
| <!-- Diff Tool --> | |
| <div class="panel" id="panel-tool-diff"> | |
| <div class="tool-panel"> | |
| <div class="tool-panel-header"> | |
| <h3><i class="fas fa-code-compare" style="color:#10b981"></i> مقایسه متن</h3> | |
| <button class="back-btn" onclick="switchPanel('tools')"><i class="fas fa-arrow-right"></i> بازگشت</button> | |
| </div> | |
| <div class="tool-workspace"> | |
| <div> | |
| <label style="font-size:13px;color:var(--text-dim);margin-bottom:8px;display:block">متن اصلی</label> | |
| <textarea id="diffA" placeholder="متن اول..."></textarea> | |
| </div> | |
| <div> | |
| <label style="font-size:13px;color:var(--text-dim);margin-bottom:8px;display:block">متن مقایسه</label> | |
| <textarea id="diffB" placeholder="متن دوم..."></textarea> | |
| </div> | |
| </div> | |
| <button class="generate-btn" onclick="compareDiff()" style="margin-top:16px"><i class="fas fa-code-compare"></i> مقایسه</button> | |
| <div class="output-area" id="diffOutput" style="margin-top:16px;min-height:200px">نتیجه مقایسه...</div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <div class="toast" id="toast"></div> | |
| <script> | |
| // ============ Navigation ============ | |
| const panelInfo = { | |
| 'chat': ['چت هوشمند', 'گفتگو با هوش مصنوعی قدرتمند'], | |
| 'image': ['تولید تصویر', 'ساخت تصاویر با هوش مصنوعی'], | |
| 'tools': ['ابزارهای کاربردی', 'مجموعهای از ابزارهای متنباز و کاربردی'], | |
| 'tool-text': ['پردازش متن', 'ابزارهای پردازش و تبدیل متن'], | |
| 'tool-json': ['JSON Formatter', 'فرمتبندی و اعتبارسنجی JSON'], | |
| 'tool-encode': ['رمزنگاری / Base64', 'تبدیل و رمزنگاری دادهها'], | |
| 'tool-color': ['تبدیل رنگ', 'تبدیل بین فرمتهای رنگ'], | |
| 'tool-counter': ['آمار متن', 'تحلیل و شمارش متن'], | |
| 'tool-regex': ['تست Regex', 'تست الگوهای باقاعده'], | |
| 'tool-lorem': ['تولید متن آزمایشی', 'Lorem Ipsum فارسی و انگلیسی'], | |
| 'tool-diff': ['مقایسه متن', 'مقایسه و یافتن تفاوتها'] | |
| }; | |
| function switchPanel(name) { | |
| document.querySelectorAll('.panel').forEach(p => p.classList.remove('active')); | |
| document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active')); | |
| document.getElementById('panel-' + name).classList.add('active'); | |
| const navItem = document.querySelector(`.nav-item[data-panel="${name}"]`); | |
| if (navItem) navItem.classList.add('active'); | |
| const info = panelInfo[name]; | |
| if (info) { | |
| document.getElementById('panelTitle').textContent = info[0]; | |
| document.getElementById('panelDesc').textContent = info[1]; | |
| } | |
| } | |
| document.querySelectorAll('.nav-item').forEach(item => { | |
| item.addEventListener('click', () => switchPanel(item.dataset.panel)); | |
| }); | |
| function openTool(name) { switchPanel('tool-' + name); } | |
| function showToast(msg) { | |
| const t = document.getElementById('toast'); | |
| t.textContent = msg; | |
| t.classList.add('show'); | |
| setTimeout(() => t.classList.remove('show'), 2500); | |
| } | |
| function clearCurrent() { | |
| const active = document.querySelector('.panel.active'); | |
| if (!active) return; | |
| const id = active.id; | |
| if (id === 'panel-chat') { | |
| document.getElementById('chatMessages').innerHTML = ` | |
| <div class="message assistant"> | |
| <div class="message-avatar"><i class="fas fa-robot"></i></div> | |
| <div class="message-content">چت پاک شد. میتوانید گفتگوی جدیدی شروع کنید!</div> | |
| </div>`; | |
| } else { | |
| active.querySelectorAll('textarea, input[type=text]').forEach(el => el.value = ''); | |
| active.querySelectorAll('.output-area').forEach(el => el.textContent = ''); | |
| } | |
| showToast('پاکسازی شد'); | |
| } | |
| // ============ Chat ============ | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const chatInput = document.getElementById('chatInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| let chatHistory = []; | |
| chatInput.addEventListener('input', () => { | |
| chatInput.style.height = 'auto'; | |
| chatInput.style.height = Math.min(chatInput.scrollHeight, 150) + 'px'; | |
| }); | |
| chatInput.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| function addMessage(role, content) { | |
| const div = document.createElement('div'); | |
| div.className = 'message ' + role; | |
| const icon = role === 'user' ? 'fa-user' : 'fa-robot'; | |
| div.innerHTML = ` | |
| <div class="message-avatar"><i class="fas ${icon}"></i></div> | |
| <div class="message-content"></div> | |
| `; | |
| div.querySelector('.message-content').textContent = content; | |
| chatMessages.appendChild(div); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| return div.querySelector('.message-content'); | |
| } | |
| function addTyping() { | |
| const div = document.createElement('div'); | |
| div.className = 'message assistant'; | |
| div.id = 'typingMsg'; | |
| div.innerHTML = ` | |
| <div class="message-avatar"><i class="fas fa-robot"></i></div> | |
| <div class="message-content"><div class="typing"><span></span><span></span><span></span></div></div> | |
| `; | |
| chatMessages.appendChild(div); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| async function sendMessage() { | |
| const text = chatInput.value.trim(); | |
| if (!text) return; | |
| addMessage('user', text); | |
| chatInput.value = ''; | |
| chatInput.style.height = 'auto'; | |
| sendBtn.disabled = true; | |
| addTyping(); | |
| chatHistory.push({ role: 'user', content: text }); | |
| try { | |
| const response = await fetch('https://text.pollinations.ai/', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| messages: [ | |
| { role: 'system', content: 'تو دستیار هوشمند سایت کوکب تک هستی. به فارسی پاسخ بده، دوستانه و حرفهای. پاسخها را مختصر و کاربردی بده.' }, | |
| ...chatHistory | |
| ], | |
| model: 'openai', | |
| seed: Math.floor(Math.random() * 100000) | |
| }) | |
| }); | |
| const reply = await response.text(); | |
| document.getElementById('typingMsg')?.remove(); | |
| addMessage('assistant', reply); | |
| chatHistory.push({ role: 'assistant', content: reply }); | |
| if (chatHistory.length > 20) chatHistory = chatHistory.slice(-20); | |
| } catch (err) { | |
| document.getElementById('typingMsg')?.remove(); | |
| addMessage('assistant', 'متأسفانه خطایی در ارتباط رخ داد. لطفاً دوباره تلاش کنید.'); | |
| } | |
| sendBtn.disabled = false; | |
| } | |
| // ============ Image Generator ============ | |
| let currentStyle = ''; | |
| let lastImageUrl = ''; | |
| let lastPrompt = ''; | |
| document.querySelectorAll('#styleGrid .style-chip').forEach(chip => { | |
| chip.addEventListener('click', () => { | |
| document.querySelectorAll('#styleGrid .style-chip').forEach(c => c.classList.remove('active')); | |
| chip.classList.add('active'); | |
| currentStyle = chip.dataset.style; | |
| }); | |
| }); | |
| async function generateImage() { | |
| const prompt = document.getElementById('imgPrompt').value.trim(); | |
| if (!prompt) { showToast('لطفاً توضیح تصویر را وارد کنید'); return; } | |
| const ratio = document.getElementById('imgRatio').value.split('x'); | |
| const btn = document.getElementById('generateBtn'); | |
| const preview = document.getElementById('previewArea'); | |
| btn.disabled = true; | |
| btn.innerHTML = '<div class="loader" style="width:20px;height:20px;border-width:2px"></div> در حال تولید...'; | |
| preview.innerHTML = '<div class="loader"></div>'; | |
| const fullPrompt = prompt + currentStyle + ', high quality, detailed'; | |
| lastPrompt = fullPrompt; | |
| const seed = Math.floor(Math.random() * 1000000); | |
| const url = `https://image.pollinations.ai/prompt/${encodeURIComponent(fullPrompt)}?width=${ratio[0]}&height=${ratio[1]}&seed=${seed}&nologo=true`; | |
| const img = new Image(); | |
| img.onload = () => { | |
| preview.innerHTML = ''; | |
| preview.appendChild(img); | |
| lastImageUrl = url; | |
| btn.disabled = false; | |
| btn.innerHTML = '<i class="fas fa-sparkles"></i><span>تولید تصویر</span>'; | |
| showToast('تصویر با موفقیت ساخته شد ✨'); | |
| }; | |
| img.onerror = () => { | |
| preview.innerHTML = '<div class="preview-placeholder"><i class="fas fa-triangle-exclamation"></i><p>خطا در تولید تصویر</p></div>'; | |
| btn.disabled = false; | |
| btn.innerHTML = '<i class="fas fa-sparkles"></i><span>تولید تصویر</span>'; | |
| showToast('خطا در تولید تصویر'); | |
| }; | |
| img.src = url; | |
| } | |
| function regenerateImage() { if (lastPrompt) generateImage(); else showToast('ابتدا یک تصویر بسازید'); } | |
| function downloadImage() { | |
| if (!lastImageUrl) { showToast('تصویری برای دانلود نیست'); return; } | |
| const a = document.createElement('a'); | |
| a.href = lastImageUrl; | |
| a.download = 'kawkab-tech-' + Date.now() + '.jpg'; | |
| a.target = '_blank'; | |
| a.click(); | |
| } | |
| function copyPrompt() { | |
| if (!lastPrompt) { showToast('prompt موجود نیست'); return; } | |
| navigator.clipboard.writeText(lastPrompt); | |
| showToast('Prompt کپی شد'); | |
| } | |
| // ============ Text Tool ============ | |
| function textOp(op) { | |
| const input = document.getElementById('textInput').value; | |
| let out = input; | |
| switch (op) { | |
| case 'upper': out = input.toUpperCase(); break; | |
| case 'lower': out = input.toLowerCase(); break; | |
| case 'capitalize': out = input.replace(/\b\w/g, c => c.toUpperCase()); break; | |
| case 'reverse': out = input.split('').reverse().join(''); break; | |
| case 'trim': out = input.split('\n').map(l => l.trim()).join('\n'); break; | |
| case 'removeEmpty': out = input.split('\n').filter(l => l.trim()).join('\n'); break; | |
| case 'sort': out = input.split('\n').sort().join('\n'); break; | |
| case 'unique': out = [...new Set(input.split('\n'))].join('\n'); break; | |
| case 'slug': out = input.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, ''); break; | |
| case 'persian': out = input.replace(/ي/g, 'ی').replace(/ك/g, 'ک'); break; | |
| } | |
| document.getElementById('textOutput').textContent = out; | |
| } | |
| // ============ JSON Tool ============ | |
| function jsonOp(op) { | |
| const input = document.getElementById('jsonInput').value; | |
| const out = document.getElementById('jsonOutput'); | |
| try { | |
| const parsed = JSON.parse(input); | |
| if (op === 'format') out.textContent = JSON.stringify(parsed, null, 2); | |
| else if (op === 'minify') out.textContent = JSON.stringify(parsed); | |
| else if (op === 'validate') out.textContent = '✅ JSON معتبر است\n\nنوع: ' + (Array.isArray(parsed) ? 'آرایه' : typeof parsed) + '\nتعداد کلیدها: ' + (typeof parsed === 'object' ? Object.keys(parsed).length : '-'); | |
| else if (op === 'escape') out.textContent = JSON.stringify(input); | |
| else if (op === 'unescape') out.textContent = JSON.parse(input); | |
| } catch (e) { | |
| out.textContent = '❌ خطا: ' + e.message; | |
| } | |
| } | |
| // ============ Encode Tool ============ | |
| function encodeOp(op) { | |
| const input = document.getElementById('encodeInput').value; | |
| const out = document.getElementById('encodeOutput'); | |
| try { | |
| switch (op) { | |
| case 'b64e': out.textContent = btoa(unescape(encodeURIComponent(input))); break; | |
| case 'b64d': out.textContent = decodeURIComponent(escape(atob(input))); break; | |
| case 'urlE': out.textContent = encodeURIComponent(input); break; | |
| case 'urlD': out.textContent = decodeURIComponent(input); break; | |
| case 'hex': out.textContent = Array.from(input).map(c => c.charCodeAt(0).toString(16).padStart(2, '0')).join(' '); break; | |
| case 'unhex': out.textContent = input.replace(/\s+/g, '').match(/.{1,2}/g).map(h => String.fromCharCode(parseInt(h, 16))).join(''); break; | |
| case 'reverse': out.textContent = input.split('').reverse().join(''); break; | |
| } | |
| } catch (e) { out.textContent = '❌ خطا: ' + e.message; } | |
| } | |
| // ============ Color Tool ============ | |
| function hexToRgb(hex) { | |
| const r = parseInt(hex.slice(1, 3), 16); | |
| const g = parseInt(hex.slice(3, 5), 16); | |
| const b = parseInt(hex.slice(5, 7), 16); | |
| return [r, g, b]; | |
| } | |
| function rgbToHsl(r, g, b) { | |
| r /= 255; g /= 255; b /= 255; | |
| const max = Math.max(r, g, b), min = Math.min(r, g, b); | |
| let h, s, l = (max + min) / 2; | |
| if (max === min) { h = s = 0; } | |
| else { | |
| const d = max - min; | |
| s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | |
| switch (max) { | |
| case r: h = (g - b) / d + (g < b ? 6 : 0); break; | |
| case g: h = (b - r) / d + 2; break; | |
| case b: h = (r - g) / d + 4; break; | |
| } | |
| h /= 6; | |
| } | |
| return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]; | |
| } | |
| function updateColor(hex) { | |
| const [r, g, b] = hexToRgb(hex); | |
| const [h, s, l] = rgbToHsl(r, g, b); | |
| document.getElementById('hexVal').value = hex; | |
| document.getElementById('rgbVal').value = `rgb(${r}, ${g}, ${b})`; | |
| document.getElementById('hslVal').value = `hsl(${h}, ${s}%, ${l}%)`; | |
| const preview = document.getElementById('colorPreview'); | |
| preview.style.background = hex; | |
| preview.style.color = l > 50 ? '#000' : '#fff'; | |
| preview.textContent = hex.toUpperCase(); | |
| } | |
| document.getElementById('colorPicker').addEventListener('input', e => updateColor(e.target.value)); | |
| document.getElementById('hexVal').addEventListener('input', e => { | |
| let v = e.target.value; | |
| if (/^#?[0-9a-fA-F]{6}$/.test(v)) { | |
| if (!v.startsWith('#')) v = '#' + v; | |
| document.getElementById('colorPicker').value = v; | |
| updateColor(v); | |
| } | |
| }); | |
| updateColor('#7c3aed'); | |
| // ============ Counter Tool ============ | |
| document.getElementById('counterInput').addEventListener('input', e => { | |
| const t = e.target.value; | |
| document.getElementById('statChars').textContent = t.length.toLocaleString('fa-IR'); | |
| document.getElementById('statCharsNoSpace').textContent = t.replace(/\s/g, '').length.toLocaleString('fa-IR'); | |
| const words = t.trim() ? t.trim().split(/\s+/).length : 0; | |
| document.getElementById('statWords').textContent = words.toLocaleString('fa-IR'); | |
| const sentences = t.trim() ? (t.match(/[.!?؟]+/g) || []).length || (t.trim() ? 1 : 0) : 0; | |
| document.getElementById('statSentences').textContent = sentences.toLocaleString('fa-IR'); | |
| const paras = t.trim() ? t.split(/\n\s*\n/).filter(p => p.trim()).length : 0; | |
| document.getElementById('statParagraphs').textContent = paras.toLocaleString('fa-IR'); | |
| document.getElementById('statLines').textContent = (t ? t.split('\n').length : 0).toLocaleString('fa-IR'); | |
| document.getElementById('statReadTime').textContent = Math.max(1, Math.ceil(words / 200)) + ' دقیقه'; | |
| document.getElementById('statSpeakTime').textContent = Math.max(1, Math.ceil(words / 130)) + ' دقیقه'; | |
| }); | |
| // ============ Regex Tool ============ | |
| function testRegex() { | |
| const pattern = document.getElementById('regexPattern').value; | |
| const flags = document.getElementById('regexFlags').value; | |
| const text = document.getElementById('regexText').value; | |
| const out = document.getElementById('regexOutput'); | |
| if (!pattern) { out.textContent = 'الگو را وارد کنید'; return; } | |
| try { | |
| const regex = new RegExp(pattern, flags); | |
| const matches = [...text.matchAll(new RegExp(pattern, flags.includes('g') ? flags : flags + 'g'))]; | |
| if (matches.length === 0) { out.textContent = '❌ هیچ موردی یافت نشد'; return; } | |
| let result = `✅ ${matches.length} مورد یافت شد:\n\n`; | |
| matches.forEach((m, i) => { | |
| result += `[${i + 1}] "${m[0]}" در موقعیت ${m.index}\n`; | |
| if (m.length > 1) result += ` گروهها: ${m.slice(1).join(', ')}\n`; | |
| }); | |
| out.textContent = result; | |
| } catch (e) { out.textContent = '❌ خطا: ' + e.message; } | |
| } | |
| // ============ Lorem Tool ============ | |
| function generateLorem() { | |
| const lang = document.getElementById('loremLang').value; | |
| const count = parseInt(document.getElementById('loremCount').value); | |
| const faWords = ['لورم','ایپسوم','متن','ساختگی','با','تولید','سادگی','نامفهوم','از','صنعت','چاپ','و','با','استفاده','طراحان','گرافیک','است','چاپخانه','با','متن','بلند','و','جملات','زیاد','روی','صفحه','اثر','میگذارد','و','بخشی','از','آن','را','به','درست','منتقل','نمیکند','به','همین','دلیل','ممکن','است','که','از','ابزارهای','جدید','و','کاربردی','برای','طراحی','استفاده','شود','کوکب','تک','هوش','مصنوعی','پیشرفته','تکنولوژی','نوین','دیجیتال','الگوریتم','داده','پردازش','تحلیل','سیستم','شبکه','کد','برنامه','نویسی','توسعه','وب','اپلیکیشن','موبایل','سرور','پایگاه','اطلاعات','امنیت','رمزنگاری','کلید','هویت','احراز','کاربر','رابط','گرافیکی','تجربه','کاربری','طراحی','رنگ','فونت','چیدمان','صفحه','آرایه','ساختار','منطق','شرط','حلقه','تابع','متغیر','شیء','کلاس','وراثت','چندریختی','کپسوله','سازی','انتزاع','الگو','پیاده','سازی','بهینه','سازی','کارایی','سرعت','عملکرد','بهبود','افزایش','کاهش','حذف','اضافه','ویرایش','ذخیره','بارگذاری','دانلود','آپلود','اشتراک','گذاری','انتشار','مدیریت','ناظر','کاربر','دسترسی','مجوز','سطح','نقش','وظیفه','مسئولیت','گزارش','آمار','تحلیل','نمودار','جدول','فیلتر','جستجو','مرتب','سازی','صفحه','بندی','نمایش','چاپ','خروجی','فرمت','تبدیل','تنظیم','پیکربندی','نصب','راه','اندازی','پشتیبان','گیری','بازیابی','خطا','رفع','اشکال','زدایی','آزمایش','تست','اعتبارسنجی','تأیید','رد','پذیرش','توسعه','انتشار','نسخه','بهروزرسانی','ارتقاء','سازگاری','پشتیبانی','مستند','راهنما','آموزش','یادگیری','مهارت','تجربه','دانش','اطلاعات','منبع','محتوا','مقاله','پست','دیدگاه','نظر','بازخورد','امتیاز','رتبه','بندی','مقایسه','بررسی','ارزیابی','سنجش','اندازه','گیری','محاسبه','فرمول','معادله','رابطه','تناسب','تفاوت','شباهت','ویژگی','خصوصیت','مشخصه','خاصیت','ویژگی','مزیت','عیب','نقطه','قوت','ضعف','فرصت','تهدید','چالش','مشکل','راه','حل','ایده','خلاقیت','نوآوری','اختراع','کشف','تحقیق','مطالعه','بررسی','کاوش','جستجو','یافتن','رسیدن','هدف','مقصد','مسیر','راه','قدم','گام','حرکت','پیشرفت','ترقی','رشد','توسعه','گسترش','افزایش','بهبود','ارتقاء','تعالی','کمال','موفقیت','پیروزی','فتح','دستاورد','افتخار','سربلندی','عزت','کرامت','ارزش','اهمیت','جایگاه','منزلت','شأن','بزرگی','عظمت','شکوه','جلال','جمال','کمال','هنر','زیبایی','ظرافت','لطافت','نرمی','ملایمت','آرامش','صلح','دوستی','محبت','عشق','صداقت','صفا','صمیمیت','وفاداری','پایبندی','تعهد','مسئولیت','وظیفه','وظیفه','شناسی','انجام','اجرا','عمل','کار','تلاش','کوشش','مجاهدت','جهاد','مبارزه','نبرد','پیکار','رقابت','مسابقه','مسابقات','قهرمانی','جام','مدال','نشان','جایزه','پاداش','هدیه','تحفه','سوغات','یادگار','خاطره','حافظه','ذهن','فکر','اندیشه','تأمل','تفکر','تعقل','تدبر','بررسی','مطالعه','تحقیق','کاوش','جستجو','یافتن','کشف','اختراع','ابداع','نوآوری','خلاقیت','ایجاد','ساخت','تولید','تهیه','آماده','سازی','طراحی','برنامه','ریزی','سازماندهی','مدیریت','رهبری','هدایت','راهنمایی','آموزش','یاددهی','یادگیری','تحصیل','مطالعه','خواندن','نوشتن','گوش','دادن','شنیدن','دیدن','مشاهده','نگاه','کردن','توجه','دقت','تمرکز','حضور','آگاهی','هوشیاری','بیداری','خواب','استراحت','آرامش','سکوت','صلح','امنیت','آسایش','رفاه','سلامتی','تندرستی','بهداشت','پاکیزگی','نظافت','تمیزی','زیبایی','آراستگی','ظاهر','باطن','درون','بیرون','داخل','خارج','مرکز','کنار','پهلو','جانب','طرف','جهت','سمت','سو','راستا','مسیر','راه','جاده','خیابان','کوچه','بن','بست','آزاد','باز','بسته','قفل','کلید','رمز','پسورد','عبور','گذر','ورود','خروج','شروع','پایان','ابتدا','انته','اول','آخر','قبل','بعد','پیش','عقب','جلو','عقب','بالا','پایین','چپ','راست','میانه','وسط','کنار','نزدیک','دور','بعید','قریب','سریع','آهسته','تند','کند','زیاد','کم','بیشتر','کمتر','افزایش','کاهش','رشد','افت','صعود','نزول','بالا','پایین','اوج','فرود','قله','دره','کوه','دشت','صحرا','جنگل','دریا','اقیانوس','رود','جوی','چشمه','آب','آتش','خاک','باد','هوا','فضا','زمان','مکان','حرکت','سکون','ثبات','تغییر','تحول','دگرگونی','تبدیل','انتقال','جابجایی','حرکت','رفت','آمد','مسافرت','سفر','طی','کردن','پیمودن','گذر','کردن','عبور','کردن','رسیدن','ماندن','توقف','ایستادن','نشستن','خوابیدن','بیدار','شدن','بلند','شدن','راه','رفتن','دویدن','پریدن','شنا','کردن','پرواز','کردن','افتادن','برخاستن','نشستن','خم','شدن','ایستادن','نشستن','دراز','کشیدن','لم','دادن','تکیه','دادن','تکیه','گاه','صندلی','میز','تخت','فرش','موکت','پارکت','سرامیک','کاشی','دیوار','سقف','در','پنجره','بام','شیروانی','ستون','تیر','دیوار','اتاق','سالن','آشپزخانه','حمام','دستشویی','حیاط','باغ','تراس','بالکن','پشت','بام','زیر','زمین','همکف','طبقه','اول','دوم','سوم','چهارم','پنجم','ششم','هفتم','هشتم','نهم','دهم','یازدهم','دوازدهم']; | |
| const enWords = ['lorem','ipsum','dolor','sit','amet','consectetur','adipiscing','elit','sed','do','eiusmod','tempor','incididunt','ut','labore','et','dolore','magna','aliqua','enim','ad','minim','veniam','quis','nostrud','exercitation','ullamco','laboris','nisi','aliquip','ex','ea','commodo','consequat','duis','aute','irure','in','reprehenderit','voluptate','velit','esse','cillum','fugiat','nulla','pariatur','excepteur','sint','occaecat','cupidatat','non','proident','sunt','culpa','qui','officia','deserunt','mollit','anim','id','est','laborum']; | |
| const words = lang === 'fa' ? faWords : enWords; | |
| let result = ''; | |
| for (let p = 0; p < count; p++) { | |
| const len = 30 + Math.floor(Math.random() * 40); | |
| let para = ''; | |
| for (let i = 0; i < len; i++) { | |
| para += words[Math.floor(Math.random() * words.length)] + ' '; | |
| } | |
| para = para.trim(); | |
| para = para.charAt(0).toUpperCase() + para.slice(1); | |
| if (!para.match(/[.!?]$/)) para += '.'; | |
| result += para + '\n\n'; | |
| } | |
| document.getElementById('loremOutput').textContent = result.trim(); | |
| } | |
| // ============ Diff Tool ============ | |
| function compareDiff() { | |
| const a = document.getElementById('diffA').value.split('\n'); | |
| const b = document.getElementById('diffB').value.split('\n'); | |
| const out = document.getElementById('diffOutput'); | |
| const max = Math.max(a.length, b.length); | |
| let result = ''; | |
| let diffCount = 0; | |
| for (let i = 0; i < max; i++) { | |
| const la = a[i] || ''; | |
| const lb = b[i] || ''; | |
| if (la === lb) { | |
| result += ` ${i + 1}: ${la}\n`; | |
| } else { | |
| diffCount++; | |
| if (la) result += `- ${i + 1}: ${la}\n`; | |
| if (lb) result += `+ ${i + 1}: ${lb}\n`; | |
| } | |
| } | |
| out.textContent = `📊 تعداد تفاوتها: ${diffCount}\n\n${result || '✅ دو متن یکسان هستند'}`; | |
| } | |
| // ============ Utilities ============ | |
| function copyText(id) { | |
| const text = document.getElementById(id).textContent; | |
| navigator.clipboard.writeText(text); | |
| showToast('کپی شد ✓'); | |
| } | |
| // Init lorem | |
| generateLorem(); | |
| </script> | |
| </body> | |
| </html> | |