274 lines
11 KiB
HTML
274 lines
11 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, viewport-fit=cover, maximum-scale=1">
|
||
<title>غمبولة بيوتي — إدارة الأوردرات</title>
|
||
|
||
<meta name="theme-color" content="#4A162E">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="غمبولة">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="description" content="تطبيق تجهيز وتأكيد أوردرات غمبولة بيوتي">
|
||
|
||
<link rel="manifest" href="manifest.json">
|
||
<link rel="icon" href="icons/favicon-32.png" sizes="32x32">
|
||
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div id="app">
|
||
|
||
<!-- ===== Header ===== -->
|
||
<header class="app-header">
|
||
<div class="brand">
|
||
<div class="logo-dot"></div>
|
||
<div class="brand-text">
|
||
<span class="title">غمبولة بيوتي</span>
|
||
<span class="subtitle" id="headerSubtitle">إدارة الأوردرات</span>
|
||
</div>
|
||
</div>
|
||
<button class="install-btn" id="installBtn">📲 <span>تثبيت</span></button>
|
||
</header>
|
||
|
||
<!-- ===== iOS install hint ===== -->
|
||
<div class="ios-hint hidden" id="iosHint">
|
||
<span>📲 لتثبيت التطبيق: دوسي زر المشاركة ⬆️ من متصفح سفاري، بعدين "إضافة إلى الشاشة الرئيسية"</span>
|
||
<button class="close-hint" id="closeIosHint">✕</button>
|
||
</div>
|
||
|
||
<!-- ===== Main ===== -->
|
||
<main class="app-main">
|
||
|
||
<!-- ---------- Screen: Home ---------- -->
|
||
<section class="screen active" data-screen="home">
|
||
<div class="screen-title">أهلاً بيكِ 🤍</div>
|
||
<div class="screen-sub">نظرة سريعة على شغلك النهارده</div>
|
||
|
||
<div class="stat-grid">
|
||
<div class="stat-card accent">
|
||
<span class="stat-icon">📦</span>
|
||
<div class="stat-value" id="homeOrderCount">0</div>
|
||
<div class="stat-label">أوردرات مسجلة</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">💰</span>
|
||
<div class="stat-value" id="homeEarned">0 ج</div>
|
||
<div class="stat-label">إجمالي المستحق</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">🛍️</span>
|
||
<div class="stat-value" id="homeCartItems">0</div>
|
||
<div class="stat-label">منتجات بالأوردر الحالي</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">🧾</span>
|
||
<div class="stat-value" id="homeCartTotal">0 ج</div>
|
||
<div class="stat-label">إجمالي الأوردر الحالي</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="cta-btn" id="startNewOrderBtn">🆕 ابدئي أوردر جديد</button>
|
||
|
||
<div class="quick-row">
|
||
<button class="cta-btn outline" data-goto="order">📦 مراجعة الأوردر</button>
|
||
<button class="cta-btn outline" data-goto="earnings">📊 الأرباح</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ---------- Screen: Products ---------- -->
|
||
<section class="screen" data-screen="products">
|
||
<div class="screen-title">المنتجات</div>
|
||
<div class="screen-sub">اختاري الحجم والكمية، السعر بيتحسب لوحده</div>
|
||
|
||
<div class="accordion" id="categoriesContainer"></div>
|
||
|
||
<div class="card custom-card">
|
||
<h3>➕ منتج مش موجود في القايمة</h3>
|
||
<div id="customList"></div>
|
||
<button class="cta-btn outline" id="addCustomBtn">+ إضافة منتج مخصص</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ---------- Screen: Order ---------- -->
|
||
<section class="screen" data-screen="order">
|
||
<div class="screen-title">الأوردر الحالي</div>
|
||
<div class="screen-sub">راجعي المنتجات والشحن قبل ما تكمّلي</div>
|
||
|
||
<div class="card">
|
||
<h3>المنتجات المختارة</h3>
|
||
<div id="orderSummaryList"></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="field" style="margin-bottom:0;">
|
||
<label>الشحن (جنيه)</label>
|
||
<input type="number" id="shipping" value="80" min="0">
|
||
</div>
|
||
<div class="totals-block">
|
||
<div class="total-line"><span>إجمالي المنتجات</span><span id="productsTotal">0 ج</span></div>
|
||
<div class="total-line grand"><span>الإجمالي النهائي</span><span id="grandTotal">0 ج</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="cta-btn" id="goToCustomerBtn">👤 متابعة لبيانات العميل</button>
|
||
</section>
|
||
|
||
<!-- ---------- Screen: Customer ---------- -->
|
||
<section class="screen" data-screen="customer">
|
||
<div class="screen-title">بيانات العميل</div>
|
||
<div class="screen-sub">البيانات دي هتدخل في نص الأوردر النهائي</div>
|
||
|
||
<div class="card">
|
||
<h3>معلومات التوصيل</h3>
|
||
<div class="field">
|
||
<label>اسم العميل</label>
|
||
<input type="text" id="custName" placeholder="اسم العميل">
|
||
</div>
|
||
<div class="field-row">
|
||
<div class="field" style="margin-bottom:0;">
|
||
<label>رقم موبايل 1</label>
|
||
<input type="tel" id="phone1" placeholder="01xxxxxxxxx">
|
||
</div>
|
||
<div class="field" style="margin-bottom:0;">
|
||
<label>رقم موبايل 2 (اختياري)</label>
|
||
<input type="tel" id="phone2" placeholder="01xxxxxxxxx">
|
||
</div>
|
||
</div>
|
||
<div class="field" style="margin-top:12px; margin-bottom:0;">
|
||
<label>العنوان بالتفصيل</label>
|
||
<textarea id="address" rows="3" placeholder="مثال: المنوفية / بركة السبع قرية ميت صالح بجوار مسجد النور"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>بياناتك انتِ</h3>
|
||
<div class="field-row">
|
||
<div class="field" style="margin-bottom:0;">
|
||
<label>اسمك</label>
|
||
<input type="text" id="agentName" placeholder="اسمك">
|
||
</div>
|
||
<div class="field" style="margin-bottom:0;">
|
||
<label>التاريخ</label>
|
||
<input type="text" id="orderDate">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="cta-btn gold" id="goToPreviewBtn">👁️ معاينة النص وإرساله</button>
|
||
</section>
|
||
|
||
<!-- ---------- Screen: Preview (reached from Customer) ---------- -->
|
||
<section class="screen" data-screen="preview">
|
||
<div class="screen-title">النص الجاهز للمنجر</div>
|
||
<div class="screen-sub">راجعي النص وابعتيه — ملوش علاقة بيه غير البيانات اللي دخلتيها</div>
|
||
|
||
<div class="card">
|
||
<textarea class="preview-box" id="outputText" readonly></textarea>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="field">
|
||
<label>رقم واتساب المنجر (يتذكره الجهاز)</label>
|
||
<input type="tel" id="managerPhone" placeholder="مثال: 201234567890">
|
||
</div>
|
||
<div class="quick-row" style="margin-top:2px;">
|
||
<button class="cta-btn" id="copyBtn">📋 نسخ الأوردر</button>
|
||
<button class="cta-btn wa" id="sendWaBtn">💬 إرسال على واتساب</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="cta-btn gold" id="registerOrderBtn">✅ تسجيل هذا الأوردر</button>
|
||
</section>
|
||
|
||
<!-- ---------- Screen: Earnings ---------- -->
|
||
<section class="screen" data-screen="earnings">
|
||
<div class="screen-title">عداد الأوردرات وأرباحك</div>
|
||
<div class="screen-sub">كل ده محفوظ على جهازك</div>
|
||
|
||
<div class="stat-grid">
|
||
<div class="stat-card accent">
|
||
<span class="stat-icon">📦</span>
|
||
<div class="stat-value" id="earnCount">0</div>
|
||
<div class="stat-label">عدد الأوردرات</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-icon">💵</span>
|
||
<div class="stat-value" id="earnRateDisplay">10 ج</div>
|
||
<div class="stat-label">قيمة الأوردر الواحد</div>
|
||
</div>
|
||
<div class="stat-card" style="grid-column: span 2;">
|
||
<span class="stat-icon">💰</span>
|
||
<div class="stat-value" id="earnTotal">0 ج</div>
|
||
<div class="stat-label">إجمالي المستحق ليكِ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>الإعدادات</h3>
|
||
<div class="field" style="margin-bottom:0;">
|
||
<label>القيمة لكل أوردر (جنيه)</label>
|
||
<input type="number" id="rate" value="10" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>سجل آخر الأوردرات</h3>
|
||
<div class="timeline" id="orderLog"></div>
|
||
</div>
|
||
|
||
<div class="quick-row">
|
||
<button class="cta-btn danger-outline" id="undoOrderBtn">↩️ تراجع عن آخر تسجيل</button>
|
||
<button class="cta-btn danger-outline" id="clearLogBtn">🗑️ مسح السجل</button>
|
||
</div>
|
||
|
||
<div class="card" style="margin-top:14px;">
|
||
<h3>📩 إبلاغ صاحب العمل</h3>
|
||
<div class="field">
|
||
<label>رقم واتساب للتنبيه (يتذكره الجهاز)</label>
|
||
<input type="tel" id="notifyPhone" placeholder="مثال: 201234567890">
|
||
</div>
|
||
<button class="cta-btn wa" id="notifyWaBtn">📩 ابعت تحديث الأرباح على واتساب</button>
|
||
<div class="badge-note warn" style="margin-top:10px;">⚠️ العدّاد محفوظ على نفس الجهاز بس. زرار الإبلاغ ده الطريقة العملية عشان الأرقام توصل لجهاز تاني.</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ===== Sticky order bar (shown on Products screen) ===== -->
|
||
<div class="sticky-order-bar" id="stickyOrderBar">
|
||
<div class="info"><b id="stickyText">0 منتجات — 0 ج</b>راجعي قبل الإرسال</div>
|
||
<button data-goto="order">مراجعة الأوردر</button>
|
||
</div>
|
||
|
||
<!-- ===== Toast ===== -->
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<!-- ===== Bottom Navigation ===== -->
|
||
<nav class="bottom-nav">
|
||
<button class="nav-btn active" data-screen-btn="home">
|
||
<span class="nav-icon">🏠</span><span>الرئيسية</span>
|
||
</button>
|
||
<button class="nav-btn" data-screen-btn="products">
|
||
<span class="nav-icon">🛍️</span><span>المنتجات</span>
|
||
<span class="nav-badge hidden" id="productsBadge">0</span>
|
||
</button>
|
||
<button class="nav-btn" data-screen-btn="order">
|
||
<span class="nav-icon">📦</span><span>الأوردر</span>
|
||
</button>
|
||
<button class="nav-btn" data-screen-btn="customer">
|
||
<span class="nav-icon">👤</span><span>العميل</span>
|
||
</button>
|
||
<button class="nav-btn" data-screen-btn="earnings">
|
||
<span class="nav-icon">📊</span><span>الأرباح</span>
|
||
</button>
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|