مشكلة في الحفظ في الكوكيز

السلام عليكم ممكن تعديل الاكواد التالية وجعل اختيارات العضو منها يتم حفظها في الكوكيز؟

الكود:: <div class="controls">
<div class="control-item">
<label for="bg-color">اختر لون الخلفية: </label>
<input type="color" id="bg-color" name="bg-color" value="#ffffff">
<button class="reset-button" onclick="resetColor('bg-color', '#ffffff')">الافتراضي</button>
</div>
<div class="control-item">
<label for="secondary-color">اختر اللون الثانوي: </label>
<input type="color" id="secondary-color" name="secondary-color" value="#000000">
<button class="reset-button" onclick="resetColor('secondary-color', '#000000')">الافتراضي</button>
</div>
<div class="control-item">
<label for="text-color">اختر لون النص: </label>
<input type="color" id="text-color" name="text-color" value="#000000">
<button class="reset-button" onclick="resetColor('text-color', '#000000')">الافتراضي</button>
</div>
<div class="control-item">
<label for="font-size">اختر حجم الخط: </label>
<input type="range" id="font-size" name="font-size" min="12" max="24" value="16" step="1">
<span id="font-size-value">16</span>px
<button class="reset-button" onclick="resetFontSize()">الافتراضي</button>
</div>
</div>
<script>
document.getElementById('bg-color').addEventListener('input', function() {
document.documentElement.style.setProperty('--main-bg-color', this.value);
document.cookie = "bg-color=" + this.value + "; path=/; max-age=" + (60*60*24*30);
});

document.getElementById('secondary-color').addEventListener('input', function() {
document.documentElement.style.setProperty('--main-secondary-color', this.value);
document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
element.style.backgroundColor = this.value;
}, this);
document.cookie = "secondary-color=" + this.value + "; path=/; max-age=" + (60*60*24*30);
});

document.getElementById('text-color').addEventListener('input', function() {
document.documentElement.style.setProperty('--main-text-color', this.value);
document.cookie = "text-color=" + this.value + "; path=/; max-age=" + (60*60*24*30);
});

document.getElementById('font-size').addEventListener('input', function() {
document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
element.style.fontSize = this.value + 'px';
}, this);
document.getElementById('font-size-value').textContent = this.value;
document.cookie = "font-size=" + this.value + "; path=/; max-age=" + (60*60*24*30);
});

function resetColor(id, defaultValue) {
document.getElementById(id).value = defaultValue;
document.documentElement.style.setProperty(`--main-${id.replace('-', '_')}`, defaultValue);
if (id === 'bg-color') {
document.documentElement.style.setProperty('--main-bg-color', '#ffffff');
} else if (id === 'text-color') {
document.documentElement.style.setProperty('--main-text-color', '#000000');
} else if (id === 'secondary-color') {
document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
element.style.backgroundColor = defaultValue;
});
}
document.cookie = `${id}=; path=/; max-age=0`;
}

function resetFontSize() {
document.getElementById('font-size').value = 16;
document.getElementById('font-size-value').textContent = 16;
document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
element.style.fontSize = '16px';
});
document.cookie = "font-size=; path=/; max-age=0";
}

</script>

الكود الثاني

الكود:: <style>
#header-banner {
background-image: url(https://i.imgur.com/l7LakYb.jpeg);
background-position: center;
background-repeat: no-repeat;
height: 460px;
position: relative;
width: 100%;}

body.default #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/mtUhlkj.jpeg);
}

body.style1 #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/0C09fBG.jpeg);
}

body.style2 #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/l7LakYb.jpeg);
}

body.style3 #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/wZ0T9t5.jpeg);
}
</style>

<div>
<select id="styleSelector">
<option value="default">الافتراضي</option>
<option value="style1">ستايل 1</option>
<option value="style2">ستايل 2</option>
<option value="style3">ستايل 3</option>
</select>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const styleSelector = document.getElementById('styleSelector');

const savedStyle = getCookie('selectedStyle');
if (savedStyle) {
document.body.className = savedStyle;
styleSelector.value = savedStyle;
}

styleSelector.addEventListener('change', function () {
document.body.className = styleSelector.value;
setCookie('selectedStyle', styleSelector.value, 365);
});
});

function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = `expires=${d.toUTCString()}`;
document.cookie = `${name}=${value};${expires};path=/`;
}

function getCookie(name) {
const nameEQ = `${name}=`;
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
</script>

ولكم جزيل الشكر والعرفان clown

وعليكم السلام
اهلا اخي المبدع

تم اضافة الكوكيز باستخدام الai

الكود:: <div class="controls">

<div class="control-item">
      <label for="bg-color">اختر لون الخلفية: </label> <input type="color" id="bg-color" name="bg-color" value="#ffffff" />
   <button class="reset-button" onclick="resetColor('bg-color', '#ffffff')">
      الافتراضي
   </button>

</div>

<div class="control-item">
      <label for="secondary-color">اختر اللون الثانوي: </label> <input type="color" id="secondary-color" name="secondary-color" value="#000000" />
   <button class="reset-button" onclick="resetColor('secondary-color', '#000000')">
      الافتراضي
   </button>

</div>

<div class="control-item">
      <label for="text-color">اختر لون النص: </label> <input type="color" id="text-color" name="text-color" value="#000000" />
   <button class="reset-button" onclick="resetColor('text-color', '#000000')">
      الافتراضي
   </button>

</div>

<div class="control-item">
      <label for="font-size">اختر حجم الخط: </label> <input type="range" id="font-size" name="font-size" min="12" max="24" value="16" step="1" /> <span id="font-size-value">16</span>px
   <button class="reset-button" onclick="resetFontSize()">
      الافتراضي
   </button>

</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// تحميل القيم من الكوكيز عند تحميل الصفحة
const bgColor = getCookie('bg-color') || '#ffffff';
const secondaryColor = getCookie('secondary-color') || '#000000';
const textColor = getCookie('text-color') || '#000000';
const fontSize = getCookie('font-size') || '16';

// تطبيق القيم المحفوظة
document.getElementById('bg-color').value = bgColor;
document.documentElement.style.setProperty('--main-bg-color', bgColor);

document.getElementById('secondary-color').value = secondaryColor;
document.documentElement.style.setProperty('--main-secondary-color', secondaryColor);
updateSecondaryColor(secondaryColor); // تحديث اللون الثانوي

document.getElementById('text-color').value = textColor;
document.documentElement.style.setProperty('--main-text-color', textColor);

document.getElementById('font-size').value = fontSize;
document.getElementById('font-size-value').textContent = fontSize;
updateFontSize(fontSize); // تحديث حجم الخط

// إضافة أحداث المستمع
addInputListeners();
});

function addInputListeners() {
document.getElementById('bg-color').addEventListener('input', function() {
document.documentElement.style.setProperty('--main-bg-color', this.value);
document.cookie = "bg-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
});

document.getElementById('secondary-color').addEventListener('input', function() {
document.documentElement.style.setProperty('--main-secondary-color', this.value);
updateSecondaryColor(this.value);
document.cookie = "secondary-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
});

document.getElementById('text-color').addEventListener('input', function() {
document.documentElement.style.setProperty('--main-text-color', this.value);
document.cookie = "text-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
});

document.getElementById('font-size').addEventListener('input', function() {
updateFontSize(this.value);
document.cookie = "font-size=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
});
}

function updateSecondaryColor(value) {
document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
element.style.backgroundColor = value;
});
}

function updateFontSize(value) {
document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
element.style.fontSize = value + 'px';
});
document.getElementById('font-size-value').textContent = value;
}

function resetColor(id, defaultValue) {
document.getElementById(id).value = defaultValue;
document.documentElement.style.setProperty(`--main-${id.replace('-', '_')}`, defaultValue);
if (id === 'bg-color') {
document.documentElement.style.setProperty('--main-bg-color', '#ffffff');
} else if (id === 'text-color') {
document.documentElement.style.setProperty('--main-text-color', '#000000');
} else if (id === 'secondary-color') {
updateSecondaryColor(defaultValue);
}
document.cookie = `${id}=; path=/; max-age=0`;
}

function resetFontSize() {
document.getElementById('font-size').value = 16;
document.getElementById('font-size-value').textContent = 16;
updateFontSize(16);
document.cookie = "font-size=; path=/; max-age=0";
}

// دوال الكوكيز
function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = `expires=${d.toUTCString()}`;
document.cookie = `${name}=${value};${expires};path=/`;
}

function getCookie(name) {
const nameEQ = `${name}=`;
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
</script> <style>
#header-banner {
background-image: url(https://i.imgur.com/l7LakYb.jpeg);
background-position: center;
background-repeat: no-repeat;
height: 460px;
position: relative;
width: 100%;
}

body.default #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/mtUhlkj.jpeg);
}

body.style1 #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/0C09fBG.jpeg);
}

body.style2 #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/l7LakYb.jpeg);
}

body.style3 #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/wZ0T9t5.jpeg);
}
</style>
<div>
   <select id="styleSelector">
<option value="default">الافتراضي</option>
<option value="style1">ستايل 1</option>
<option value="style2">ستايل 2</option>
<option value="style3">ستايل 3</option>
</select>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const styleSelector = document.getElementById('styleSelector');

const savedStyle = getCookie('selectedStyle');
if (savedStyle) {
document.body.className = savedStyle;
styleSelector.value = savedStyle;
}

styleSelector.addEventListener('change', function() {
document.body.className = styleSelector.value;
setCookie('selectedStyle', styleSelector.value, 365);
});
});
</script>

كونان2000 كتب:

وعليكم السلام
اهلا اخي المبدع

تم اضافة الكوكيز باستخدام الai

الكود:: <div class="controls">

<div class="control-item">
   <label for="bg-color">اختر لون الخلفية: </label> <input type="color" id="bg-color" name="bg-color" value="#ffffff" />
<button class="reset-button" onclick="resetColor('bg-color', '#ffffff')">
الافتراضي
</button>

</div>

<div class="control-item">
   <label for="secondary-color">اختر اللون الثانوي: </label> <input type="color" id="secondary-color" name="secondary-color" value="#000000" />
<button class="reset-button" onclick="resetColor('secondary-color', '#000000')">
الافتراضي
</button>

</div>

<div class="control-item">
   <label for="text-color">اختر لون النص: </label> <input type="color" id="text-color" name="text-color" value="#000000" />
<button class="reset-button" onclick="resetColor('text-color', '#000000')">
الافتراضي
</button>

</div>

<div class="control-item">
   <label for="font-size">اختر حجم الخط: </label> <input type="range" id="font-size" name="font-size" min="12" max="24" value="16" step="1" /> <span id="font-size-value">16</span>px
<button class="reset-button" onclick="resetFontSize()">
الافتراضي
</button>

</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
   // تحميل القيم من الكوكيز عند تحميل الصفحة
   const bgColor = getCookie('bg-color') || '#ffffff';
   const secondaryColor = getCookie('secondary-color') || '#000000';
   const textColor = getCookie('text-color') || '#000000';
   const fontSize = getCookie('font-size') || '16';

   // تطبيق القيم المحفوظة
   document.getElementById('bg-color').value = bgColor;
   document.documentElement.style.setProperty('--main-bg-color', bgColor);

   document.getElementById('secondary-color').value = secondaryColor;
   document.documentElement.style.setProperty('--main-secondary-color', secondaryColor);
   updateSecondaryColor(secondaryColor); // تحديث اللون الثانوي

   document.getElementById('text-color').value = textColor;
   document.documentElement.style.setProperty('--main-text-color', textColor);

   document.getElementById('font-size').value = fontSize;
   document.getElementById('font-size-value').textContent = fontSize;
   updateFontSize(fontSize); // تحديث حجم الخط

   // إضافة أحداث المستمع
   addInputListeners();
});

function addInputListeners() {
   document.getElementById('bg-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-bg-color', this.value);
   document.cookie = "bg-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
   });

   document.getElementById('secondary-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-secondary-color', this.value);
   updateSecondaryColor(this.value);
   document.cookie = "secondary-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
   });

   document.getElementById('text-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-text-color', this.value);
   document.cookie = "text-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
   });

   document.getElementById('font-size').addEventListener('input', function() {
   updateFontSize(this.value);
   document.cookie = "font-size=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
   });
}

function updateSecondaryColor(value) {
   document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
   element.style.backgroundColor = value;
   });
}

function updateFontSize(value) {
   document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
   element.style.fontSize = value + 'px';
   });
   document.getElementById('font-size-value').textContent = value;
}

function resetColor(id, defaultValue) {
   document.getElementById(id).value = defaultValue;
   document.documentElement.style.setProperty(`--main-${id.replace('-', '_')}`, defaultValue);
   if (id === 'bg-color') {
   document.documentElement.style.setProperty('--main-bg-color', '#ffffff');
   } else if (id === 'text-color') {
   document.documentElement.style.setProperty('--main-text-color', '#000000');
   } else if (id === 'secondary-color') {
   updateSecondaryColor(defaultValue);
   }
   document.cookie = `${id}=; path=/; max-age=0`;
}

function resetFontSize() {
   document.getElementById('font-size').value = 16;
   document.getElementById('font-size-value').textContent = 16;
   updateFontSize(16);
   document.cookie = "font-size=; path=/; max-age=0";
}

// دوال الكوكيز
function setCookie(name, value, days) {
   const d = new Date();
   d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
   const expires = `expires=${d.toUTCString()}`;
   document.cookie = `${name}=${value};${expires};path=/`;
}

function getCookie(name) {
   const nameEQ = `${name}=`;
   const ca = document.cookie.split(';');
   for (let i = 0; i < ca.length; i++) {
   let c = ca[i];
   while (c.charAt(0) === ' ') c = c.substring(1, c.length);
   if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
   }
   return null;
}
</script> <style>
   #header-banner {
   background-image: url(https://i.imgur.com/l7LakYb.jpeg);
   background-position: center;
   background-repeat: no-repeat;
   height: 460px;
   position: relative;
   width: 100%;
   }

   body.default #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/mtUhlkj.jpeg);
   }

   body.style1 #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/0C09fBG.jpeg);
   }

   body.style2 #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/l7LakYb.jpeg);
   }

   body.style3 #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/wZ0T9t5.jpeg);
   }
</style>
<div>
   <select id="styleSelector">
   <option value="default">الافتراضي</option>
   <option value="style1">ستايل 1</option>
   <option value="style2">ستايل 2</option>
   <option value="style3">ستايل 3</option>
   </select>
</div>
<script>
   document.addEventListener('DOMContentLoaded', function() {
   const styleSelector = document.getElementById('styleSelector');

   const savedStyle = getCookie('selectedStyle');
   if (savedStyle) {
   document.body.className = savedStyle;
   styleSelector.value = savedStyle;
   }

   styleSelector.addEventListener('change', function() {
   document.body.className = styleSelector.value;
   setCookie('selectedStyle', styleSelector.value, 365);
   });
   });
</script>

اهلا اخي كونان الكود لم يعد يعمل Crying or Very sad

توضيح للمطلوب : انا اريد ان يقوم الكود بالاحتفاظ باختيارات العضو عند التنقل في المنتدى او تحديث الصفحة هو حالياً لايحتفظ فيها

لم انتبه انه يعمل بالتومبيلات

اضف التالي الى الجافا
واختر جميع الصفحات

الكود:: (function($) {
document.addEventListener('DOMContentLoaded', function() {

const bgColor = getCookie('bg-color') || '#ffffff';
const secondaryColor = getCookie('secondary-color') || '#000000';
const textColor = getCookie('text-color') || '#000000';
const fontSize = getCookie('font-size') || '16';

document.getElementById('bg-color').value = bgColor;
document.documentElement.style.setProperty('--main-bg-color', bgColor);

document.getElementById('secondary-color').value = secondaryColor;
document.documentElement.style.setProperty('--main-secondary-color', secondaryColor);
updateSecondaryColor(secondaryColor); // تحديث اللون الثانوي

document.getElementById('text-color').value = textColor;
document.documentElement.style.setProperty('--main-text-color', textColor);

document.getElementById('font-size').value = fontSize;
document.getElementById('font-size-value').textContent = fontSize;
updateFontSize(fontSize); // تحديث حجم الخط

addInputListeners();
});

function addInputListeners() {
document.getElementById('bg-color').addEventListener('input', function() {
document.documentElement.style.setProperty('--main-bg-color', this.value);
document.cookie = "bg-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
});

document.getElementById('secondary-color').addEventListener('input', function() {
document.documentElement.style.setProperty('--main-secondary-color', this.value);
updateSecondaryColor(this.value);
document.cookie = "secondary-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
});

document.getElementById('text-color').addEventListener('input', function() {
document.documentElement.style.setProperty('--main-text-color', this.value);
document.cookie = "text-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
});

document.getElementById('font-size').addEventListener('input', function() {
updateFontSize(this.value);
document.cookie = "font-size=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
});
}

function updateSecondaryColor(value) {
document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
element.style.backgroundColor = value;
});
}

function updateFontSize(value) {
document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
element.style.fontSize = value + 'px';
});
document.getElementById('font-size-value').textContent = value;
}

function resetColor(id, defaultValue) {
document.getElementById(id).value = defaultValue;
document.documentElement.style.setProperty(`--main-${id.replace('-', '_')}`, defaultValue);
if (id === 'bg-color') {
document.documentElement.style.setProperty('--main-bg-color', '#ffffff');
} else if (id === 'text-color') {
document.documentElement.style.setProperty('--main-text-color', '#000000');
} else if (id === 'secondary-color') {
updateSecondaryColor(defaultValue);
}
document.cookie = `${id}=; path=/; max-age=0`;
}

function resetFontSize() {
document.getElementById('font-size').value = 16;
document.getElementById('font-size-value').textContent = 16;
updateFontSize(16);
document.cookie = "font-size=; path=/; max-age=0";
}

function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = `expires=${d.toUTCString()}`;
document.cookie = `${name}=${value};${expires};path=/`;
}

function getCookie(name) {
const nameEQ = `${name}=`;
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
}(jQuery));

كونان2000 كتب:

لم انتبه انه يعمل بالتومبيلات

اضف التالي الى الجافا
واختر جميع الصفحات

الكود:: (function($) {
document.addEventListener('DOMContentLoaded', function() {

   const bgColor = getCookie('bg-color') || '#ffffff';
   const secondaryColor = getCookie('secondary-color') || '#000000';
   const textColor = getCookie('text-color') || '#000000';
   const fontSize = getCookie('font-size') || '16';

   document.getElementById('bg-color').value = bgColor;
   document.documentElement.style.setProperty('--main-bg-color', bgColor);

   document.getElementById('secondary-color').value = secondaryColor;
   document.documentElement.style.setProperty('--main-secondary-color', secondaryColor);
   updateSecondaryColor(secondaryColor); // تحديث اللون الثانوي

   document.getElementById('text-color').value = textColor;
   document.documentElement.style.setProperty('--main-text-color', textColor);

   document.getElementById('font-size').value = fontSize;
   document.getElementById('font-size-value').textContent = fontSize;
   updateFontSize(fontSize); // تحديث حجم الخط

   addInputListeners();
});

function addInputListeners() {
   document.getElementById('bg-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-bg-color', this.value);
   document.cookie = "bg-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
   });

   document.getElementById('secondary-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-secondary-color', this.value);
   updateSecondaryColor(this.value);
   document.cookie = "secondary-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
   });

   document.getElementById('text-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-text-color', this.value);
   document.cookie = "text-color=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
   });

   document.getElementById('font-size').addEventListener('input', function() {
   updateFontSize(this.value);
   document.cookie = "font-size=" + this.value + "; path=/; max-age=" + (60 * 60 * 24 * 30);
   });
}

function updateSecondaryColor(value) {
   document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
   element.style.backgroundColor = value;
   });
}

function updateFontSize(value) {
   document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
   element.style.fontSize = value + 'px';
   });
   document.getElementById('font-size-value').textContent = value;
}

function resetColor(id, defaultValue) {
   document.getElementById(id).value = defaultValue;
   document.documentElement.style.setProperty(`--main-${id.replace('-', '_')}`, defaultValue);
   if (id === 'bg-color') {
   document.documentElement.style.setProperty('--main-bg-color', '#ffffff');
   } else if (id === 'text-color') {
   document.documentElement.style.setProperty('--main-text-color', '#000000');
   } else if (id === 'secondary-color') {
   updateSecondaryColor(defaultValue);
   }
   document.cookie = `${id}=; path=/; max-age=0`;
}

function resetFontSize() {
   document.getElementById('font-size').value = 16;
   document.getElementById('font-size-value').textContent = 16;
   updateFontSize(16);
   document.cookie = "font-size=; path=/; max-age=0";
}

function setCookie(name, value, days) {
   const d = new Date();
   d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
   const expires = `expires=${d.toUTCString()}`;
   document.cookie = `${name}=${value};${expires};path=/`;
}

function getCookie(name) {
   const nameEQ = `${name}=`;
   const ca = document.cookie.split(';');
   for (let i = 0; i < ca.length; i++) {
   let c = ca[i];
   while (c.charAt(0) === ' ') c = c.substring(1, c.length);
   if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
   }
   return null;
}
}(jQuery));

الكود الاول اشتغل فعلا لكن التاني لا

الكود:: <style>
#header-banner {
background-image: url(https://i.imgur.com/l7LakYb.jpeg);
background-position: center;
background-repeat: no-repeat;
height: 460px;
position: relative;
width: 100%;}

body.default #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/mtUhlkj.jpeg);
}

body.style1 #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/0C09fBG.jpeg);
}

body.style2 #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/l7LakYb.jpeg);
}

body.style3 #header-banner {
background-color: #172329;
background-image: url(https://i.imgur.com/wZ0T9t5.jpeg);
}
</style>

<div>
<select id="styleSelector">
<option value="default">الافتراضي</option>
<option value="style1">ستايل 1</option>
<option value="style2">ستايل 2</option>
<option value="style3">ستايل 3</option>
</select>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const styleSelector = document.getElementById('styleSelector');

const savedStyle = getCookie('selectedStyle');
if (savedStyle) {
document.body.className = savedStyle;
styleSelector.value = savedStyle;
}

styleSelector.addEventListener('change', function () {
document.body.className = styleSelector.value;
setCookie('selectedStyle', styleSelector.value, 365);
});
});

function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = `expires=${d.toUTCString()}`;
document.cookie = `${name}=${value};${expires};path=/`;
}

function getCookie(name) {
const nameEQ = `${name}=`;
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
</script>

اهلا
اعتذر عالتاخر

غيرت اجزاء من الاكواد

احذف الاكواد السابقه وضع المعدله التاليه

اضف التالي في اي مكان يقبل الهتمل

Spoiler:

الكود:: <div class="controls">

<div class="control-item">
   <label for="bg-color">اختر لون الخلفية: </label> <input value="#ffffff" name="bg-color" id="bg-color" type="color" />
   <button id="reset-bg" class="reset-button">
      الافتراضي
   </button>

</div>

<div class="control-item">
   <label for="secondary-color">اختر اللون الثانوي: </label> <input value="#000000" name="secondary-color" id="secondary-color" type="color" />
   <button id="reset-secondary" class="reset-button">
      الافتراضي
   </button>

</div>

<div class="control-item">
   <label for="text-color">اختر لون النص: </label> <input value="#000000" name="text-color" id="text-color" type="color" />
   <button id="reset-text" class="reset-button">
      الافتراضي
   </button>

</div>

<div class="control-item">
   <label for="font-size">اختر حجم الخط: </label> <input step="1" value="16" max="24" min="12" name="font-size" id="font-size" type="range" /> <span id="font-size-value">16</span>px
   <button id="reset-font" class="reset-button">
      الافتراضي
   </button>

</div>
</div>
<style>
  #header-banner {
   background-image: url(https://i.imgur.com/l7LakYb.jpeg);
   background-position: center;
   background-repeat: no-repeat;
   height: 460px;
   position: relative;
   width: 100%;
  }

  body.default #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/mtUhlkj.jpeg);
  }

  body.style1 #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/0C09fBG.jpeg);
  }

  body.style2 #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/l7LakYb.jpeg);
  }

  body.style3 #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/wZ0T9t5.jpeg);
  }
</style>
<div>
<select id="styleSelector">
   <option value="default">الافتراضي</option>
   <option value="style1">ستايل 1</option>
   <option value="style2">ستايل 2</option>
   <option value="style3">ستايل 3</option>
  </select>
<button id="resetButton">
   عودة إلى الافتراضي
</button>
</div>

جافا
واختر جميع الصفحات

Spoiler:

الكود:: $(function() {
$(function() {
   function loadCookies() {
   const cookies = document.cookie.split('; ');
   cookies.forEach(cookie => {
   const [name, value] = cookie.split('=');
   if (name === 'bg-color') {
   document.getElementById('bg-color').value = value;
   document.documentElement.style.setProperty('--main-bg-color', value);
   }
   if (name === 'secondary-color') {
   document.getElementById('secondary-color').value = value;
   document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
   element.style.backgroundColor = value;
   });
   }
   if (name === 'text-color') {
   document.getElementById('text-color').value = value;
   document.documentElement.style.setProperty('--main-text-color', value);
   }
   if (name === 'font-size') {
   document.getElementById('font-size').value = value;
   document.getElementById('font-size-value').textContent = value;
   document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
   element.style.fontSize = value + 'px';
   });
   }
   });
   }

   loadCookies();

   document.getElementById('bg-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-bg-color', this.value);
   document.cookie = "bg-color=" + this.value + "; path=/; max-age=" + (60*60*24*30);
   });

   document.getElementById('secondary-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-secondary-color', this.value);
   document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
   element.style.backgroundColor = this.value;
   }, this);
   document.cookie = "secondary-color=" + this.value + "; path=/; max-age=" + (60*60*24*30);
   });

   document.getElementById('text-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-text-color', this.value);
   document.cookie = "text-color=" + this.value + "; path=/; max-age=" + (60*60*24*30);
   });

   document.getElementById('font-size').addEventListener('input', function() {
   document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
   element.style.fontSize = this.value + 'px';
   }, this);
   document.getElementById('font-size-value').textContent = this.value;
   document.cookie = "font-size=" + this.value + "; path=/; max-age=" + (60*60*24*30);
   });

   document.getElementById('reset-bg').addEventListener('click', function() {
   resetColor('bg-color', '#ffffff');
   });

   document.getElementById('reset-secondary').addEventListener('click', function() {
   resetColor('secondary-color', '#000000');
   });

   document.getElementById('reset-text').addEventListener('click', function() {
   resetColor('text-color', '#000000');
   });

   document.getElementById('reset-font').addEventListener('click', resetFontSize);

   function resetColor(id, defaultValue) {
   document.getElementById(id).value = defaultValue;
   document.documentElement.style.setProperty(`--main-${id.replace('-', '_')}`, defaultValue);
   if (id === 'bg-color') {
   document.documentElement.style.setProperty('--main-bg-color', '#ffffff');
   } else if (id === 'text-color') {
   document.documentElement.style.setProperty('--main-text-color', '#000000');
   } else if (id === 'secondary-color') {
   document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
   element.style.backgroundColor = defaultValue;
   });
   }
   document.cookie = `${id}=; path=/; max-age=0`;
   }

   function resetFontSize() {
   document.getElementById('font-size').value = 16;
   document.getElementById('font-size-value').textContent = 16;
   document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
   element.style.fontSize = '16px';
   });
   document.cookie = "font-size=; path=/; max-age=0";
   }
});});


$(function() {
  const styleSelector = $('#styleSelector');
  const resetButton = $('#resetButton');
  const savedStyle = getCookie('selectedStyle') || 'default';

  $('body').addClass(savedStyle);
  styleSelector.val(savedStyle);

  // عند تغيير الخيار
  styleSelector.change(function() {
   $('body').removeClass().addClass(styleSelector.val());
   setCookie('selectedStyle', styleSelector.val(), 365);
  });

  resetButton.click(function() {
   $('body').removeClass().addClass('default');
   styleSelector.val('default');
   setCookie('selectedStyle', 'default', 365);
  });

  function setCookie(name, value, days) {
   const d = new Date();
   d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
   const expires = `expires=${d.toUTCString()}`;
   document.cookie = `${name}=${value};${expires};path=/`;
  }

  function getCookie(name) {
   const nameEQ = `${name}=`;
   const ca = document.cookie.split(';');
   for (let i = 0; i < ca.length; i++) {
   let c = ca[i];
   while (c.charAt(0) === ' ') c = c.substring(1, c.length);
   if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
   }
   return null;
  }
});

كونان2000 كتب:

اهلا
اعتذر عالتاخر

غيرت اجزاء من الاكواد

احذف الاكواد السابقه وضع المعدله التاليه

اضف التالي في اي مكان يقبل الهتمل

Spoiler:

الكود:: <div class="controls">

<div class="control-item">
   <label for="bg-color">اختر لون الخلفية: </label> <input value="#ffffff" name="bg-color" id="bg-color" type="color" />
   <button id="reset-bg" class="reset-button">
      الافتراضي
   </button>

</div>

<div class="control-item">
   <label for="secondary-color">اختر اللون الثانوي: </label> <input value="#000000" name="secondary-color" id="secondary-color" type="color" />
   <button id="reset-secondary" class="reset-button">
      الافتراضي
   </button>

</div>

<div class="control-item">
   <label for="text-color">اختر لون النص: </label> <input value="#000000" name="text-color" id="text-color" type="color" />
   <button id="reset-text" class="reset-button">
      الافتراضي
   </button>

</div>

<div class="control-item">
   <label for="font-size">اختر حجم الخط: </label> <input step="1" value="16" max="24" min="12" name="font-size" id="font-size" type="range" /> <span id="font-size-value">16</span>px
   <button id="reset-font" class="reset-button">
      الافتراضي
   </button>

</div>
</div>
<style>
  #header-banner {
   background-image: url(https://i.imgur.com/l7LakYb.jpeg);
   background-position: center;
   background-repeat: no-repeat;
   height: 460px;
   position: relative;
   width: 100%;
  }

  body.default #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/mtUhlkj.jpeg);
  }

  body.style1 #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/0C09fBG.jpeg);
  }

  body.style2 #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/l7LakYb.jpeg);
  }

  body.style3 #header-banner {
   background-color: #172329;
   background-image: url(https://i.imgur.com/wZ0T9t5.jpeg);
  }
</style>
<div>
<select id="styleSelector">
   <option value="default">الافتراضي</option>
   <option value="style1">ستايل 1</option>
   <option value="style2">ستايل 2</option>
   <option value="style3">ستايل 3</option>
  </select>
<button id="resetButton">
   عودة إلى الافتراضي
</button>
</div>

جافا
واختر جميع الصفحات

Spoiler:

الكود:: $(function() {
$(function() {
   function loadCookies() {
   const cookies = document.cookie.split('; ');
   cookies.forEach(cookie => {
   const [name, value] = cookie.split('=');
   if (name === 'bg-color') {
   document.getElementById('bg-color').value = value;
   document.documentElement.style.setProperty('--main-bg-color', value);
   }
   if (name === 'secondary-color') {
   document.getElementById('secondary-color').value = value;
   document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
   element.style.backgroundColor = value;
   });
   }
   if (name === 'text-color') {
   document.getElementById('text-color').value = value;
   document.documentElement.style.setProperty('--main-text-color', value);
   }
   if (name === 'font-size') {
   document.getElementById('font-size').value = value;
   document.getElementById('font-size-value').textContent = value;
   document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
   element.style.fontSize = value + 'px';
   });
   }
   });
   }

   loadCookies();

   document.getElementById('bg-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-bg-color', this.value);
   document.cookie = "bg-color=" + this.value + "; path=/; max-age=" + (60*60*24*30);
   });

   document.getElementById('secondary-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-secondary-color', this.value);
   document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
   element.style.backgroundColor = this.value;
   }, this);
   document.cookie = "secondary-color=" + this.value + "; path=/; max-age=" + (60*60*24*30);
   });

   document.getElementById('text-color').addEventListener('input', function() {
   document.documentElement.style.setProperty('--main-text-color', this.value);
   document.cookie = "text-color=" + this.value + "; path=/; max-age=" + (60*60*24*30);
   });

   document.getElementById('font-size').addEventListener('input', function() {
   document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
   element.style.fontSize = this.value + 'px';
   }, this);
   document.getElementById('font-size-value').textContent = this.value;
   document.cookie = "font-size=" + this.value + "; path=/; max-age=" + (60*60*24*30);
   });

   document.getElementById('reset-bg').addEventListener('click', function() {
   resetColor('bg-color', '#ffffff');
   });

   document.getElementById('reset-secondary').addEventListener('click', function() {
   resetColor('secondary-color', '#000000');
   });

   document.getElementById('reset-text').addEventListener('click', function() {
   resetColor('text-color', '#000000');
   });

   document.getElementById('reset-font').addEventListener('click', resetFontSize);

   function resetColor(id, defaultValue) {
   document.getElementById(id).value = defaultValue;
   document.documentElement.style.setProperty(`--main-${id.replace('-', '_')}`, defaultValue);
   if (id === 'bg-color') {
   document.documentElement.style.setProperty('--main-bg-color', '#ffffff');
   } else if (id === 'text-color') {
   document.documentElement.style.setProperty('--main-text-color', '#000000');
   } else if (id === 'secondary-color') {
   document.querySelectorAll('.tcat, .btn-fixedfooter-to-top, .ablock-header, .select-wrap input, .jumpbox-wrap input, .quickmod-wrap input, .rep-cat.btn-default, .mainoption, .button, .button1, .button2, .liteoption, header .button, .select-wrap input.btn, .jumpbox-wrap input.btn, .quickmod-wrap input.btn, .select + input[type="submit"], .quickmod-wrap input.btn, .forum-header, .posts-header, .action-bar').forEach(function(element) {
   element.style.backgroundColor = defaultValue;
   });
   }
   document.cookie = `${id}=; path=/; max-age=0`;
   }

   function resetFontSize() {
   document.getElementById('font-size').value = 16;
   document.getElementById('font-size-value').textContent = 16;
   document.querySelectorAll('#wrap, #simple-wrap, .post-content').forEach(function(element) {
   element.style.fontSize = '16px';
   });
   document.cookie = "font-size=; path=/; max-age=0";
   }
});});


$(function() {
  const styleSelector = $('#styleSelector');
  const resetButton = $('#resetButton');
  const savedStyle = getCookie('selectedStyle') || 'default';

  $('body').addClass(savedStyle);
  styleSelector.val(savedStyle);

  // عند تغيير الخيار
  styleSelector.change(function() {
   $('body').removeClass().addClass(styleSelector.val());
   setCookie('selectedStyle', styleSelector.val(), 365);
  });

  resetButton.click(function() {
   $('body').removeClass().addClass('default');
   styleSelector.val('default');
   setCookie('selectedStyle', 'default', 365);
  });

  function setCookie(name, value, days) {
   const d = new Date();
   d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
   const expires = `expires=${d.toUTCString()}`;
   document.cookie = `${name}=${value};${expires};path=/`;
  }

  function getCookie(name) {
   const nameEQ = `${name}=`;
   const ca = document.cookie.split(';');
   for (let i = 0; i < ca.length; i++) {
   let c = ca[i];
   while (c.charAt(0) === ' ') c = c.substring(1, c.length);
   if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
   }
   return null;
  }
});

ولايهمك اخوي كونان شكرا لك الكود اشتغل 100% بس ممكن تخلي حجم الواجهة تظهر بالابعاد الحقيقية لانها تظهر مكبرة

اهلا
لتعديل ابعاد الواجهة
اضف التالي الى الcss

الكود:: div#header-banner {
background-size: 100% 100% !important;
}

وغير الارقام كما تريد

كونان2000 كتب:

اهلا
لتعديل ابعاد الواجهة
اضف التالي الى الcss

الكود:: div#header-banner {
background-size: 100% 100% !important;
}

وغير الارقام كما تريد

شكرا اخوي ماقصرت
سؤال ثاني متعلق بكود الكوكيز ليش المتواجدون الان ماتحفظ اختيار العضو من تقليص للمحتوى الخاص بالمتواجدون الآن؟

هذا كود جافا في المتواجدين

الكود:: <script>
document.addEventListener('DOMContentLoaded', function () {
const collapseToggle = document.querySelector('.collapse-toggle');
const content = document.querySelector('.content');

collapseToggle.addEventListener('click', function () {
if (content.style.display === "none") {
content.style.display = "block";
collapseToggle.innerHTML = '<i class="material-icons">expand_less</i>';
} else {
content.style.display = "none";
collapseToggle.innerHTML = '<i class="material-icons">expand_more</i>';
}
});
});
</script>

وهذا كود المتواجدين الآن

الكود:: <div id="block-online" class="block-subtle modern-card">
<div class="collapse-toggle">
<i class="material-icons">expand_more</i>
</div>
<div class="headline-container">