Embed

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root { --primary: #1a73e8; --danger: #d93025; --success: #1e8e3e; --bg: #f8f9fa; }
        body { font-family: 'Segoe UI', Tahoma, sans-serif; background-color: var(--bg); margin: 0; padding: 10px; display: flex; justify-content: center; }
        #gatekeeper { background: white; padding: 50px 25px; border-radius: 25px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); text-align: center; width: 100%; max-width: 380px; margin-top: 60px; }
        #app-content { display: none; width: 100%; max-width: 550px; animation: slideUp 0.4s ease-out; }
        @keyframes slideUp { from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);} }
        .card { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 15px; border-right: 6px solid var(--primary); }
        .section-header { font-weight: bold; color: var(--primary); margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 8px; display: block; }
        label { display: block; margin-bottom: 8px; font-weight: 600; color: #444; font-size: 14px; }
        input, select, textarea { width: 100%; padding: 14px; border: 1.5px solid #ddd; border-radius: 10px; font-size: 16px; box-sizing: border-box; background: #fff; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
        .check-box { border: 2px solid #eee; padding: 15px; border-radius: 12px; display: flex; align-items: center; cursor: pointer; font-size: 13px; }
        .check-box input { width: 20px; height: 20px; margin-left: 10px; }
        .check-box:has(input:checked) { border-color: var(--danger); background: #fff5f5; color: var(--danger); font-weight: bold; }
        .btn-main { width: 100%; padding: 18px; background: var(--success); color: white; border: none; border-radius: 12px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 10px; box-shadow: 0 4px 15px rgba(30, 142, 62, 0.3); }
        .status-info { font-size: 12px; text-align: center; padding: 10px; background: #e8f0fe; border-radius: 10px; margin-bottom: 15px; color: var(--primary); }
        .hidden { display: none; }
        .rating-select { background: #fffdf0; border: 1px solid #f0e68c; color: #856404; font-weight: bold; margin-top: 5px; }
    </style>
</head>
<body>

    <div id="gatekeeper">
        <div style="font-size: 50px; margin-bottom: 25px;">🔒</div>
        <input type="password" id="p_code" placeholder="كلمة المرور" style="text-align:center; margin-bottom:20px;">
        <button onclick="accessSystem()" style="width:100%; padding:15px; background:var(--primary); color:white; border:none; border-radius:12px; font-weight:bold; cursor:pointer;">دخول النظام</button>
    </div>

    <div id="app-content">
        <div class="status-info">
            📅 <span id="cur-date"></span> | 🕒 <span id="cur-time"></span> | الشفت: <b id="cur-shift">..</b>
        </div>

        <div class="card">
            <span class="section-header">بيانات الموقع</span>
            <label>الزون (Zone)</label>
            <input type="text" id="zone_val" placeholder="اسم المنطقة" required>
        </div>

        <div class="card">
            <span class="section-header">فحص الفنيين والتقييم الفردي</span>
            <label>نظام الفريق</label>
            <select id="team_type" onchange="adjustUI()">
                <option value="1">فني منفرد</option>
                <option value="2">فريق كامل (2 فنيين)</option>
            </select>

            <div id="member1_box" style="margin-top:15px;">
                <label>اسم الفني الأول</label>
                <input type="text" id="name1" placeholder="الاسم الكامل" required>
                <label style="margin-top:10px;">تقييم أداء الفني الأول</label>
                <select id="rate1" class="rating-select">
                    <option value="⭐⭐⭐⭐⭐">5/5 ممتاز</option>
                    <option value="⭐⭐⭐⭐">4/5 جيد جداً</option>
                    <option value="⭐⭐⭐">3/5 مقبول</option>
                    <option value="⭐⭐">2/5 ضعيف</option>
                    <option value="⭐">1/5 سيئ</option>
                </select>
                <div class="grid">
                    <label class="check-box"><input type="checkbox" class="m1" value="خوذة"> مفقود خوذة</label>
                    <label class="check-box"><input type="checkbox" class="m1" value="بدلة"> مفقود بدلة</label>
                    <label class="check-box"><input type="checkbox" class="m1" value="كفوف"> مفقود كفوف</label>
                    <label class="check-box"><input type="checkbox" class="m1" value="عدة"> مفقود عدة</label>
                </div>
            </div>

            <div id="member2_box" class="hidden" style="margin-top:20px; border-top:1px solid #eee; padding-top:15px;">
                <label>اسم الفني الثاني</label>
                <input type="text" id="name2" placeholder="الاسم الكامل">
                <label style="margin-top:10px;">تقييم أداء الفني الثاني</label>
                <select id="rate2" class="rating-select">
                    <option value="⭐⭐⭐⭐⭐">5/5 ممتاز</option>
                    <option value="⭐⭐⭐⭐">4/5 جيد جداً</option>
                    <option value="⭐⭐⭐">3/5 مقبول</option>
                    <option value="⭐⭐">2/5 ضعيف</option>
                    <option value="⭐">1/5 سيئ</option>
                </select>
                <div class="grid">
                    <label class="check-box"><input type="checkbox" class="m2" value="خوذة"> مفقود خوذة</label>
                    <label class="check-box"><input type="checkbox" class="m2" value="بدلة"> مفقود بدلة</label>
                    <label class="check-box"><input type="checkbox" class="m2" value="كفوف"> مفقود كفوف</label>
                    <label class="check-box"><input type="checkbox" class="m2" value="عدة"> مفقود عدة</label>
                </div>
            </div>
        </div>

        <div class="card">
            <span class="section-header">التقييم العام والملاحظات</span>
            <label>قيمة الغرامة</label>
            <input type="number" id="fine" placeholder="0.00" required>
            <label style="margin-top:15px;">ملاحظات التيم ليدر النهائية</label>
            <textarea id="admin_notes" rows="4" placeholder="اكتب تقريرك هنا..." required></textarea>
        </div>

        <button class="btn-main" onclick="submitReport()">إرسال الكشف الشامل 🚀</button>
        <input type="hidden" id="gps_data">
    </div>

    <script>
        let autoShift = "";
        function accessSystem() {
            if(document.getElementById('p_code').value === "0019770") {
                navigator.geolocation.getCurrentPosition(p => {
                    document.getElementById('gps_data').value = `https://www.google.com/maps?q=${p.coords.latitude},${p.coords.longitude}`;
                    document.getElementById('gatekeeper').style.display = 'none';
                    document.getElementById('app-content').style.display = 'block';
                    const now = new Date();
                    const h = now.getHours();
                    autoShift = (h >= 9 && h < 16) ? "صباحي" : (h >= 16 && h < 24) ? "مسائي" : "خارج الشفت";
                    document.getElementById('cur-date').innerText = now.toLocaleDateString('ar-EG');
                    document.getElementById('cur-time').innerText = now.toLocaleTimeString('ar-EG', {hour:'2-digit', minute:'2-digit'});
                    document.getElementById('cur-shift').innerText = autoShift;
                }, () => alert("تنبيه: يجب تفعيل GPS لفتح النظام!"));
            } else { alert("الرمز غير صحيح"); }
        }

        function adjustUI() {
            const isTeam = document.getElementById('team_type').value === "2";
            document.getElementById('member2_box').classList.toggle('hidden', !isTeam);
        }

        function submitReport() {
            const gps = document.getElementById('gps_data').value;
            const zone = document.getElementById('zone_val').value;
            const name1 = document.getElementById('name1').value;
            const fine = document.getElementById('fine').value;
            const notes = document.getElementById('admin_notes').value;

            if (!zone || !name1 || fine === "" || !notes) {
                alert("يرجى ملء جميع الحقول الإلزامية!");
                return;
            }

            const m1 = Array.from(document.querySelectorAll('.m1:checked')).map(c => c.value).join('-') || "إلتزام كامل";
            const r1 = document.getElementById('rate1').value;
            
            let msg = `*📊 كشف ميداني (تقييم فردي)*%0A` +
                      `*الوقت:* ${new Date().toLocaleString('ar-EG')}%0A` +
                      `*الزون:* ${zone}%0A` +
                      `--------------------%0A` +
                      `*الفني 1:* ${name1}%0A` +
                      `*التقييم:* ${r1}%0A` +
                      `*النواقص:* ${m1}%0A`;

            if(document.getElementById('team_type').value === "2") {
                const name2 = document.getElementById('name2').value || "غير محدد";
                const m2 = Array.from(document.querySelectorAll('.m2:checked')).map(c => c.value).join('-') || "إلتزام كامل";
                const r2 = document.getElementById('rate2').value;
                msg += `--------------------%0A` +
                       `*الفني 2:* ${name2}%0A` +
                       `*التقييم:* ${r2}%0A` +
                       `*النواقص:* ${m2}%0A`;
            }

            msg += `--------------------%0A` +
                   `*الغرامة الكلية:* ${fine}%0A` +
                   `*ملاحظات القائد:* ${notes}%0A%0A` +
                   `*الموقع:* ${gps}`;

            window.open(`https://wa.me/9647838929924?text=${msg}`, '_blank');
        }
    </script>
</body>
</html>

ايرث بغداد للإنترنت