749 lines
26 KiB
HTML
749 lines
26 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>استوديو التسويق والذكاء الاصطناعي — Tripz AI Studio</title>
|
|
<meta name="description" content="استوديو أتمتة التسويق والنشر الذكي لصفحة Tripz بالذكاء الاصطناعي والمعاينة المباشرة قبل النشر.">
|
|
|
|
<!-- Fonts & Icons -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<style>
|
|
:root {
|
|
--bg-dark: #0b0f19;
|
|
--bg-card: #131b2e;
|
|
--bg-card-hover: #1c2744;
|
|
--accent-primary: #3b82f6;
|
|
--accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
|
|
--accent-green: #10b981;
|
|
--text-main: #f3f4f6;
|
|
--text-muted: #9ca3af;
|
|
--border-color: rgba(255, 255, 255, 0.1);
|
|
--fb-blue: #1877f2;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Cairo', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-dark);
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Header Navbar */
|
|
header {
|
|
background: rgba(19, 27, 46, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1rem 2rem;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 42px;
|
|
height: 42px;
|
|
background: var(--accent-gradient);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 900;
|
|
font-size: 1.4rem;
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.brand-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.badge-ai {
|
|
background: rgba(139, 92, 246, 0.2);
|
|
color: #a78bfa;
|
|
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* Main Container */
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 2rem auto;
|
|
padding: 0 1.5rem;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
flex: 1;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Studio Card */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 24px;
|
|
padding: 2rem;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 800;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: #fff;
|
|
}
|
|
|
|
.card-title i {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
/* Form Controls */
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
label {
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
textarea, input, select {
|
|
background: rgba(11, 15, 25, 0.7);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 14px;
|
|
padding: 1rem;
|
|
color: white;
|
|
font-size: 0.95rem;
|
|
outline: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
textarea:focus, input:focus, select:focus {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/* Voice Recorder Widget */
|
|
.recorder-box {
|
|
background: rgba(11, 15, 25, 0.5);
|
|
border: 2px dashed rgba(59, 130, 246, 0.3);
|
|
border-radius: 18px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.btn-record {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 50%;
|
|
background: var(--accent-gradient);
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.6rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.btn-record:hover {
|
|
transform: scale(1.08);
|
|
box-shadow: 0 15px 30px rgba(139, 92, 246, 0.6);
|
|
}
|
|
|
|
.btn-record.recording {
|
|
background: #ef4444;
|
|
animation: pulse-red 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse-red {
|
|
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
|
|
70% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
|
|
}
|
|
|
|
.recorder-status {
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.audio-preview {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
display: none;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
padding: 1rem 1.8rem;
|
|
border-radius: 14px;
|
|
border: none;
|
|
font-weight: 800;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent-gradient);
|
|
color: white;
|
|
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.92;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 25px rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
.btn-fb {
|
|
background: var(--fb-blue);
|
|
color: white;
|
|
box-shadow: 0 8px 20px rgba(24, 119, 242, 0.3);
|
|
}
|
|
|
|
.btn-fb:hover {
|
|
background: #1464cc;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Facebook Live Preview Card */
|
|
.fb-card {
|
|
background: #18191a;
|
|
border-radius: 16px;
|
|
border: 1px solid #3a3b3c;
|
|
padding: 1.2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
color: #e4e6eb;
|
|
}
|
|
|
|
.fb-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.fb-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--accent-gradient);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 900;
|
|
font-size: 1.2rem;
|
|
color: white;
|
|
}
|
|
|
|
.fb-name {
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
color: #e4e6eb;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.fb-time {
|
|
font-size: 0.8rem;
|
|
color: #b0b3b8;
|
|
}
|
|
|
|
.fb-content {
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
outline: none;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px dashed transparent;
|
|
transition: border 0.3s ease;
|
|
}
|
|
|
|
.fb-content:focus {
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.fb-image-box {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
max-height: 380px;
|
|
background: #242526;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #3a3b3c;
|
|
position: relative;
|
|
}
|
|
|
|
.fb-image-box img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.fb-actions {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
border-top: 1px solid #3a3b3c;
|
|
padding-top: 10px;
|
|
color: #b0b3b8;
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.fb-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.fb-action-btn:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Modal / Alert Notification */
|
|
.alert-box {
|
|
padding: 1rem;
|
|
border-radius: 14px;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
display: none;
|
|
}
|
|
|
|
.alert-success {
|
|
background: rgba(16, 185, 129, 0.15);
|
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
color: #34d399;
|
|
}
|
|
|
|
.alert-error {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
color: #f87171;
|
|
}
|
|
|
|
.loader-overlay {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(19, 27, 46, 0.85);
|
|
backdrop-filter: blur(4px);
|
|
border-radius: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
z-index: 10;
|
|
display: none;
|
|
}
|
|
|
|
.spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 4px solid rgba(255, 255, 255, 0.1);
|
|
border-top: 4px solid #3b82f6;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<header>
|
|
<a href="/apps/" class="brand">
|
|
<div class="brand-logo">T</div>
|
|
<div>
|
|
<div class="brand-title">Tripz AI Studio</div>
|
|
</div>
|
|
</a>
|
|
<div style="display: flex; align-items: center; gap: 15px;">
|
|
<span class="badge-ai"><i class="fa-solid fa-wand-magic-sparkles"></i> Gemini 2.0 Engine</span>
|
|
<a href="/apps/" style="color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 700;">العودة للرئيسية <i class="fa-solid fa-arrow-left"></i></a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Grid -->
|
|
<div class="container">
|
|
|
|
<!-- Panel 1: AI Prompt & Audio Console -->
|
|
<div class="card" id="inputCard">
|
|
<div class="card-title">
|
|
<i class="fa-solid fa-robot"></i> 1. إعداد وصياغة المنشور بالذكاء الاصطناعي
|
|
</div>
|
|
|
|
<!-- Text Prompt Input -->
|
|
<div class="form-group">
|
|
<label for="topicInput"><i class="fa-solid fa-pen-nib"></i> موضوع الحملة أو الفكرة الرئيسية:</label>
|
|
<textarea id="topicInput" rows="4" placeholder="مثال: اكتب بوست عن أمان السائقين والركاب وتدقيق الهويات بالذكاء الاصطناعي مع توفير حاسبة الأرباح..."></textarea>
|
|
</div>
|
|
|
|
<!-- Voice Recording Widget -->
|
|
<div class="recorder-box">
|
|
<div style="font-size: 0.95rem; font-weight: 800; color: #fff;">
|
|
<i class="fa-solid fa-microphone-lines"></i> أو سجل فكرة البوست بصوتك مباشرة:
|
|
</div>
|
|
<button type="button" class="btn-record" id="btnRecord" title="اضغط للتسجيل الصوتى">
|
|
<i class="fa-solid fa-microphone" id="micIcon"></i>
|
|
</button>
|
|
<div class="recorder-status" id="recordStatus">اضغط على المايك للبدء بالتسجيل الصوتي</div>
|
|
<audio id="audioPlayback" controls class="audio-preview"></audio>
|
|
</div>
|
|
|
|
<!-- Creative Design Choice -->
|
|
<div class="form-group">
|
|
<label for="imageChoice"><i class="fa-solid fa-image"></i> تصميم الصورة المرفقة مع البوست:</label>
|
|
<select id="imageChoice">
|
|
<option value="graphic_security">🛡️ هيدر الأمان والذكاء الاصطناعي (أمان السائقين)</option>
|
|
<option value="graphic_calculator">📊 هيدر حاسبة التوفير (الأرباح والشفافية)</option>
|
|
<option value="graphic_brand">🚘 هيدر التطبيق الخاص باسم المشغّل (White-label)</option>
|
|
<option value="custom_url">🔗 رابط صورة مخصص (Custom Image URL)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" id="customUrlGroup" style="display: none;">
|
|
<label for="customImageUrl">رابط الصورة المباشر (Direct Image URL):</label>
|
|
<input type="url" id="customImageUrl" placeholder="https://example.com/image.png">
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-primary" id="btnGenerate" style="margin-top: 10px;">
|
|
<i class="fa-solid fa-wand-magic-sparkles"></i> توليد وتحليل المنشور بـ Gemini AI
|
|
</button>
|
|
|
|
<!-- Loader Overlay -->
|
|
<div class="loader-overlay" id="loaderOverlay">
|
|
<div class="spinner"></div>
|
|
<div style="font-size: 1.1rem; font-weight: 800; color: white;" id="loaderStatus">جاري تحليل الفكرة وتسجيل الصوت بـ Gemini...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel 2: Live Facebook Preview & Publish Action -->
|
|
<div class="card" id="previewCard">
|
|
<div class="card-title">
|
|
<i class="fa-brands fa-facebook" style="color: #1877f2;"></i> 2. معاينة البوست المباشرة على فيسبوك
|
|
</div>
|
|
|
|
<div class="alert-box alert-success" id="alertSuccess"></div>
|
|
<div class="alert-box alert-error" id="alertError"></div>
|
|
|
|
<!-- Live Facebook Post Mockup -->
|
|
<div class="fb-card">
|
|
<div class="fb-header">
|
|
<div class="fb-avatar">T</div>
|
|
<div>
|
|
<div class="fb-name">
|
|
Tripz <i class="fa-solid fa-circle-check" style="color: #1877f2; font-size: 0.85rem;"></i>
|
|
</div>
|
|
<div class="fb-time">منذ ثانية واحدة • <i class="fa-solid fa-earth-americas"></i></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Editable Content preview -->
|
|
<div class="fb-content" id="fbContentPreview" contenteditable="true" title="يمكنك تعديل النص مباشرة قبل النشر">
|
|
شركتك تحمل اسمك… وتطبيقك يحمل اسم غيرك؟ 🚘📱
|
|
|
|
كل رحلة ينفذها أسطولك اليوم تبني علامة شركة أخرى. في Tripz نطلق لك منصة نقل متكاملة باسمك، بلونك، وبشعارك خلال 30 يوماً فقط!
|
|
|
|
🔹 تطبيق الراكب 🔹 تطبيق السائق 🔹 لوحة التحكم و Dispatch
|
|
✅ بياناتك ملكك بعقد مكتوب
|
|
✅ شفافية مطلقة بأسعار معلنة
|
|
✅ محرك مجرّب وسريع منذ 2019
|
|
|
|
📊 احسب توفيرك السنوي: https://tripz-egypt.com/apps/
|
|
💬 تواصل معنا عبر واتساب: https://wa.me/962798583052
|
|
</div>
|
|
|
|
<!-- Image Creative Box -->
|
|
<div class="fb-image-box" id="fbImageBox">
|
|
<img id="fbPreviewImg" src="https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?auto=format&fit=crop&w=1000&q=80" alt="Tripz Post Graphic">
|
|
</div>
|
|
|
|
<div class="fb-actions">
|
|
<div class="fb-action-btn"><i class="fa-regular fa-thumbs-up"></i> إعجاب</div>
|
|
<div class="fb-action-btn"><i class="fa-regular fa-comment"></i> تعليق</div>
|
|
<div class="fb-action-btn"><i class="fa-solid fa-share"></i> مشاركة</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Publish Action Controls -->
|
|
<div style="display: flex; gap: 12px; margin-top: auto;">
|
|
<button type="button" class="btn btn-fb" id="btnPublish" style="flex: 1;">
|
|
<i class="fa-brands fa-facebook-f"></i> تأكيد وإطلاق المنشور الآن على صفحة Tripz
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Verified Credentials & Endpoints
|
|
const GEMINI_KEY = 'AIzaSyDHp0yXCGWqnd4ynlCCWzDz9Un1EJOKeW8';
|
|
const GEMINI_MODEL = 'gemini-flash-lite-latest';
|
|
const META_PAGE_ID = '1047354938453381';
|
|
const META_TOKEN = 'EAAM8GXpb76wBSGusXKgwOlrbwHrsDRZBnbESt2Vy1Ti1Y6HMHiSjY2ROspoafa1PT1cCZBISocivZA5eLnM2jafdcvmXhqmLZAnWBi2PTo2wDBwImxQhX0A7IQDG3eF9KeEsw0lqBXw5XnibgppSJZA2aK7f1qvoS9whRO7bYHNcnIQfyP9yDVbSoWLS3AuQ1C6Pj28bPBIgloYxkl7hqBCaf6pXvmaPvpA6RQzkZD';
|
|
|
|
// Preset Image Graphics
|
|
const presetImages = {
|
|
graphic_security: 'https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&w=1000&q=80',
|
|
graphic_calculator: 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=1000&q=80',
|
|
graphic_brand: 'https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?auto=format&fit=crop&w=1000&q=80'
|
|
};
|
|
|
|
// Elements
|
|
const btnRecord = document.getElementById('btnRecord');
|
|
const micIcon = document.getElementById('micIcon');
|
|
const recordStatus = document.getElementById('recordStatus');
|
|
const audioPlayback = document.getElementById('audioPlayback');
|
|
const topicInput = document.getElementById('topicInput');
|
|
const btnGenerate = document.getElementById('btnGenerate');
|
|
const btnPublish = document.getElementById('btnPublish');
|
|
const loaderOverlay = document.getElementById('loaderOverlay');
|
|
const loaderStatus = document.getElementById('loaderStatus');
|
|
const fbContentPreview = document.getElementById('fbContentPreview');
|
|
const fbPreviewImg = document.getElementById('fbPreviewImg');
|
|
const imageChoice = document.getElementById('imageChoice');
|
|
const customUrlGroup = document.getElementById('customUrlGroup');
|
|
const customImageUrl = document.getElementById('customImageUrl');
|
|
const alertSuccess = document.getElementById('alertSuccess');
|
|
const alertError = document.getElementById('alertError');
|
|
|
|
// Toggle custom image URL field
|
|
imageChoice.addEventListener('change', () => {
|
|
if (imageChoice.value === 'custom_url') {
|
|
customUrlGroup.style.display = 'flex';
|
|
} else {
|
|
customUrlGroup.style.display = 'none';
|
|
fbPreviewImg.src = presetImages[imageChoice.value] || presetImages.graphic_brand;
|
|
}
|
|
});
|
|
|
|
customImageUrl.addEventListener('input', () => {
|
|
if (customImageUrl.value.trim()) {
|
|
fbPreviewImg.src = customImageUrl.value.trim();
|
|
}
|
|
});
|
|
|
|
// Web Speech API + Audio Recording
|
|
let recognition;
|
|
let isRecording = false;
|
|
|
|
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
recognition = new SpeechRecognition();
|
|
recognition.lang = 'ar-SA';
|
|
recognition.continuous = true;
|
|
recognition.interimResults = true;
|
|
|
|
recognition.onresult = (event) => {
|
|
let transcript = '';
|
|
for (let i = event.resultIndex; i < event.results.length; i++) {
|
|
transcript += event.results[i][0].transcript;
|
|
}
|
|
if (transcript.trim()) {
|
|
topicInput.value = transcript.trim();
|
|
}
|
|
};
|
|
|
|
recognition.onerror = (event) => {
|
|
recordStatus.textContent = 'حدث تنبيه أثناء تحويل الصوت، يمكنك الكتابة في المربع مباشرة.';
|
|
};
|
|
}
|
|
|
|
btnRecord.addEventListener('click', async () => {
|
|
if (!isRecording) {
|
|
try {
|
|
if (recognition) {
|
|
recognition.start();
|
|
}
|
|
isRecording = true;
|
|
btnRecord.classList.add('recording');
|
|
micIcon.className = 'fa-solid fa-stop';
|
|
recordStatus.textContent = '🎙️ جاري الاستماع لصوتك الآن وتحويله لكتابة مباشرة... (اضغط مجدداً للإيقاف)';
|
|
recordStatus.style.color = '#ef4444';
|
|
} catch (err) {
|
|
alert('يرجى منح إذن استخدام الميكروفون بالمتصفح.');
|
|
}
|
|
} else {
|
|
if (recognition) {
|
|
recognition.stop();
|
|
}
|
|
isRecording = false;
|
|
btnRecord.classList.remove('recording');
|
|
micIcon.className = 'fa-solid fa-microphone';
|
|
recordStatus.textContent = '✅ تم تحويل الصوت إلى نص بنجاح! يمكنك مراجعة النص والضغط على زر التوليد بـ Gemini AI.';
|
|
recordStatus.style.color = '#10b981';
|
|
}
|
|
});
|
|
|
|
// Direct Gemini AI Content & Image Generator
|
|
btnGenerate.addEventListener('click', async () => {
|
|
const userPrompt = topicInput.value.trim() || 'اكتب منشور عن أمان السائقين والركاب وتدقيق الوثائق التلقائي بالذكاء الاصطناعي مع حاسبة التوفير';
|
|
|
|
alertSuccess.style.display = 'none';
|
|
alertError.style.display = 'none';
|
|
loaderOverlay.style.display = 'flex';
|
|
loaderStatus.textContent = 'جاري صياغة المنشور وتوليد البوستر البصري بـ Gemini (gemini-flash-lite-latest)...';
|
|
|
|
// Dynamic Image Generation
|
|
const randomSeed = Math.floor(Math.random() * 1000000);
|
|
const generatedAiImage = `https://pollinations.ai/p/${encodeURIComponent("Professional modern taxi ride hailing app promotional banner with AI security verification shield " + userPrompt.slice(0, 60))}?width=1200&height=630&seed=${randomSeed}`;
|
|
fbPreviewImg.src = generatedAiImage;
|
|
|
|
const systemPrompt = `أنت مدير تسويق ومحرر إعلاني محترف لمنصة Tripz (منصة SaaS عالمية لإطلاق تطبيقات نقل الركاب وإدارة أساطيل التكسي بعلامة المشغّل التجارية).
|
|
قواعد التسويق الحاكمة:
|
|
1. الملكية: علامتك أنت، وتطبيقك باسمك وشعارك، وبياناتك تبقى لك بعقد تصدير مكتوب.
|
|
2. الشفافية: أسعارنا معلنة بالكامل دون أسرار ولا مفاجآت في الفاتورة.
|
|
3. السرعة: إطلاق خلال 30 يوماً من التوقيع على آبل وجوجل.
|
|
4. الإثبات: محرك مجرّب منذ 2019 يخدم أكثر من 6,000 سائق نشط.
|
|
5. دعوة للإجراء (CTA): رابط حاسبة التوفير (https://tripz-egypt.com/apps/) ورابط واتساب المباشر (https://wa.me/962798583052).
|
|
|
|
اكتب منشوراً جذاباً جداً باللغة العربية، منسقاً بالإيموجيات والعناوين والنقاط الواضحة والهاشتاغات المناسبة عن الفكرة التالية:\n${userPrompt}`;
|
|
|
|
try {
|
|
const url = `https://generativelanguage.googleapis.com/v1beta/models/${GEMINI_MODEL}:generateContent?key=${GEMINI_KEY}`;
|
|
const res = await fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
contents: [{ parts: [{ text: systemPrompt }] }]
|
|
})
|
|
});
|
|
|
|
const data = await res.json();
|
|
const text = data?.candidates?.[0]?.content?.parts?.[0]?.text;
|
|
|
|
if (text) {
|
|
fbContentPreview.innerText = text.trim();
|
|
} else {
|
|
throw new Error('لم يرجع Gemini استجابة نصية.');
|
|
}
|
|
} catch (err) {
|
|
fbContentPreview.innerText = `🚨 **هل تخاطر بسمعة شركتك في كل رحلة؟ أمن السائقين والركاب هو الأساس!** 🛑\n\nمع منصة **Tripz**، نضع بين يديك نظام أمان متطور مدعوم بالذكاء الاصطناعي لتدقيق الوثائق ومطابقة الوجه آلياً لحماية عملك على مدار الساعة! 🤖✨\n\n🔹 **تطبيقك باسمك وشعارك 100%**\n🔹 **بياناتك ملكك بعقد تصدير مكتوب**\n🔹 **إطلاق خلال 30 يوماً فقط على آبل وجوجل**\n\n📊 احسب أرباحك وتوفيرك الآن عبر حاسبة التوفير:\n👉 https://tripz-egypt.com/apps/\n\n💬 تواصل معنا مباشرة عبر واتساب:\n👉 https://wa.me/962798583052\n\n#Tripz #تطبيقات_التوصيل #أمان_الركاب #الذكاء_الاصطناعي #SaaS`;
|
|
} finally {
|
|
loaderOverlay.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Direct Meta Graph API Publisher
|
|
btnPublish.addEventListener('click', async () => {
|
|
const message = fbContentPreview.innerText.trim();
|
|
const imageUrl = (imageChoice.value === 'custom_url' && customImageUrl.value.trim())
|
|
? customImageUrl.value.trim()
|
|
: (presetImages[imageChoice.value] || presetImages.graphic_brand);
|
|
|
|
if (!message) {
|
|
alert('محتوى المنشور فارغ!');
|
|
return;
|
|
}
|
|
|
|
alertSuccess.style.display = 'none';
|
|
alertError.style.display = 'none';
|
|
loaderOverlay.style.display = 'flex';
|
|
loaderStatus.textContent = 'جاري إطلاق المنشور لايف على صفحة فيسبوك الرسمية لـ Tripz...';
|
|
|
|
try {
|
|
const endpoint = imageUrl ? `${META_PAGE_ID}/photos` : `${META_PAGE_ID}/feed`;
|
|
const metaUrl = `https://graph.facebook.com/v19.0/${endpoint}`;
|
|
|
|
const payload = imageUrl
|
|
? { access_token: META_TOKEN, caption: message, url: imageUrl }
|
|
: { access_token: META_TOKEN, message: message };
|
|
|
|
const res = await fetch(metaUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (res.ok && (data.id || data.post_id)) {
|
|
const postId = data.id || data.post_id;
|
|
alertSuccess.innerHTML = `<i class="fa-solid fa-circle-check"></i> تم إطلاق ونشر البوست بنجاح على فيسبوك! (معرّف المنشور المباشر: <strong>${postId}</strong>)`;
|
|
alertSuccess.style.display = 'block';
|
|
} else {
|
|
throw new Error(data.error?.message || 'فشلت عملية النشر على ميتا.');
|
|
}
|
|
} catch (err) {
|
|
alertError.innerHTML = `<i class="fa-solid fa-triangle-exclamation"></i> فشل النشر: ${err.message}`;
|
|
alertError.style.display = 'block';
|
|
} finally {
|
|
loaderOverlay.style.display = 'none';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|