✏️ עריכת 20260703_153011_japan-experience.html

C:\TripServer\backups\uploaded_files\JAPAN_presentation_music_sync\20260703_153011_japan-experience.html

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>חוויית יפן קולנועית</title>

@keyframes fxFinalFade{
  0%{opacity:1;transform:scale(1.015) translate3d(0,0,0)}
  72%{opacity:1;transform:scale(1.075) translate3d(-.5%,.1%,0)}
  100%{opacity:.12;transform:scale(1.095) translate3d(-.8%,.2%,0)}
}
#photo.fx-final-fade{animation:fxFinalFade var(--slide-duration,9600ms) ease-in-out forwards!important}

</style>

<style>

.top button,
.top-finish,
.finish,
.controls button{
  min-height:48px !important;
  min-width:48px !important;
  padding:10px 14px !important;
  font-size:16px !important;
}
@media(max-width:700px){
  .top{gap:8px!important}
  .controls{gap:7px!important}
  .top button,.top-finish,.finish,.controls button{
    min-height:46px!important;
    min-width:46px!important;
    padding:9px 12px!important;
    font-size:15px!important;
  }
  .pill{font-size:14px!important;padding:9px 12px!important}
}
</style>

<style>

#photo{
  transition: opacity 950ms ease, transform 950ms ease !important;
  will-change: transform, opacity;
}
#photo.show{animation:none!important}
#photo.fx-city-zoom{animation:fxCityZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-night-drift{animation:fxNightDrift var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-pop-zoom{animation:fxPopZoom var(--slide-duration,3900ms) cubic-bezier(.2,.7,.2,1) forwards!important}
#photo.fx-slow-zoom{animation:fxSlowZoom var(--slide-duration,5000ms) ease-in-out forwards!important}
#photo.fx-epic-zoom{animation:fxEpicZoom var(--slide-duration,5600ms) ease-in-out forwards!important}
#photo.fx-soft-pan{animation:fxSoftPan var(--slide-duration,4300ms) ease-in-out forwards!important}
#photo.fx-gentle-pan{animation:fxGentlePan var(--slide-duration,4100ms) ease-in-out forwards!important}
#photo.fx-night-zoom{animation:fxNightZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-park-zoom{animation:fxParkZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-hero-zoom{animation:fxHeroZoom var(--slide-duration,5200ms) ease-in-out forwards!important}
#photo.fx-gate-pan{animation:fxGatePan var(--slide-duration,5200ms) ease-in-out forwards!important}
#photo.fx-top-reveal{animation:fxTopReveal var(--slide-duration,5200ms) ease-in-out forwards!important}
.chapter-card{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  text-align:center;background:
  radial-gradient(circle at 50% 38%,rgba(56,189,248,.22),transparent 24rem),
  linear-gradient(145deg,#020617,#111827 54%,#312e81);
  z-index:2;
}
.chapter-card .chapter-title{
  font-size:clamp(42px,9vw,104px);font-weight:950;line-height:1.05;
  text-shadow:0 12px 36px rgba(0,0,0,.55),0 0 28px rgba(56,189,248,.45);
}
.chapter-card .chapter-sub{
  margin-top:16px;font-size:clamp(18px,4vw,36px);font-weight:950;color:#fde68a;
  text-shadow:0 8px 26px rgba(0,0,0,.50);
}
.caption{transition:opacity .45s ease, transform .45s ease}
.caption.hide-caption{opacity:0;transform:translateY(8px)}
@keyframes fxCityZoom{from{transform:scale(1.01) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-.8%,.2%,0)}}
@keyframes fxNightDrift{from{transform:scale(1.015) translate3d(.8%,0,0)}to{transform:scale(1.065) translate3d(-1.2%,.3%,0)}}
@keyframes fxPopZoom{0%{transform:scale(1.00)}45%{transform:scale(1.045)}100%{transform:scale(1.065)}}
@keyframes fxSlowZoom{from{transform:scale(1.00)}to{transform:scale(1.055)}}
@keyframes fxEpicZoom{from{transform:scale(1.00) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(0,-.5%,0)}}
@keyframes fxSoftPan{from{transform:scale(1.025) translate3d(-1%,0,0)}to{transform:scale(1.055) translate3d(1%,0,0)}}
@keyframes fxGentlePan{from{transform:scale(1.02) translate3d(.8%,0,0)}to{transform:scale(1.045) translate3d(-.8%,0,0)}}
@keyframes fxNightZoom{from{transform:scale(1.01)}to{transform:scale(1.06)}}
@keyframes fxParkZoom{from{transform:scale(1.00)}to{transform:scale(1.07)}}
@keyframes fxHeroZoom{from{transform:scale(1.00)}to{transform:scale(1.085)}}
@keyframes fxGatePan{from{transform:scale(1.03) translate3d(-.8%,0,0)}to{transform:scale(1.06) translate3d(.8%,0,0)}}
@keyframes fxTopReveal{from{transform:scale(1.00) translate3d(0,0,0)}to{transform:scale(1.035) translate3d(0,.4%,0)}}
@media(max-width:700px){
  .chapter-card .chapter-title{font-size:clamp(36px,11vw,70px)}
  .chapter-card .chapter-sub{font-size:clamp(16px,5vw,25px);padding:0 18px}
}
</style>

<style>

#photo{transition:opacity 950ms ease,transform 950ms ease!important;will-change:transform,opacity}
#photo.show{animation:none!important}
#photo.fx-city-zoom{animation:fxCityZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-night-drift{animation:fxNightDrift var(--slide-duration,4300ms) ease-in-out forwards!important}
#photo.fx-pop-zoom{animation:fxPopZoom var(--slide-duration,3900ms) cubic-bezier(.2,.7,.2,1) forwards!important}
#photo.fx-slow-zoom{animation:fxSlowZoom var(--slide-duration,5000ms) ease-in-out forwards!important}
#photo.fx-epic-zoom{animation:fxEpicZoom var(--slide-duration,5600ms) ease-in-out forwards!important}
#photo.fx-soft-pan{animation:fxSoftPan var(--slide-duration,4300ms) ease-in-out forwards!important}
#photo.fx-gentle-pan{animation:fxGentlePan var(--slide-duration,4100ms) ease-in-out forwards!important}
#photo.fx-night-zoom{animation:fxNightZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-park-zoom{animation:fxParkZoom var(--slide-duration,4200ms) ease-in-out forwards!important}
#photo.fx-hero-zoom{animation:fxHeroZoom var(--slide-duration,5200ms) ease-in-out forwards!important}
#photo.fx-gate-pan{animation:fxGatePan var(--slide-duration,5200ms) ease-in-out forwards!important}
#photo.fx-top-reveal{animation:fxTopReveal var(--slide-duration,5200ms) ease-in-out forwards!important}
.chapter-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(circle at 50% 38%,rgba(56,189,248,.22),transparent 24rem),linear-gradient(145deg,#020617,#111827 54%,#312e81);z-index:2}
.chapter-card .chapter-title{font-size:clamp(42px,9vw,104px);font-weight:950;line-height:1.05;text-shadow:0 12px 36px rgba(0,0,0,.55),0 0 28px rgba(56,189,248,.45)}
.chapter-card .chapter-sub{margin-top:16px;font-size:clamp(18px,4vw,36px);font-weight:950;color:#fde68a;text-shadow:0 8px 26px rgba(0,0,0,.50)}
@keyframes fxCityZoom{from{transform:scale(1.01) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-.8%,.2%,0)}}
@keyframes fxNightDrift{from{transform:scale(1.015) translate3d(.8%,0,0)}to{transform:scale(1.065) translate3d(-1.2%,.3%,0)}}
@keyframes fxPopZoom{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1.065)}}
@keyframes fxSlowZoom{from{transform:scale(1)}to{transform:scale(1.055)}}
@keyframes fxEpicZoom{from{transform:scale(1)}to{transform:scale(1.075) translate3d(0,-.5%,0)}}
@keyframes fxSoftPan{from{transform:scale(1.025) translate3d(-1%,0,0)}to{transform:scale(1.055) translate3d(1%,0,0)}}
@keyframes fxGentlePan{from{transform:scale(1.02) translate3d(.8%,0,0)}to{transform:scale(1.045) translate3d(-.8%,0,0)}}
@keyframes fxNightZoom{from{transform:scale(1.01)}to{transform:scale(1.06)}}
@keyframes fxParkZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes fxHeroZoom{from{transform:scale(1)}to{transform:scale(1.085)}}
@keyframes fxGatePan{from{transform:scale(1.03) translate3d(-.8%,0,0)}to{transform:scale(1.06) translate3d(.8%,0,0)}}
@keyframes fxTopReveal{from{transform:scale(1)}to{transform:scale(1.035) translate3d(0,.4%,0)}}
.top button,.top-finish,.finish,.controls button{min-height:48px!important;min-width:48px!important;padding:10px 14px!important;font-size:16px!important}
@media(max-width:700px){.chapter-card .chapter-title{font-size:clamp(36px,11vw,70px)}.chapter-card .chapter-sub{font-size:clamp(16px,5vw,25px);padding:0 18px}.top button,.top-finish,.finish,.controls button{min-height:46px!important;min-width:46px!important;padding:9px 12px!important;font-size:15px!important}}
</style>

<style>

.top button,
.top-finish,
.finish,
.controls button{
  min-height:72px !important;
  height:72px !important;
  min-width:54px !important;
  padding-top:20px !important;
  padding-bottom:20px !important;
  padding-left:14px !important;
  padding-right:14px !important;
  font-size:21px !important;
  line-height:1 !important;
}

.pill{
  min-height:60px !important;
  display:flex !important;
  align-items:center !important;
}

@media(max-width:700px){
  .top{
    top:calc(env(safe-area-inset-top) + 8px) !important;
    gap:6px !important;
  }
  .controls{
    gap:6px !important;
  }
  .top button,
  .top-finish,
  .finish,
  .controls button{
    min-height:78px !important;
    height:78px !important;
    min-width:52px !important;
    padding-top:24px !important;
    padding-bottom:24px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    font-size:22px !important;
    border-radius:28px !important;
  }
  .pill{
    min-height:58px !important;
    font-size:14px !important;
    padding:10px 12px !important;
  }
  .finish{
    bottom:calc(env(safe-area-inset-bottom) + 10px) !important;
  }
}
</style>

</head>
<body>
<div id="app">
<audio id="music" preload="none" loop>
  <source src="media/japan-experience/music/japan-theme.mp3" type="audio/mpeg">
  <source src="media/japan-experience/music/japan-theme" type="audio/mpeg">
  <source src="media/music/japan-theme.mp3" type="audio/mpeg">
  <source src="japan-theme.mp3" type="audio/mpeg">
</audio>
<div class="top"><div class="pill">🎬 מצגת טיול יפן 2026</div><div class="controls"><button class="top-finish" id="finishBtn" type="button">סיום</button><button id="prevBtn">⏮</button><button id="nextBtn">⏭</button><button id="sound">🔊</button><button id="pause">⏸</button><button id="restart">↻</button></div></div>
<div id="bg"><img id="photo" alt=""></div>
<div class="caption"><div class="section" id="section"></div><h1 id="title"></h1><p id="subtitle"></p></div>
<div class="progress"><span id="bar"></span></div>
<div class="error" id="error"></div>
<div class="start" id="start"><div class="start-card"><h1>יפן 2026</h1><div class="start-spacer"></div><button id="startBtn">הפעל חוויה ✨</button><div class="preload-status" id="preloadStatus"></div></div></div>
</div>
<script>

function daysUntilJapan(){
  const target = new Date("2026-07-18T00:00:00+09:00");
  const now = new Date();
  const diff = target - now;
  const days = Math.max(0, Math.ceil(diff / (1000*60*60*24)));
  if(days===0) return "היום טסים ליפן ✈️";
  if(days===1) return "מחר טסים ליפן ✈️";
  return "עוד " + days + " ימים לטיסה ✈️";
}

const INITIAL_BUFFER_IMAGES = 4;
  const NEXT_BUFFER_IMAGES = 4;
  const START_BUFFER_MAX_WAIT_MS = 4200;
  const IMAGE_LOAD_TIMEOUT_MS = 12000;
  const imageCache = new Map();
  let startImagesReady = false;
  let startImagesPreparing = false;
  let startImagesPromise = null;

const sec = document.getElementById('section');
  const title = document.getElementById('title');
  const sub = document.getElementById('subtitle');
  const bar = document.getElementById('bar');
  const music = document.getElementById('music');
  const err = document.getElementById('error');
  const bg = document.getElementById('bg');
  const preloadStatus = document.getElementById('preloadStatus');
  const startBtn = document.getElementById('startBtn');

function returnToTrip(){
    window.location.href = "/JAPAN/#top";
  }

function showError(msg){
    if(!err) return;
    err.style.display='block';
    err.textContent=msg;
  }
  function clearError(){
    if(!err) return;
    err.style.display='none';
    err.textContent='';
  }

function setPreloadStatus(msg){
    if(preloadStatus) preloadStatus.textContent = msg || '';
  }

function setStartBusy(busy){
    if(!startBtn) return;
    startBtn.disabled = !!busy;
    startBtn.classList.toggle('is-loading', !!busy);
    startBtn.textContent = busy ? 'מכין תמונות...' : 'הפעל חוויה ✨';
  }

function slideDuration(s){
    return Math.max(1200, Number(s && s.duration ? s.duration : 3600));
  }

function clearTimer(){
    if(timer){ clearTimeout(timer); timer = null; }
  }

function scheduleNext(){
    clearTimer();
    const s = SLIDES[i] || {};
    timer = setTimeout(next, slideDuration(s));
  }

function slideSrc(src){
    if(!src) return '';
    if(String(src).startsWith('data:')) return src;
    const raw = String(src);
    return raw + (raw.includes('?') ? '&' : '?') + 'v=14';
  }

function preloadImage(src){
    const resolved = slideSrc(src);
    if(!resolved) return Promise.resolve(false);
    if(imageCache.has(resolved)) return imageCache.get(resolved);

imageCache.set(resolved, promise);
    return promise;
  }

function preloadIndex(index){
    const s = SLIDES[index];
    if(!s || !s.src) return Promise.resolve(true);
    return preloadImage(s.src);
  }

function imageSlideIndexesFrom(startIndex, imageCount){
    const indexes = [];
    for(let n = Math.max(0, startIndex); n < SLIDES.length && indexes.length < imageCount; n++){
      if(SLIDES[n] && SLIDES[n].src) indexes.push(n);
    }
    return indexes;
  }

function allImageSlideIndexes(){
    const indexes = [];
    for(let n = 0; n < SLIDES.length; n++){
      if(SLIDES[n] && SLIDES[n].src) indexes.push(n);
    }
    return indexes;
  }

async function preloadInitialBuffer(){
    const indexes = imageSlideIndexesFrom(0, INITIAL_BUFFER_IMAGES);
    if(!indexes.length){ setPreloadStatus(''); return true; }
    let done = 0;
    setPreloadStatus('טוען תמונות ראשונות 0/' + indexes.length);
    const results = await Promise.all(indexes.map(function(index){
      return preloadIndex(index).then(function(ok){
        done++;
        setPreloadStatus('טוען תמונות ראשונות ' + done + '/' + indexes.length);
        return ok;
      });
    }));
    return results.every(Boolean);
  }

async function prepareAllImagesBeforeStart(){
    if(startImagesReady) return true;
    if(startImagesPromise) return startImagesPromise;
    startImagesPreparing = true;
    setStartBusy(true);

const indexes = imageSlideIndexesFrom(0, INITIAL_BUFFER_IMAGES);
    if(!indexes.length){
      startImagesReady = true;
      startImagesPreparing = false;
      setStartBusy(false);
      setPreloadStatus('מוכן להפעלה');
      return true;
    }

function preloadNextImages(currentIndex, count){
    const indexes = imageSlideIndexesFrom(currentIndex + 1, count || NEXT_BUFFER_IMAGES);
    indexes.forEach(function(index){ preloadIndex(index); });
  }

function ensureImg(){
    let p = document.getElementById('photo');
    if(!p){
      bg.innerHTML = '<img id="photo" alt="">';
      p = document.getElementById('photo');
    }
    return p;
  }

function clearCaption(){
    if(sec) sec.textContent='';
    if(title) title.textContent='';
    if(sub) sub.textContent='';
  }

function updateProgress(){
    if(bar) bar.style.width = ((i + 1) / SLIDES.length * 100) + '%';
  }

function renderChapter(s){
    bg.innerHTML = '<div class="chapter-card"><div class="chapter-title">' + (s.title || '') + '</div><div class="chapter-sub">' + (s.subtitle || '') + '</div></div>';
    clearCaption();
  }

function renderOutro(s){
    bg.innerHTML = '<div class="outro"><div class="big">יפן 2026</div><div class="small">' + (s.subtitle || '') + '</div></div>';
    clearCaption();
  }

async function show(n, skipCount=0, direction=1){
    if(skipCount > SLIDES.length){
      console.warn('Too many missing images in a row');
      showError('כמה תמונות לא נטענו ברצף. בדוק שהקבצים קיימים בתיקיית media/images.');
      return false;
    }

const token = ++renderToken;
    i = Math.max(0, Math.min(n, SLIDES.length - 1));
    const s = SLIDES[i] || {};
    clearError();
    updateProgress();

if(s.chapter){
      renderChapter(s);
      preloadNextImages(i, NEXT_BUFFER_IMAGES);
      return true;
    }

if(s.outro){
      renderOutro(s);
      clearTimer();
      return true;
    }

const ok = await preloadImage(s.src);
    if(token !== renderToken) return false;

if(!ok){
      console.warn('Missing image skipped:', s.src);
      const nextIndex = Math.max(0, Math.min(i + direction, SLIDES.length - 1));
      if(nextIndex === i){
        showError('לא ניתן לטעון את התמונה: ' + (s.src || ''));
        return false;
      }
      return show(nextIndex, skipCount + 1, direction);
    }

const p = ensureImg();
    p.onload = null;
    p.onerror = null;
    p.className = '';
    p.style.setProperty('--slide-duration', slideDuration(s) + 'ms');
    p.style.objectPosition = s.pos || 'center center';
    p.src = slideSrc(s.src);

if(sec) sec.textContent = NAMES[s.section] || '';
    if(title) title.textContent = s.title || '';
    if(sub) sub.textContent = s.subtitle || '';

void p.offsetWidth;
    p.classList.add('show');
    p.classList.add('fx-' + (s.effect || 'slow-zoom'));

preloadNextImages(i, NEXT_BUFFER_IMAGES);
    return true;
  }

async function playMusic(silent){
    try{
      if(!music) return false;
      music.volume = .82;
      await music.play();
      const soundBtn = document.getElementById('sound');
      if(soundBtn) soundBtn.textContent = '🔇';
      return true;
    }catch(e){
      if(!silent){
        showError('המוזיקה לא הופעלה. בדוק שהקובץ japan-theme.mp3 קיים בתיקיית media/japan-experience/music.');
      }
      return false;
    }
  }

async function next(){
    if(paused) return;
    if(i >= SLIDES.length - 1){
      clearTimer();
      if(!endReturnTimer) endReturnTimer = setTimeout(returnToTrip, 3000);
      return;
    }
    const shown = await show(i + 1, 0, 1);
    if(started && !paused && shown) scheduleNext();
  }

async function previous(){
    clearTimer();
    const shown = await show(Math.max(i - 1, 0), 0, -1);
    if(started && !paused && shown) scheduleNext();
  }

async function manualNext(){
    clearTimer();
    if(i >= SLIDES.length - 1){
      returnToTrip();
      return;
    }
    const shown = await show(i + 1, 0, 1);
    if(started && !paused && shown) scheduleNext();
  }

async function start(options){
    if(started || startImagesPreparing) return;
    const opts = options || {};
    clearTimer();

if(!startImagesReady){
      setStartBusy(true);
      await prepareAllImagesBeforeStart();
    }

started = true;
    const startEl = document.getElementById('start');
    if(startEl) startEl.classList.add('hide');
    setPreloadStatus('');

const musicPromise = opts.withoutAudio ? Promise.resolve(false) : playMusic(false);
    const shown = await show(0);
    await musicPromise.catch(function(){ return false; });
    preloadNextImages(i, NEXT_BUFFER_IMAGES);
    preloadAllRemainingInBackground();
    if(!paused && shown) scheduleNext();
  }

if(startBtn) startBtn.onclick = function(){ start({withoutAudio:false}); };

prepareAllImagesBeforeStart();

const soundBtn = document.getElementById('sound');
  if(soundBtn) soundBtn.onclick = function(){
    if(!music) return;
    if(music.paused) playMusic();
    else {
      music.pause();
      soundBtn.textContent='🔊';
    }
  };

const restartBtn = document.getElementById('restart');
  if(restartBtn) restartBtn.onclick = function(){ location.reload(); };

const nextBtn = document.getElementById('nextBtn');
  if(nextBtn) nextBtn.onclick = manualNext;

const prevBtn = document.getElementById('prevBtn');
  if(prevBtn) prevBtn.onclick = previous;

const finishBtn = document.getElementById('finishBtn');
  if(finishBtn) finishBtn.onclick = returnToTrip;

show(0);
  window.EitanJapanPresentationBuffer = {
    preloadInitialBuffer,
    prepareAllImagesBeforeStart,
    preloadNextImages,
    preloadAllRemainingInBackground,
    cache:imageCache,
    config:{initial:INITIAL_BUFFER_IMAGES,next:NEXT_BUFFER_IMAGES,startMaxWait:START_BUFFER_MAX_WAIT_MS,timeout:IMAGE_LOAD_TIMEOUT_MS}
  };
})();
</script>
</body></html>