# WRAPD prezentace

Prezentace na tablet

## Obsah článku

#wrapd-kiosk { --wrapd-blue: #1677ff; --wrapd-dark: #101828; --wrapd-text: #172033; --wrapd-muted: #667085; --wrapd-light: #f5f7fa; --wrapd-border: #e4e7ec; --wrapd-white: #ffffff; width: 100%; min-height: 100vh; font-family: Arial, Helvetica, sans-serif; color: var(--wrapd-text); box-sizing: border-box; } #wrapd-kiosk *, #wrapd-kiosk *::before, #wrapd-kiosk *::after { box-sizing: border-box; } /* ========================================================= PREZENTACE ========================================================= */ #wrapd-presentation { position: relative; width: 100%; min-height: 100vh; background: #0d1117; color: #fff; overflow: hidden; } .wrapd-slide { display: none; min-height: 100vh; padding: 50px 7%; align-items: center; justify-content: center; } .wrapd-slide.active { display: flex; } .wrapd-slide-inner { width: 100%; max-width: 1250px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .wrapd-brand { display: inline-block; margin-bottom: 25px; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: #aeb8c8; text-transform: uppercase; } .wrapd-slide h1 { margin: 0 0 18px; font-size: clamp(42px, 5vw, 78px); line-height: 1.02; font-weight: 800; letter-spacing: -2px; } .wrapd-slide-subtitle { margin: 0 0 30px; max-width: 600px; font-size: clamp(19px, 2vw, 27px); line-height: 1.45; color: #c5ccd7; } .wrapd-price { margin-top: 25px; font-size: 34px; font-weight: 800; } .wrapd-price span { font-size: 16px; font-weight: 400; color: #9ba5b4; margin-left: 8px; } .wrapd-features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .wrapd-feature { padding: 11px 16px; border: 1px solid #333c4a; border-radius: 999px; color: #d8dee8; background: #151b24; font-size: 15px; line-height: 1; } .wrapd-visual { min-height: 500px; border-radius: 32px; background: radial-gradient(circle at 50% 30%, #263140 0%, #151b24 45%, #0e131a 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border: 1px solid #252e3a; } .wrapd-phone { width: 250px; height: 500px; border-radius: 34px; border: 8px solid #202833; background: linear-gradient(145deg, #27313d, #10151b); box-shadow: 0 35px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); position: relative; transform: rotate(-5deg); } .wrapd-phone::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 85px; height: 22px; border-radius: 20px; background: #05070a; } .wrapd-phone-screen { position: absolute; inset: 8px; border-radius: 27px; background: linear-gradient( 135deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 35%, rgba(255,255,255,.06) ), linear-gradient(160deg, #36587d, #152338 55%, #090f17); overflow: hidden; } .wrapd-phone-screen::after { content: ""; position: absolute; width: 180%; height: 40%; top: 20%; left: -40%; background: linear-gradient( 115deg, transparent 0%, rgba(255,255,255,.14) 45%, transparent 55% ); transform: rotate(-15deg); } .wrapd-cta-area { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: calc(100% - 68px); text-align: center; } #wrapd-start-guide { border: 0; background: #fff; color: #111827; border-radius: 16px; padding: 18px 30px; font-size: 19px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; } #wrapd-start-guide:hover { transform: translateY(-2px); box-shadow: 0 16px 35px rgba(0,0,0,.35); } .wrapd-presentation-nav { position: absolute; left: 50%; bottom: 25px; transform: translateX(-50%); display: flex; gap: 9px; z-index: 10; } .wrapd-dot { width: 9px; height: 9px; border-radius: 50%; background: #667085; border: 0; padding: 0; cursor: pointer; } .wrapd-dot.active { background: #fff; width: 25px; border-radius: 10px; } .wrapd-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid #394352; background: rgba(17, 24, 39, .75); color: #fff; cursor: pointer; font-size: 25px; z-index: 10; } .wrapd-arrow-left { left: 20px; } .wrapd-arrow-right { right: 20px; } /* ========================================================= PORADCE ========================================================= */ #wrapd-guide { display: none; min-height: 100vh; background: #f6f8fb; color: var(--wrapd-text); padding: 40px 25px 70px; } #wrapd-guide.active { display: block; } .wrapd-guide-container { max-width: 1100px; margin: 0 auto; } .wrapd-guide-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 35px; } .wrapd-guide-brand { font-size: 15px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wrapd-blue); } #wrapd-close-guide { border: 1px solid var(--wrapd-border); background: #fff; color: var(--wrapd-text); border-radius: 12px; padding: 11px 17px; font-size: 14px; font-weight: 700; cursor: pointer; } .wrapd-guide-title { text-align: center; margin-bottom: 42px; } .wrapd-guide-title h2 { margin: 0 0 12px; font-size: clamp(32px, 4vw, 50px); line-height: 1.1; letter-spacing: -1.5px; } .wrapd-guide-title p { margin: 0 auto; max-width: 700px; color: var(--wrapd-muted); font-size: 18px; line-height: 1.5; } .wrapd-question { margin-bottom: 35px; } .wrapd-question h3 { margin: 0 0 15px; font-size: 22px; } .wrapd-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wrapd-option { position: relative; border: 1px solid var(--wrapd-border); background: #fff; border-radius: 16px; padding: 17px 18px; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; min-height: 72px; } .wrapd-option:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(16,24,40,.07); } .wrapd-option.selected { border-color: var(--wrapd-blue); box-shadow: 0 0 0 3px rgba(22,119,255,.10); background: #f9fbff; } .wrapd-option-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; } .wrapd-option-text { color: var(--wrapd-muted); font-size: 14px; line-height: 1.4; } .wrapd-checkbox { position: absolute; top: 17px; right: 17px; width: 21px; height: 21px; border-radius: 6px; border: 1px solid #c9ced6; background: #fff; } .wrapd-option.selected .wrapd-checkbox { background: var(--wrapd-blue); border-color: var(--wrapd-blue); } .wrapd-option.selected .wrapd-checkbox::after { content: ""; position: absolute; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); left: 5px; top: 5px; } .wrapd-result { margin-top: 45px; background: #fff; border: 1px solid var(--wrapd-border); border-radius: 24px; padding: 30px; box-shadow: 0 15px 40px rgba(16,24,40,.07); } .wrapd-result-label { color: var(--wrapd-blue); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 8px; } .wrapd-result h3 { margin: 0 0 10px; font-size: 30px; } .wrapd-result-description { color: var(--wrapd-muted); font-size: 16px; line-height: 1.6; margin-bottom: 20px; } .wrapd-result-price { font-size: 28px; font-weight: 800; margin-bottom: 20px; } .wrapd-result-tags { display: flex; flex-wrap: wrap; gap: 8px; } .wrapd-result-tag { padding: 8px 12px; background: #f2f4f7; border-radius: 999px; font-size: 13px; color: #344054; } .wrapd-alternatives { margin-top: 30px; } .wrapd-alternatives h4 { margin: 0 0 12px; font-size: 18px; } .wrapd-alternative { padding: 13px 0; border-top: 1px solid var(--wrapd-border); display: flex; justify-content: space-between; gap: 20px; } .wrapd-alternative-name { font-weight: 700; } .wrapd-alternative-price { font-weight: 700; white-space: nowrap; } .wrapd-reset { margin-top: 20px; border: 1px solid var(--wrapd-border); background: #fff; color: var(--wrapd-text); border-radius: 12px; padding: 12px 18px; cursor: pointer; font-weight: 700; } /* ========================================================= MOBIL / TABLET ========================================================= */ @media (max-width: 850px) { .wrapd-slide { padding: 35px 25px 85px; } .wrapd-slide-inner { grid-template-columns: 1fr; gap: 30px; } .wrapd-visual { min-height: 300px; order: -1; } .wrapd-phone { width: 170px; height: 340px; border-radius: 26px; } .wrapd-slide h1 { font-size: 44px; } .wrapd-slide-subtitle { font-size: 18px; } .wrapd-price { font-size: 28px; } .wrapd-cta-area { bottom: 20px; } #wrapd-start-guide { padding: 15px 22px; font-size: 16px; } .wrapd-options { grid-template-columns: 1fr; } #wrapd-guide { padding: 25px 16px 50px; } .wrapd-guide-top { margin-bottom: 25px; } .wrapd-result { padding: 22px; } } WRAPD · ITSmartFix HyperFilm Clear Univerzální čirá fólie pro každodenní používání. Samozacelovací povrch a dobrá ochrana displeje. Samozacelovací Čirá 180 μm Dobrá ochrana 499 Kč WRAPD · ITSmartFix Crystal UV Clear Čirá UV fólie s velmi dobrou přilnavostí k hranám. Vhodná také pro zakřivené displeje. UV aplikace Čirá 180 μm Velmi dobré hrany 699 Kč WRAPD · ITSmartFix HyperShield Clear Silnější čirá fólie zaměřená na maximální absorpci nárazů. Samozacelovací povrch. Nejvyšší absorpce nárazů Samozacelovací Čirá 280 μm 799 Kč WRAPD · ITSmartFix Crystal UV Matte Privacy Matná UV fólie s ochranou soukromí. Pomáhá omezit pohled na displej ze stran. Matná Privacy 34° UV aplikace 250 μm 899 Kč ‹ › Spustit WRAPD poradce WRAPD · ITSmartFix Zpět na prezentaci Najděte fólii pro svůj telefon Vyberte, co je pro vás důležité. Doporučení se automaticky upraví podle vašich voleb. Co od fólie očekáváte? Chci co největší ochranu proti nárazům Důležitá je pro mě hlavně ochrana displeje při pádu nebo nárazu. Bojím se škrábanců Telefon nosím často v kapse nebo tašce. Nechci otisky prstů Chci, aby displej zůstal co nejčistší. Chci hladký a příjemný povrch Záleží mi na příjemném pohybu prstu po displeji. Co dalšího je pro vás důležité? Chci soukromí Nechci, aby lidé vedle mě dobře viděli na displej. Mám zakřivený displej Důležitá je pro mě dobrá přilnavost k hranám. Nejlepší shoda pro vás HyperFilm Clear Univerzální čirá fólie pro každodenní používání. 499 Kč Další možnosti Začít znovu (function () { /* ===================================================== NASTAVENÍ ===================================================== */ var PRESENTATION_TIME = 7000; var INACTIVITY_TIME = 20000; /* ===================================================== PREZENTACE ===================================================== */ var presentation = document.getElementById("wrapd-presentation"); var slides = document.querySelectorAll( "#wrapd-presentation .wrapd-slide" ); var dots = document.querySelectorAll( "#wrapd-dots .wrapd-dot" ); var currentSlide = 0; var presentationTimer = null; function showSlide(index) { if (index < 0) { index = slides.length - 1; } if (index >= slides.length) { index = 0; } currentSlide = index; for (var i = 0; i < slides.length; i++) { slides[i].classList.remove("active"); } for (var j = 0; j < dots.length; j++) { dots[j].classList.remove("active"); } slides[currentSlide].classList.add("active"); if (dots[currentSlide]) { dots[currentSlide].classList.add("active"); } } function nextSlide() { showSlide(currentSlide + 1); } function previousSlide() { showSlide(currentSlide - 1); } function startPresentationTimer() { clearInterval(presentationTimer); presentationTimer = setInterval(function () { if (!guide.classList.contains("active")) { nextSlide(); } }, PRESENTATION_TIME); } document .getElementById("wrapd-next") .addEventListener("click", function () { nextSlide(); startPresentationTimer(); }); document .getElementById("wrapd-prev") .addEventListener("click", function () { previousSlide(); startPresentationTimer(); }); for (var d = 0; d < dots.length; d++) { (function (index) { dots[index].addEventListener("click", function () { showSlide(index); startPresentationTimer(); }); })(d); } /* ===================================================== DATA FÓLIÍ ===================================================== */ var films = [ { name: "HyperFilm Clear", price: 499, description: "Univerzální čirá fólie pro každodenní používání. Samozacelovací povrch a dobrá ochrana displeje.", scratch: 5, smooth: 3, fingerprint: 4, impact: 3, edge: 3, privacy: 0, tags: [ "Samozacelovací", "Čirá", "180 μm" ] }, { name: "Crystal UV Clear", price: 699, description: "Čirá UV fólie s velmi dobrou přilnavostí k hranám. Vhodná také pro zakřivené displeje.", scratch: 2, smooth: 4, fingerprint: 4, impact: 3, edge: 5, privacy: 0, tags: [ "UV aplikace", "Čirá", "180 μm", "Velmi dobré hrany" ] }, { name: "HyperShield Clear", price: 799, description: "Silnější čirá fólie zaměřená na maximální absorpci nárazů. Samozacelovací povrch.", scratch: 5, smooth: 4, fingerprint: 4, impact: 5, edge: 2, privacy: 0, tags: [ "Nejvyšší absorpce nárazů", "Samozacelovací", "Čirá", "280 μm" ] }, { name: "Crystal UV Matte Privacy", price: 899, description: "Matná UV fólie s ochranou soukromí. Pomáhá omezit pohled na displej ze stran.", scratch: 3, smooth: 5, fingerprint: 5, impact: 4, edge: 5, privacy: 1, tags: [ "Matná", "Privacy 34°", "UV aplikace", "250 μm" ] } ]; /* ===================================================== PORADCE ===================================================== */ var guide = document.getElementById("wrapd-guide"); var startGuide = document.getElementById("wrapd-start-guide"); var closeGuide = document.getElementById("wrapd-close-guide"); var resetButton = document.getElementById("wrapd-reset"); var options = document.querySelectorAll(".wrapd-option"); var selected = {}; var inactivityTimer = null; function resetSelections() { selected = {}; for (var i = 0; i < options.length; i++) { options[i].classList.remove("selected"); } } function resetInactivity() { clearTimeout(inactivityTimer); inactivityTimer = setTimeout(function () { closeGuideFunction(); }, INACTIVITY_TIME); } function openGuide() { clearInterval(presentationTimer); presentation.style.display = "none"; guide.classList.add("active"); resetSelections(); calculateRecommendation(); resetInactivity(); window.scrollTo({ top: 0, behavior: "instant" }); } function closeGuideFunction() { clearTimeout(inactivityTimer); guide.classList.remove("active"); presentation.style.display = "block"; showSlide(0); startPresentationTimer(); window.scrollTo({ top: 0, behavior: "instant" }); } startGuide.addEventListener( "click", openGuide ); closeGuide.addEventListener( "click", closeGuideFunction ); /* ===================================================== VÝBĚR V PORADCI ===================================================== */ for (var o = 0; o < options.length; o++) { options[o].addEventListener( "click", function () { var type = this.getAttribute("data-type"); if (selected[type]) { delete selected[type]; this.classList.remove("selected"); } else { selected[type] = true; this.classList.add("selected"); } calculateRecommendation(); resetInactivity(); } ); } /* ===================================================== VÝPOČET DOPORUČENÍ ===================================================== */ function calculateRecommendation() { var scoredFilms = []; for (var i = 0; i < films.length; i++) { var film = films[i]; var score = 0; if (selected.impact) { score += film.impact * 5; } if (selected.scratch) { score += film.scratch * 4; } if (selected.smooth) { score += film.smooth * 4; } if (selected.fingerprint) { score += film.fingerprint * 4; } if (selected.edge) { score += film.edge * 5; } if (selected.privacy) { if (film.privacy) { score += 30; } else { score -= 10; } } /* Pokud není vybráno nic, použijeme mírně univerzální pořadí. */ if (Object.keys(selected).length === 0) { if (film.name === "HyperFilm Clear") { score += 10; } } scoredFilms.push({ film: film, score: score }); } scoredFilms.sort(function (a, b) { if (b.score !== a.score) { return b.score - a.score; } return a.film.price - b.film.price; }); renderRecommendation(scoredFilms); } /* ===================================================== VYKRESLENÍ VÝSLEDKU ===================================================== */ function renderRecommendation(scoredFilms) { var best = scoredFilms[0].film; document.getElementById( "wrapd-result-name" ).textContent = best.name; document.getElementById( "wrapd-result-description" ).textContent = best.description; document.getElementById( "wrapd-result-price" ).textContent = best.price + " Kč"; var tagsContainer = document.getElementById( "wrapd-result-tags" ); tagsContainer.innerHTML = ""; for (var i = 0; i < best.tags.length; i++) { var tag = document.createElement("div"); tag.className = "wrapd-result-tag"; tag.textContent = best.tags[i]; tagsContainer.appendChild(tag); } var alternativesContainer = document.getElementById( "wrapd-alternatives-list" ); alternativesContainer.innerHTML = ""; for (var j = 1; j < Math.min(scoredFilms.length, 4); j++) { var alternative = scoredFilms[j].film; var row = document.createElement("div"); row.className = "wrapd-alternative"; var name = document.createElement("div"); name.className = "wrapd-alternative-name"; name.textContent = alternative.name; var price = document.createElement("div"); price.className = "wrapd-alternative-price"; price.textContent = alternative.price + " Kč"; row.appendChild(name); row.appendChild(price); alternativesContainer.appendChild(row); } } /* ===================================================== RESET ===================================================== */ resetButton.addEventListener( "click", function () { resetSelections(); calculateRecommendation(); resetInactivity(); } ); /* ===================================================== AKTIVITA UŽIVATELE ===================================================== */ guide.addEventListener( "click", function () { resetInactivity(); } ); guide.addEventListener( "touchstart", function () { resetInactivity(); }, { passive: true } ); guide.addEventListener( "pointerdown", function () { resetInactivity(); } ); /* ===================================================== START ===================================================== */ calculateRecommendation(); showSlide(0); startPresentationTimer(); })();

- [Veřejná stránka článku](https://www.itsmartfix.cz/wrapd-prezentace)