<!-- Cookie Consent Banner -->
<style>
#cookie-consent-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: #1a1a2e;
color: #ffffff;
padding: 20px 24px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}
#cookie-consent-banner .cc-link {
color: inherit;
text-decoration: underline;
font-weight: 600;
}
#cookie-consent-banner .cc-link:hover {
opacity: 0.85;
}
#cookie-consent-banner .cc-content {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
max-width: 1200px;
margin: 0 auto;
}
#cookie-consent-banner .cc-text {
flex: 1;
min-width: 200px;
}
#cookie-consent-banner .cc-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#cookie-consent-banner button {
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: opacity 0.2s;
}
#cookie-consent-banner button:hover {
opacity: 0.9;
}
#cc-accept-btn {
background: #e94560;
color: #ffffff;
border-color: #e94560;
}
#cc-reject-btn {
background: transparent;
color: #ffffff;
}
#cc-manage-btn {
background: transparent;
color: #ffffff;
text-decoration: underline;
border: none;
padding: 10px 12px;
}
@media (max-width: 600px) {
#cookie-consent-banner .cc-content {
flex-direction: column;
text-align: center;
}
#cookie-consent-banner .cc-buttons {
justify-content: center;
width: 100%;
}
#cookie-consent-banner button {
flex: 1;
min-width: 120px;
}
}
#cookie-consent-prefs {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#cookie-consent-prefs .cc-pref-box {
background: #1a1a2e;
color: #ffffff;
width: 90%;
max-width: 460px;
max-height: 85vh;
overflow-y: auto;
border-radius: 12px;
padding: 24px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
#cookie-consent-prefs .cc-pref-title {
margin: 0 0 16px;
font-size: 18px;
font-weight: 700;
}
#cookie-consent-prefs .cc-pref-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-top: 1px solid rgba(127, 127, 127, 0.25);
}
#cookie-consent-prefs .cc-pref-info { flex: 1; }
#cookie-consent-prefs .cc-pref-name {
font-weight: 600;
font-size: 14px;
margin-bottom: 2px;
}
#cookie-consent-prefs .cc-pref-desc {
font-size: 12px;
opacity: 0.8;
line-height: 1.4;
}
#cookie-consent-prefs .cc-pref-always {
font-size: 12px;
font-weight: 600;
opacity: 0.7;
white-space: nowrap;
padding-top: 2px;
}
#cookie-consent-prefs .cc-switch {
position: relative;
display: inline-block;
width: 42px;
height: 24px;
flex-shrink: 0;
}
#cookie-consent-prefs .cc-switch input {
opacity: 0;
width: 0;
height: 0;
}
#cookie-consent-prefs .cc-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: rgba(127, 127, 127, 0.5);
border-radius: 24px;
transition: background 0.2s;
}
#cookie-consent-prefs .cc-slider:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
}
#cookie-consent-prefs input:checked + .cc-slider {
background: #e94560;
}
#cookie-consent-prefs input:checked + .cc-slider:before {
transform: translateX(18px);
}
#cookie-consent-prefs .cc-pref-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
#cookie-consent-prefs .cc-pref-actions button {
padding: 10px 18px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
border: 1px solid rgba(127, 127, 127, 0.3);
}
#cc-prefs-save {
background: #e94560;
color: #ffffff;
border-color: #e94560;
}
#cc-prefs-cancel {
background: transparent;
color: #ffffff;
}
</style>
<div id="cookie-consent-banner" style="display:none;">
<div class="cc-content">
<div class="cc-text">نستخدم ملفات تعريف الارتباط لتحسين تجربتك. باستمرارك في زيارة هذا الموقع فإنك توافق على استخدامنا لها.</div>
<div class="cc-buttons">
<button id="cc-accept-btn">قبول الكل</button>
<button id="cc-reject-btn">رفض الكل</button>
<button id="cc-manage-btn">إدارة التفضيلات</button>
</div>
</div>
</div>
<div id="cookie-consent-prefs" style="display:none;" role="dialog" aria-modal="true" aria-label="تفضيلات ملفات تعريف الارتباط">
<div class="cc-pref-box">
<h2 class="cc-pref-title">تفضيلات ملفات تعريف الارتباط</h2>
<div class="cc-pref-list">
<div class="cc-pref-row">
<div class="cc-pref-info">
<div class="cc-pref-name">ضرورية</div>
<div class="cc-pref-desc">لازمة لعمل الموقع. لا يمكن إيقافها.</div>
</div>
<span class="cc-pref-always">مفعّل دائمًا</span>
</div>
<div class="cc-pref-row">
<div class="cc-pref-info">
<div class="cc-pref-name">تحليلية</div>
<div class="cc-pref-desc">تساعدنا على فهم كيفية استخدام الزوّار للموقع حتى نحسّنه.</div>
</div>
<label class="cc-switch"><input type="checkbox" data-cc-cat="analytics" aria-label="تحليلية"><span class="cc-slider"></span></label>
</div>
</div>
<div class="cc-pref-actions">
<button id="cc-prefs-save">حفظ التفضيلات</button>
<button id="cc-prefs-cancel">إلغاء</button>
</div>
</div>
</div>
<script>
(function() {
var COOKIE_NAME = 'cookie_consent';
var CATEGORIES = ["necessary","analytics"];
var OPTIONAL_CATEGORIES = ["analytics"];
var DEFAULT_CONSENT = false;
var EXPIRY_DAYS = 180;
function getCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
return match ? decodeURIComponent(match[2]) : null;
}
function setCookie(name, value, days) {
var d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = name + '=' + encodeURIComponent(value) +
';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
}
function hideBanner() {
var banner = document.getElementById('cookie-consent-banner');
if (banner) banner.style.display = 'none';
}
function showBanner() {
var banner = document.getElementById('cookie-consent-banner');
if (banner) banner.style.display = 'block';
}
function getPrefs() { return document.getElementById('cookie-consent-prefs'); }
function openPrefs() {
var p = getPrefs();
if (!p) return;
// Reflect the last saved choice (or the defaults) in the toggles.
var saved = {};
try { saved = JSON.parse(getCookie(COOKIE_NAME) || '{}'); } catch (e) {}
OPTIONAL_CATEGORIES.forEach(function(cat) {
var box = p.querySelector('[data-cc-cat="' + cat + '"]');
if (box) box.checked = (cat in saved) ? !!saved[cat] : DEFAULT_CONSENT;
});
p.style.display = 'flex';
}
function closePrefs() {
var p = getPrefs();
if (p) p.style.display = 'none';
}
// Persist a consent object and broadcast it. `necessary` is always true.
function persist(consent) {
consent.necessary = true;
setCookie(COOKIE_NAME, JSON.stringify(consent), EXPIRY_DAYS);
hideBanner();
closePrefs();
window.dispatchEvent(new CustomEvent('cookieConsent', { detail: consent }));
}
// Accept-all / reject-all set every optional category the same way.
function saveConsent(accepted) {
var consent = {};
CATEGORIES.forEach(function(cat) {
consent[cat] = cat === 'necessary' ? true : accepted;
});
persist(consent);
}
// Save exactly what the visitor toggled in the preference center.
function savePreferences() {
var p = getPrefs();
var consent = { necessary: true };
OPTIONAL_CATEGORIES.forEach(function(cat) {
var box = p && p.querySelector('[data-cc-cat="' + cat + '"]');
consent[cat] = !!(box && box.checked);
});
persist(consent);
}
// Check existing consent
var existing = getCookie(COOKIE_NAME);
if (!existing) {
if (DEFAULT_CONSENT) {
// Opt-out mode: set default consent, still show banner
var defaultCons = {};
CATEGORIES.forEach(function(cat) { defaultCons[cat] = true; });
setCookie(COOKIE_NAME, JSON.stringify(defaultCons), EXPIRY_DAYS);
}
showBanner();
}
document.getElementById('cc-accept-btn').addEventListener('click', function() {
saveConsent(true);
});
document.getElementById('cc-reject-btn').addEventListener('click', function() {
saveConsent(false);
});
document.getElementById('cc-manage-btn').addEventListener('click', openPrefs);
var saveBtn = document.getElementById('cc-prefs-save');
if (saveBtn) saveBtn.addEventListener('click', savePreferences);
var cancelBtn = document.getElementById('cc-prefs-cancel');
if (cancelBtn) cancelBtn.addEventListener('click', closePrefs);
})();
</script>
