*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Rubik',sans-serif;background:transparent;direction:rtl;}
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700;800&display=swap');
/* Carousel */
#carousel-wrap{position:relative;width:100%;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#eee;}
#carousel-wrap a{display:block;width:100%;height:100%;}
.slide{position:absolute;inset:0;transition:opacity .45s,transform .45s;opacity:0;transform:translateX(-30px);}
.slide.active{opacity:1;transform:translateX(0);}
.slide img{width:100%;height:100%;object-fit:cover;}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.1) 60%,transparent 100%);}
.slide-text{position:absolute;bottom:0;right:0;left:0;padding:20px;color:#fff;}
.slide-text h3{font-size:1.15rem;font-weight:800;margin-bottom:4px;}
.slide-text p{font-size:.82rem;opacity:.85;margin-bottom:12px;}
.slide-btn{display:inline-flex;align-items:center;gap:6px;background:#e03a50;color:#fff;padding:8px 18px;border-radius:50px;font-size:.82rem;font-weight:700;text-decoration:none;}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.25);backdrop-filter:blur(6px);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;}
#arr-prev{right:8px;} #arr-next{left:8px;}
.dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:10;}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;padding:0;}
.dot.active{width:22px;border-radius:4px;background:#fff;}
/* Grid */
#grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.tile{border-radius:16px;padding:14px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;transition:transform .15s,opacity .15s;position:relative;overflow:hidden;}
.tile:active{transform:scale(.95);opacity:.85;}
.tile.span2{grid-column:span 2;}
.tile-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.tile-label{font-size:.85rem;font-weight:700;line-height:1.3;}
.tile-circle{position:absolute;bottom:-16px;left:-16px;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.15);}
const APP_ID = "69bb0bdb36646b09664df947";
const DEFAULT_SLIDES = [{"id":1,"image":"https://media.base44.com/images/public/69bb0bdb36646b09664df947/502ed08be_generated_34b0087d.png","title":"רובוט מגניב","subtitle":"המשחק החם של פסח!","link":"https://example.com/coupons"},{"id":2,"image":"https://media.base44.com/images/public/69bb0bdb36646b09664df947/14743d87b_generated_e0997ce6.png","title":"דובי ומשחקי בנייה","subtitle":"הנחה מיוחדת למנויים","link":"https://example.com/coupons"},{"id":3,"image":"https://media.base44.com/images/public/69bb0bdb36646b09664df947/703716bed_generated_2d0f764b.png","title":"משחקי קופסא","subtitle":"כיף לכל המשפחה","link":"https://example.com/coupons"},{"id":4,"image":"https://media.base44.com/images/public/69bb0bdb36646b09664df947/96ed0be2e_generated_f48eecc9.png","title":"מכוניות ודמויות","subtitle":"קולקציה חדשה!","link":"https://example.com/coupons"}];
const DEFAULT_TILES = [{"id":1,"label":"קטלוג פסח 2026","href":"https://example.com/catalog-pesach-2026"},{"id":2,"label":"הקופונים שלי","href":"https://example.com/coupons"},{"id":3,"label":"איתור סניפים","href":"https://example.com/branches"},{"id":4,"label":"אזור אישי","href":"https://example.com/profile"},{"id":5,"label":"שירות לקוחות","href":"https://example.com/support"},{"id":6,"label":"הפייסבוק שלנו","href":"https://www.facebook.com/idan2000toys"}];
const TILE_COLORS = [{"bg":"#0057a3","color":"#fff"},{"bg":"#e03a50","color":"#fff"},{"bg":"#ffc700","color":"#1a1a2e"},{"bg":"#fff","color":"#1a1a2e","border":"1px solid #e5e7eb"},{"bg":"#fff","color":"#1a1a2e","border":"1px solid #e5e7eb"},{"bg":"#1877F2","color":"#fff"}];
const TILE_ICONS_SVG = [
'',
'',
'',
'',
'',
'',
];
let slides = DEFAULT_SLIDES;
let tiles = DEFAULT_TILES;
let current = 0;
let timer;
async function fetchConfig(key, def) {
try {
const r = await fetch(`/api/entities/SiteConfig?filter=${encodeURIComponent(JSON.stringify({key}))}`, {
headers: { 'X-App-Id': APP_ID }
});
if (!r.ok) return def;
const data = await r.json();
if (data && data.length > 0 && data[0].value) return data[0].value;
} catch(e) {}
return def;
}
function renderCarousel() {
const container = document.getElementById('slides-container');
const dotsEl = document.getElementById('dots');
container.innerHTML = '';
dotsEl.innerHTML = '';
slides.forEach((s, i) => {
const div = document.createElement('div');
div.className = 'slide' + (i === 0 ? ' active' : '');
div.innerHTML = `
`;
container.appendChild(div);
const dot = document.createElement('button');
dot.className = 'dot' + (i === 0 ? ' active' : '');
dot.onclick = () => goTo(i);
dotsEl.appendChild(dot);
});
updateSlideLink();
startTimer();
}
function updateSlideLink() {
document.getElementById('slide-link').href = slides[current]?.link || '#';
}
function goTo(n) {
const allSlides = document.querySelectorAll('.slide');
const allDots = document.querySelectorAll('.dot');
allSlides[current]?.classList.remove('active');
allDots[current]?.classList.remove('active');
current = (n + slides.length) % slides.length;
allSlides[current]?.classList.add('active');
allDots[current]?.classList.add('active');
updateSlideLink();
}
function changeSlide(dir) { clearInterval(timer); goTo(current + dir); startTimer(); }
function startTimer() { clearInterval(timer); timer = setInterval(() => goTo(current + 1), 4500); }
function renderGrid() {
const grid = document.getElementById('grid');
grid.innerHTML = '';
tiles.forEach((tile, i) => {
const c = TILE_COLORS[i] || TILE_COLORS[3];
const icon = TILE_ICONS_SVG[i] || TILE_ICONS_SVG[1];
const isWide = (i === 0 || i === 5);
const a = document.createElement('a');
a.href = tile.href;
a.className = 'tile' + (isWide ? ' span2' : '');
a.style.cssText = `background:${c.bg};color:${c.color};${c.border ? 'border:'+c.border : ''}`;
a.innerHTML = `${tile.label}`;
grid.appendChild(a);
});
}
async function init() {
slides = await fetchConfig('slides', DEFAULT_SLIDES);
tiles = await fetchConfig('tiles', DEFAULT_TILES);
renderCarousel();
renderGrid();
}
init();