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

الكود:



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

كونان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>

كونان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>

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

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

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

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

Spoiler:

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

Spoiler:

كونان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 كتب:

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

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

الكود:

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

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

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

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

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