Магазин

Система личной страницы

— название форума champagne
— тематика / локация форума - реал-лайф; Англия + Ирландия

— дизайн тест
— дизайн основа
— банковская система основа + магазин
— банковская система тест
— правила + фак
— твинки и чьи они (система учета) для амс
— оформление анкет - иваня шаблоны (на доработку)
— оформление тем нужные и ко - иваня шаблоны (на доработку)
— оформление для новостей
— оформление гостевой
— оформление банка / магазина
— конкурсы (кп 30 дней) - иваня, но если будут идеи - накидывайте
— придумать плюшки для профиля
— вступительные взносы (стартерпак) + система адаптации (дейка)
— структура (скелет) форума (ну вот все эти разделы с гостевой, организацией и пр.) + названия к ним (для теста и основы)
*категории на английском, названия подфорумов на русском. описания к ним можно на английском, можно на русском лето
— смайлы / стикосы для общения (дейка)
— оформление рекламы для теста
— оформление рекламы для основы
— орг аватары для теста
— орг аватары для основы
— оформление первых соо
— личная страница
— текст для гостевой тест + основа лето
— шаблоны для нужников, анкеты и ко - иваня шаблоны (на доработку)
— путеводитель по странам и универам (матчасть по городу можно сделать типа «запрос в гугл: где я?»)
— акция "братство Тринити" (?)
— шаблон эпизода на основу - иваня шаблоны (на доработку)
— занятость + учет персонажей по городам и странам
— краткое описание ко всем темам - лето
— шаблон личного звания на основу - иваня шаблоны (на доработку)
— социальная сеть
— шаблон принятия
— графика для магазина - иваня
— список достижений
— оформление достижений
— зарегать топ
— внести в банк пункт про "это интересно"

[html]<!-- включено по умолчанию -->
<div id="nota-lottery" class="nota-lottery" data-used="1, 5, 6, 7, 8, 11, 10, 13, 16, 18, 21, 25, 26, 30, 38, 41, 49"></div>
<script>
(() => {
  const ROOT_ID = 'nota-lottery';
  const root = document.getElementById(ROOT_ID);
  if (!root) return;

  // ==== �� Настройки (меняй под себя) ====
  const TICKET_COUNT = 75;     // общее количество билетов
  const COLUMNS = 15;          // количество колонок в ряду
  const GRID_WIDTH = '970px';  // ЖЁСТКАЯ ширина сетки (пример: '900px', '100%', 'min(100%, 920px)')

  // Полные URL изображений (можно указывать с любых хостингов)
  const variantImages = [
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif'
  ];
  const usedImage = 'https://notafiles.ru/images/lottery/x.gif';

  const T = { gridCls:'nl-grid', ticketCls:'nl-ticket', numCls:'nl-num', usedCls:'used' };

  // ==== Стили ====
  (function injectStyles(){
    if (document.getElementById('nl-core-styles')) return;
    const css = `
      #${ROOT_ID}.{grid}{
        display:grid;
        grid-template-columns:repeat(${COLUMNS},minmax(0,1fr));
        gap:8px;
        width:100%;
        max-width:${GRID_WIDTH};
      }
      #${ROOT_ID} .${T.ticketCls}{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:4px;
      }
      #${ROOT_ID} .${T.ticketCls} img{
        width:100%;
        height:auto;
        display:block;
        user-select:none;
        -webkit-user-drag:none;
        opacity:0.7;
      }
      #${ROOT_ID} .${T.numCls}{
        display:block;
        font-size:12px;
        line-height:1;
        text-align:center;
      }
      #${ROOT_ID} .${T.ticketCls}.${T.usedCls} img{
        filter:grayscale(100%);
        opacity:.5;
      }
    `.replace('{grid}', T.gridCls);
    const st = document.createElement('style');
    st.id = 'nl-core-styles';
    st.textContent = css;
    document.head.appendChild(st);
  })();

  // ==== Утилиты ====
  const parseUsed = (str) => new Set(
    (str||'').split(/[,\s]+/).map(s=>s.trim()).filter(Boolean)
      .map(x=>parseInt(x,10)).filter(n=>Number.isInteger(n)&&n>=1&&n<=TICKET_COUNT)
  );
  const serializeUsed = (set) => Array.from(set).sort((a,b)=>a-b).join(', ');

  // Детерминированный выбор варианта по номеру
  const pickVariantIndex = (n) => {
    const len = Math.max(variantImages.length, 1);
    let x = (n * 9301 + 49297) % 233280;
    return x % len;
  };

  // ==== Построение ====
  root.classList.add(T.gridCls);
  const build = () => {
    root.innerHTML = '';
    const usedSet = parseUsed(root.getAttribute('data-used')||'');
    const frag = document.createDocumentFragment();
    for (let i = 1; i <= TICKET_COUNT; i++){
      const wrap = document.createElement('div');
      wrap.className = T.ticketCls;
      wrap.dataset.id = String(i);

      const img = document.createElement('img');
      if (usedSet.has(i)){
        img.src = usedImage;
        wrap.classList.add(T.usedCls);
      } else {
        img.src = variantImages[pickVariantIndex(i)];
      }
      img.alt = `#${i}`;

      const num = document.createElement('span');
      num.className = T.numCls;
      num.textContent = `#${i}`;

      wrap.appendChild(img);
      wrap.appendChild(num);
      frag.appendChild(wrap);
    }
    root.appendChild(frag);
  };
  build();

  // ==== API ====
  const API = {
    getUsed: ()=>Array.from(parseUsed(root.getAttribute('data-used')||'')).sort((a,b)=>a-b),
    setUsed: (val)=>{
      let set;
      if (val instanceof Set) set=val;
      else if (Array.isArray(val)) set=new Set(val.map(n=>parseInt(n,10)));
      else set=parseUsed(String(val||''));

      root.setAttribute('data-used', serializeUsed(set));
      root.querySelectorAll('.'+T.ticketCls).forEach(div=>{
        const id=parseInt(div.dataset.id,10);
        const img=div.querySelector('img');
        if(!img) return;
        if(set.has(id)){ div.classList.add(T.usedCls); img.src = usedImage; }
        else{ div.classList.remove(T.usedCls); img.src = variantImages[pickVariantIndex(id)]; }
      });
      return set;
    },
    toggle:(id)=>{
      const set=new Set(API.getUsed());
      id=parseInt(id,10);
      if(!Number.isInteger(id)||id<1||id>TICKET_COUNT) return set;
      if(set.has(id)) set.delete(id); else set.add(id);
      return API.setUsed(set);
    },
    serialize:()=>serializeUsed(new Set(API.getUsed()))
  };
  window.NL = API;
})();
</script>[/html]

<!-- включено по умолчанию -->
<div id="nota-lottery" class="nota-lottery" data-used="1, 5, 6, 7, 8, 11, 10, 13, 16, 18, 21, 25, 26, 30, 38, 41, 49"></div>
<script>
(() => {
  const ROOT_ID = 'nota-lottery';
  const root = document.getElementById(ROOT_ID);
  if (!root) return;

  // ==== �� Настройки (меняй под себя) ====
  const TICKET_COUNT = 75;     // общее количество билетов
  const COLUMNS = 15;          // количество колонок в ряду
  const GRID_WIDTH = '970px';  // ЖЁСТКАЯ ширина сетки (пример: '900px', '100%', 'min(100%, 920px)')

  // Полные URL изображений (можно указывать с любых хостингов)
  const variantImages = [
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif'
  ];
  const usedImage = 'https://notafiles.ru/images/lottery/x.gif';

  const T = { gridCls:'nl-grid', ticketCls:'nl-ticket', numCls:'nl-num', usedCls:'used' };

  // ==== Стили ====
  (function injectStyles(){
    if (document.getElementById('nl-core-styles')) return;
    const css = `
      #${ROOT_ID}.{grid}{
        display:grid;
        grid-template-columns:repeat(${COLUMNS},minmax(0,1fr));
        gap:8px;
        width:100%;
        max-width:${GRID_WIDTH};
      }
      #${ROOT_ID} .${T.ticketCls}{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:4px;
      }
      #${ROOT_ID} .${T.ticketCls} img{
        width:100%;
        height:auto;
        display:block;
        user-select:none;
        -webkit-user-drag:none;
        opacity:0.7;
      }
      #${ROOT_ID} .${T.numCls}{
        display:block;
        font-size:12px;
        line-height:1;
        text-align:center;
      }
      #${ROOT_ID} .${T.ticketCls}.${T.usedCls} img{
        filter:grayscale(100%);
        opacity:.5;
      }
    `.replace('{grid}', T.gridCls);
    const st = document.createElement('style');
    st.id = 'nl-core-styles';
    st.textContent = css;
    document.head.appendChild(st);
  })();

  // ==== Утилиты ====
  const parseUsed = (str) => new Set(
    (str||'').split(/[,\s]+/).map(s=>s.trim()).filter(Boolean)
      .map(x=>parseInt(x,10)).filter(n=>Number.isInteger(n)&&n>=1&&n<=TICKET_COUNT)
  );
  const serializeUsed = (set) => Array.from(set).sort((a,b)=>a-b).join(', ');

  // Детерминированный выбор варианта по номеру
  const pickVariantIndex = (n) => {
    const len = Math.max(variantImages.length, 1);
    let x = (n * 9301 + 49297) % 233280;
    return x % len;
  };

  // ==== Построение ====
  root.classList.add(T.gridCls);
  const build = () => {
    root.innerHTML = '';
    const usedSet = parseUsed(root.getAttribute('data-used')||'');
    const frag = document.createDocumentFragment();
    for (let i = 1; i <= TICKET_COUNT; i++){
      const wrap = document.createElement('div');
      wrap.className = T.ticketCls;
      wrap.dataset.id = String(i);

      const img = document.createElement('img');
      if (usedSet.has(i)){
        img.src = usedImage;
        wrap.classList.add(T.usedCls);
      } else {
        img.src = variantImages[pickVariantIndex(i)];
      }
      img.alt = `#${i}`;

      const num = document.createElement('span');
      num.className = T.numCls;
      num.textContent = `#${i}`;

      wrap.appendChild(img);
      wrap.appendChild(num);
      frag.appendChild(wrap);
    }
    root.appendChild(frag);
  };
  build();

  // ==== API ====
  const API = {
    getUsed: ()=>Array.from(parseUsed(root.getAttribute('data-used')||'')).sort((a,b)=>a-b),
    setUsed: (val)=>{
      let set;
      if (val instanceof Set) set=val;
      else if (Array.isArray(val)) set=new Set(val.map(n=>parseInt(n,10)));
      else set=parseUsed(String(val||''));

      root.setAttribute('data-used', serializeUsed(set));
      root.querySelectorAll('.'+T.ticketCls).forEach(div=>{
        const id=parseInt(div.dataset.id,10);
        const img=div.querySelector('img');
        if(!img) return;
        if(set.has(id)){ div.classList.add(T.usedCls); img.src = usedImage; }
        else{ div.classList.remove(T.usedCls); img.src = variantImages[pickVariantIndex(id)]; }
      });
      return set;
    },
    toggle:(id)=>{
      const set=new Set(API.getUsed());
      id=parseInt(id,10);
      if(!Number.isInteger(id)||id<1||id>TICKET_COUNT) return set;
      if(set.has(id)) set.delete(id); else set.add(id);
      return API.setUsed(set);
    },
    serialize:()=>serializeUsed(new Set(API.getUsed()))
  };
  window.NL = API;
})();
</script>

» основные фичи:
нет страданий с таблицей, использованные билеты просто вставляем в строку через запятую:
data-used="1, 5, 6, 7, 8, 11, 10, 13, 16, 18, 21, 25, 26, 30, 38, 41, 49">
остальные настройки также в шапке скрипта для удобства:
  // ==== �� Настройки (меняй под себя) ====
  const TICKET_COUNT = 75;     // общее количество билетов
  const COLUMNS = 15;          // количество колонок в ряду
  const GRID_WIDTH = '970px';  // ЖЁСТКАЯ ширина сетки (пример: '900px', '100%', 'min(100%, 920px)')

» Полные URL изображений (можно указывать с любых хостингов и сколько угодно изображений)
  const variantImages = [
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif',
    'https://notafiles.ru/images/lottery/1.gif'
  ];

» сюда подставляем заюзанный билетик
  const usedImage = 'https://notafiles.ru/images/lottery/x.gif';

Вставляем в теги хтмл и пользуемся❤️