97 lines
4.2 KiB
HTML
97 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>كلود - إملاء صوتي عربي</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="popup-container">
|
|
<!-- Header -->
|
|
<div class="popup-header">
|
|
<div class="popup-icon">🎤</div>
|
|
<div class="popup-title">
|
|
<h1>الإملاء الصوتي لكلود</h1>
|
|
<p class="subtitle">Claude Arabic Voice Input</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="status-section">
|
|
<div class="status-indicator" id="statusIndicator">
|
|
<span class="status-dot" id="statusDot"></span>
|
|
<span id="statusText">جاهز للاستخدام</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings -->
|
|
<div class="settings-section">
|
|
<h2>⚙️ الإعدادات</h2>
|
|
|
|
<!-- Language -->
|
|
<div class="setting-group">
|
|
<label for="language">لغة التعرف على الصوت</label>
|
|
<select id="language">
|
|
<option value="ar-SA">العربية (السعودية)</option>
|
|
<option value="ar-AE">العربية (الإمارات)</option>
|
|
<option value="ar-EG">العربية (مصر)</option>
|
|
<option value="ar-JO">العربية (الأردن)</option>
|
|
<option value="ar-SY">العربية (سوريا)</option>
|
|
<option value="ar-IQ">العربية (العراق)</option>
|
|
<option value="ar">العربية (عام)</option>
|
|
<option value="en-US">English (US)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Auto Send -->
|
|
<div class="setting-group checkbox-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="autoSend">
|
|
<span>إرسال تلقائي بعد الانتهاء من الكلام</span>
|
|
</label>
|
|
<p class="setting-hint">بعد التوقف عن الكلام لمدة ثانيتين، يتم إرسال النص تلقائياً</p>
|
|
</div>
|
|
|
|
<!-- Gemini AI -->
|
|
<div class="setting-group divider">
|
|
<h3>🤖 معالجة النص بـ Gemini AI</h3>
|
|
<p class="setting-hint">يحسن دقة النص المنطوق ويصحح الأخطاء الإملائية</p>
|
|
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="useGemini">
|
|
<span>تفعيل معالجة Gemini</span>
|
|
</label>
|
|
|
|
<div id="geminiSettings" class="gemini-settings" style="display:none;">
|
|
<label for="geminiApiKey">مفتاح API</label>
|
|
<input type="password" id="geminiApiKey" placeholder="أدخل مفتاح Gemini API">
|
|
<p class="setting-hint">استخدم نفس مفتاح API الموجود في إعدادات LinkedIn Analyzer</p>
|
|
<p class="setting-hint">النموذج المستخدم: <strong>gemini-flash-lite-latest</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How to use -->
|
|
<div class="help-section">
|
|
<h2>📖 كيفية الاستخدام</h2>
|
|
<ol>
|
|
<li>اذهب إلى <strong>claude.ai</strong></li>
|
|
<li>ستجد زر المايك 🎤 بجانب حقل الإدخال</li>
|
|
<li>اضغط على الزر وابدأ بالتحدث بالعربية</li>
|
|
<li>عند التوقف عن الكلام، سيتم إدراج النص تلقائياً</li>
|
|
<li>يمكنك تفعيل Gemini لتحسين دقة النص</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="popup-footer">
|
|
<button id="saveBtn" class="save-btn">💾 حفظ الإعدادات</button>
|
|
<p id="saveMessage" class="save-message"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|