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

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

الكود:



  <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>

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

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

تم اضافة الكوكيز باستخدام ال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>

اهلا اخي كونان الكود لم يعد يعمل

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

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

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

الكود:

(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:

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

Spoiler:

كونان2000 كتب:اهلا
اعتذر عالتاخر

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

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

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

Spoiler:

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

Spoiler:

ولايهمك اخوي كونان شكرا لك الكود اشتغل 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">

المبدع الخبير كتب:

كونان2000 كتب:اهلا
لتعديل ابعاد الواجهة
اضف التالي الى الcss

الكود:

div#header-banner {
    background-size: 100% 100% !important;
}

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

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

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

اقترح انك تفحت موضوع جديد تشرح به مشكلة المتواجدون الان
حتى لا يحصل ارتباك

كونان2000 كتب:

المبدع الخبير كتب:

كونان2000 كتب:اهلا
لتعديل ابعاد الواجهة
اضف التالي الى الcss

الكود:

div#header-banner {
    background-size: 100% 100% !important;
}

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

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

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

اقترح انك تفحت موضوع جديد تشرح به مشكلة المتواجدون الان
حتى لا يحصل ارتباك

تمام اخوي جزاك الله كل خير وبنى لك قصراً في الجنة

العفو اخي المبدع    
امين واياك والمسلمين يارب

تم حل المشكلة & ينقل للأرشيف. يرجى مراجعة : قوانين منتدى الدعم