# Průvodce folii tablet

průvodce folie na tabletu

## Obsah článku

#itsmartfix-film-guide{ position:fixed!important; inset:0!important; z-index:2147483647!important; width:100vw!important; height:100vh!important; height:100dvh!important; min-height:100vh!important; min-height:100dvh!important; margin:0!important; padding:0!important; overflow:hidden!important; isolation:isolate; border-radius:0!important; background:#f4f7fb!important; } #itsmartfix-film-guide .app{ width:100%; height:100%; min-height:100%; display:flex; flex-direction:column; } #itsmartfix-film-guide{ --bg:#f4f7fb; --panel:#ffffff; --panel2:#f8fbff; --line:#d9e2ec; --text:#132033; --muted:#64748b; --brand:#1565d8; --brand-dark:#0b3f91; --cyan:#1565d8; --yellow:#f4b400; --orange:#ef6c00; --purple:#7c4dff; --green:#168a5b; } #itsmartfix-film-guide *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } #itsmartfix-film-guide, #itsmartfix-film-guide *{ font-family:Arial,Helvetica,sans-serif; } #itsmartfix-film-guide button{ font:inherit; color:inherit; border:0; } #itsmartfix-film-guide{ background: radial-gradient(circle at 12% 0%,rgba(21,101,216,.10),transparent 28%), radial-gradient(circle at 92% 90%,rgba(124,77,255,.07),transparent 25%), linear-gradient(145deg,#f7faff,#eef3f9)!important; color:var(--text); } /* HEADER */ #itsmartfix-film-guide .topbar{ height:82px; min-height:82px; flex:0 0 82px; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:rgba(255,255,255,.97); border-bottom:1px solid #d9e2ec; box-shadow:0 4px 18px rgba(19,32,51,.06); } #itsmartfix-film-guide .logo{ color:#10233f; font-size:26px; font-weight:900; letter-spacing:1.2px; line-height:1; } #itsmartfix-film-guide .logo span{ display:block; margin-top:6px; color:#6b7b90; font-size:9px; font-weight:700; letter-spacing:2.5px; } #itsmartfix-film-guide .logo:after{ content:"OPRAVÍME. OCHRÁNÍME. VYBAVÍME."; display:block; margin-top:6px; color:var(--brand); font-size:8px; font-weight:900; letter-spacing:1.1px; } #itsmartfix-film-guide .reset{ background:#edf4ff; color:var(--brand-dark); border:1px solid #c8dcfb; border-radius:12px; padding:11px 16px; font-weight:800; cursor:pointer; } /* PROGRESS */ #itsmartfix-film-guide .progress{ height:5px; flex:0 0 5px; background:#e6edf5; } #itsmartfix-film-guide .progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#1565d8,#4f8eea); transition:width .3s; } /* MAIN */ #itsmartfix-film-guide main{ flex:1; min-height:0; overflow:hidden; padding:16px 18px; display:flex; justify-content:center; align-items:stretch; } #itsmartfix-film-guide .screen{ width:min(1500px,100%); height:100%; display:none; align-self:stretch; overflow:hidden; } #itsmartfix-film-guide .screen.active{ display:flex; flex-direction:column; } #itsmartfix-film-guide .kicker{ color:var(--brand); font-size:12px; font-weight:900; letter-spacing:2px; text-transform:uppercase; margin:3px 0 9px; } #itsmartfix-film-guide h1, #itsmartfix-film-guide h2{ color:#10233f; } #itsmartfix-film-guide h1{ font-size:clamp(30px,4.5vw,52px); line-height:1.03; margin:0 0 10px; } #itsmartfix-film-guide h2{ font-size:clamp(24px,3.4vw,38px); line-height:1.08; margin:0 0 9px; } #itsmartfix-film-guide .sub{ max-width:820px; margin:0 0 20px; color:#64748b; font-size:17px; line-height:1.42; } /* CHOICES */ #itsmartfix-film-guide .grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } #itsmartfix-film-guide .choice{ min-height:105px; text-align:left; padding:20px; border:1px solid #d7e1ec; border-radius:18px; background:linear-gradient(145deg,#ffffff,#f7faff); box-shadow:0 6px 20px rgba(23,46,77,.06); color:#172b46; cursor:pointer; transition:.15s ease; } #itsmartfix-film-guide .choice:hover{ border-color:#b7cff0; transform:translateY(-1px); } #itsmartfix-film-guide .choice:active{ transform:scale(.99); border-color:var(--brand); box-shadow:0 0 0 3px rgba(21,101,216,.10); } #itsmartfix-film-guide .choice strong{ display:block; margin-bottom:7px; font-size:20px; } #itsmartfix-film-guide .choice span{ color:#687a90; line-height:1.35; } #itsmartfix-film-guide .back{ width:max-content; margin-top:13px; padding:8px 0; background:transparent; color:#62748b; font-weight:700; cursor:pointer; } /* RESULT */ #itsmartfix-film-guide #result.active{ display:grid; grid-template-columns:1fr; grid-template-rows:auto auto minmax(0,1fr) auto; gap:9px; justify-content:initial; padding-top:0; } #itsmartfix-film-guide #result>.kicker{ margin:0; font-size:11px; line-height:1; } #itsmartfix-film-guide #result>h2{ margin:0; font-size:27px; line-height:1.05; } #itsmartfix-film-guide .result{ min-height:0; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:12px; } #itsmartfix-film-guide .hero, #itsmartfix-film-guide .reason, #itsmartfix-film-guide .physical{ border:1px solid #d7e1ec; border-radius:18px; background:linear-gradient(145deg,#ffffff,#f7faff); box-shadow:0 8px 24px rgba(23,46,77,.06); } #itsmartfix-film-guide .hero, #itsmartfix-film-guide .reason{ min-height:0; overflow:hidden; padding:15px; } #itsmartfix-film-guide .badge{ display:inline-block; padding:7px 11px; border-radius:999px; background:#edf4ff; color:var(--brand); font-size:11px; font-weight:900; letter-spacing:1px; } #itsmartfix-film-guide .productName{ margin:7px 0 3px; font-size:30px; line-height:1.05; font-weight:900; } #itsmartfix-film-guide .productDesc{ color:#65778d; font-size:13px; line-height:1.3; } #itsmartfix-film-guide .price{ margin:8px 0 10px; color:var(--brand)!important; font-size:38px; line-height:1; font-weight:900; } #itsmartfix-film-guide .specs{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; } #itsmartfix-film-guide .spec{ padding:8px 10px; border:1px solid #dbe5ef; border-radius:10px; background:#f6f9fd; } #itsmartfix-film-guide .spec small{ display:block; margin-bottom:2px; color:#718299; font-size:10px; } #itsmartfix-film-guide .spec b{ font-size:14px; } #itsmartfix-film-guide .ratings{ margin-top:9px; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; } #itsmartfix-film-guide .rating{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:57px; margin:0; padding:7px 3px; border-radius:9px; background:#071726; border:1px solid #1b344a; color:#fff; font-size:10px; } #itsmartfix-film-guide .rating>span{ font-weight:700; white-space:nowrap; } #itsmartfix-film-guide .dots{ display:flex; gap:2px; } #itsmartfix-film-guide .dot{ width:8px; height:8px; border-radius:50%; background:#d8e1ec; } #itsmartfix-film-guide .dot.on{ background:var(--accent); } #itsmartfix-film-guide .rating>b{ font-size:11px; } #itsmartfix-film-guide .reason{ display:flex; flex-direction:column; justify-content:flex-start; } #itsmartfix-film-guide .reason h3{ margin:0 0 7px; color:#18304f; font-size:20px; } #itsmartfix-film-guide .reason p{ margin:6px 0; color:#65778d; font-size:13px; line-height:1.35; } /* PHYSICAL TABLET */ #itsmartfix-film-guide .physical{ min-height:0; overflow:hidden; margin:0; padding:11px 12px; } #itsmartfix-film-guide .physical h3{ margin:0 0 3px; color:#18304f; font-size:18px; } #itsmartfix-film-guide .physical p{ margin:0 0 7px; color:#65778d; font-size:11px; line-height:1.15; } #itsmartfix-film-guide .tabletZones{ display:grid; grid-template-columns:repeat(3,1fr); width:100%; max-width:none; gap:5px; padding:7px; border:2px solid #cbd7e4; border-radius:14px; background:#eaf0f7; } #itsmartfix-film-guide .zone{ height:92px; min-height:92px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:7px; text-align:center; border:2px solid #c7d3df; border-radius:11px; background:#fff; transition:.2s ease; } #itsmartfix-film-guide .zone strong{ font-size:12px; } #itsmartfix-film-guide .zone span{ margin-top:3px; color:#6b7c91; font-size:9px; line-height:1.2; } #itsmartfix-film-guide .zone.left{ --zone:#ef6c00; } #itsmartfix-film-guide .zone.mid{ --zone:#1565d8; } #itsmartfix-film-guide .zone.right{ --zone:#7c4dff; } #itsmartfix-film-guide .zone.active{ border-color:var(--zone); box-shadow:0 0 0 3px rgba(21,101,216,.12),0 8px 22px rgba(21,101,216,.18); transform:translateY(-2px); } #itsmartfix-film-guide .zone.active strong{ color:var(--zone); } #itsmartfix-film-guide .try{ margin-top:5px; color:var(--brand); font-size:12px; font-weight:900; text-align:center; } /* MOBILE */ @media(max-width:800px){ #itsmartfix-film-guide .topbar{ height:72px; min-height:72px; flex-basis:72px; padding:9px 14px; } #itsmartfix-film-guide .logo{ font-size:20px; } #itsmartfix-film-guide .logo span{ font-size:8px; letter-spacing:2px; } #itsmartfix-film-guide .logo:after{ font-size:7px; margin-top:4px; letter-spacing:.7px; } #itsmartfix-film-guide .reset{ padding:9px 12px; font-size:12px; } #itsmartfix-film-guide main{ padding:12px 14px; } #itsmartfix-film-guide .screen.active{ justify-content:center; } #itsmartfix-film-guide .kicker{ margin:2px 0 6px; font-size:11px; } #itsmartfix-film-guide h1{ font-size:30px; margin-bottom:8px; } #itsmartfix-film-guide h2{ font-size:26px; margin-bottom:7px; } #itsmartfix-film-guide .sub{ margin-bottom:14px; font-size:15px; line-height:1.3; } #itsmartfix-film-guide .grid{ grid-template-columns:1fr; gap:9px; } #itsmartfix-film-guide .choice{ min-height:74px; height:auto; padding:13px 14px; } #itsmartfix-film-guide .choice strong{ margin-bottom:4px; font-size:17px; } #itsmartfix-film-guide .choice span{ font-size:13px; } #itsmartfix-film-guide .back{ margin-top:8px; } #itsmartfix-film-guide #result.active{ display:flex; flex-direction:column; justify-content:flex-start; gap:7px; } #itsmartfix-film-guide #result>h2{ font-size:23px; } #itsmartfix-film-guide .result{ display:grid; grid-template-columns:1fr; gap:7px; min-height:0; } #itsmartfix-film-guide .hero, #itsmartfix-film-guide .reason{ padding:12px; border-radius:15px; } #itsmartfix-film-guide .productName{ font-size:23px; margin:5px 0 2px; } #itsmartfix-film-guide .productDesc{ font-size:11px; } #itsmartfix-film-guide .price{ font-size:29px; margin:5px 0 7px; } #itsmartfix-film-guide .specs{ gap:4px; margin-top:4px; } #itsmartfix-film-guide .spec{ padding:6px 8px; } #itsmartfix-film-guide .spec small{ font-size:9px; } #itsmartfix-film-guide .spec b{ font-size:12px; } #itsmartfix-film-guide .ratings{ gap:3px; margin-top:6px; } #itsmartfix-film-guide .rating{ min-height:47px; padding:5px 2px; gap:3px; font-size:8px; } #itsmartfix-film-guide .rating .dot{ width:7px; height:7px; } #itsmartfix-film-guide .rating>b{ font-size:9px; } #itsmartfix-film-guide .reason h3{ font-size:17px; margin-bottom:5px; } #itsmartfix-film-guide .reason p{ font-size:11px; line-height:1.25; margin:5px 0; } #itsmartfix-film-guide .physical{ padding:8px 9px; margin-top:0; } #itsmartfix-film-guide .physical h3{ font-size:14px; } #itsmartfix-film-guide .physical p{ display:none; } #itsmartfix-film-guide .tabletZones{ padding:4px; gap:3px; } #itsmartfix-film-guide .zone{ height:62px; min-height:62px; padding:4px; border-radius:8px; } #itsmartfix-film-guide .zone strong{ font-size:9px; } #itsmartfix-film-guide .zone span{ font-size:7px; margin-top:2px; } #itsmartfix-film-guide .try{ margin-top:4px; font-size:9px; } } @media(max-width:520px){ #itsmartfix-film-guide .topbar{ padding:8px 11px; } #itsmartfix-film-guide .logo{ font-size:18px; } #itsmartfix-film-guide .logo span{ font-size:7px; } #itsmartfix-film-guide .logo:after{ font-size:6px; } #itsmartfix-film-guide .reset{ padding:8px 10px; font-size:11px; } #itsmartfix-film-guide main{ padding:8px 10px; } #itsmartfix-film-guide .choice{ padding:11px 12px; min-height:70px; } #itsmartfix-film-guide .choice strong{ font-size:15px; } #itsmartfix-film-guide .choice span{ font-size:11px; } #itsmartfix-film-guide .specs{ grid-template-columns:1fr 1fr; } #itsmartfix-film-guide .physical{ padding:6px 7px; } #itsmartfix-film-guide .zone{ height:58px; min-height:58px; } } IT SMARTFIX PRŮVODCE OCHRANOU DISPLEJE Začít znovu Průvodce výběrem Jakou fólii na telefon hledáte? Odpovězte na několik jednoduchých otázek a během pár sekund zjistíte, která ochranná fólie se hodí právě pro vás. Každodenní používání Chci univerzální fólii pro běžné používání telefonu. Co největší ochrana Telefon dostává zabrat a řeším hlavně ochranu proti nárazům. Čistý obraz Prioritou je maximální čistota displeje a příjemný vzhled. Soukromí Nechci, aby lidé vedle mě dobře viděli na displej. Otázka 2 / 3 Co je pro vás nejdůležitější? Vyberte jednu hlavní prioritu. Odolnost proti poškrábání Chci co nejvyšší odolnost povrchu. Hladký posuv Chci co nejpříjemnější pohyb prstu po displeji. Méně viditelných otisků Čistý displej je pro mě důležitý. Přilnavost hran Chci maximální přilnavost na hranách displeje. ← Zpět Otázka 3 / 3 Jaký typ displeje preferujete? Soukromí nebo klasický čistý displej? Chci soukromí Preferuji Privacy fólii s omezením pozorovacího úhlu. Soukromí nepotřebuji Chci klasický displej bez Privacy efektu. ← Zpět Doporučení Podle vašich odpovědí Vyzkoušejte rozdíl přímo na tomto tabletu Tablet je fyzicky rozdělen na tři stejné třetiny. Každá třetina má nalepenou jinou fólii a průvodce zvýrazní tu, kterou si máte právě vyzkoušet. HYPERSHIELD Clear 2× Armor maximální ochrana CRYSTAL UV Clear čistý obraz PRIVACY Privacy fólie soukromí ← Vyzkoušejte doporučenou část tabletu. Technické parametry a hodnocení vycházejí z produktového technického průvodce. Hodnocení 1–5 je relativní v rámci nabídky; tloušťka a privacy úhel jsou měřené hodnoty. const films = [ { id:'hyper', name:'HyperFilm Clear', material:'EPU', thick:'180 µm', privacy:null, price:499, color:'#1565d8', scores:{ scratch:5, touch:3, finger:4, impact:3, edge:3 }, text:'Univerzální volba pro každodenní používání, s velmi vysokou odolností proti poškrábání.' }, { id:'flex', name:'FlexShield Clear Privacy', material:'TPU', thick:'180 µm', privacy:'41°', price:699, color:'#7c4dff', scores:{ scratch:3, touch:3, finger:3, impact:3, edge:3 }, text:'Privacy varianta pro situace, kdy je důležité soukromí při pohledu z boku.' }, { id:'crystal', name:'CrystalUV Clear', material:'UV PET', thick:'180 µm', privacy:null, price:699, color:'#1565d8', scores:{ scratch:2, touch:4, finger:4, impact:3, edge:5 }, text:'Čistá varianta s velmi vysokou přilnavostí hran a vysokou hladkostí posuvu.' }, { id:'hyperShield', name:'HyperShield Clear 2× Armor', material:'EPU', thick:'280 µm', privacy:null, price:799, color:'#ef6c00', scores:{ scratch:5, touch:4, finger:4, impact:5, edge:2 }, text:'Nejrobustnější varianta v této nabídce, zaměřená především na absorpci nárazu.' }, { id:'crystalPrivacy', name:'CrystalUV Ceramic Privacy', display:'Crystal UV Matte Privacy', material:'UV PET', thick:'250 µm', privacy:'34°', price:899, color:'#7c4dff', scores:{ scratch:3, touch:5, finger:5, impact:4, edge:5 }, text:'Privacy varianta s matným charakterem displeje, velmi vysokou hladkostí, odolností proti otiskům a přilnavostí hran.' } ]; let answers = {}; function itsfShow(id){ document .querySelectorAll('#itsmartfix-film-guide .screen') .forEach(function(x){ x.classList.remove('active'); }); const target = document.getElementById(id); if(target){ target.classList.add('active'); } const progress = { q1:0, q2:33, q3:66, result:100 }; const bar = document.getElementById('progress'); if(bar){ bar.style.width = (progress[id] || 0) + '%'; } } function itsfAnswer(key,value){ answers[key] = value; if(key === 'use'){ itsfShow('q2'); return; } if(key === 'priority'){ itsfShow('q3'); return; } itsfBuildResult(); } function itsfScoreFilm(f){ let score = 0; const use = answers.use; const priority = answers.priority; const privacy = answers.privacy; if(privacy === 'yes'){ score += f.privacy ? 100 : -40; } if(privacy === 'no'){ score += f.privacy ? -12 : 8; } if(use === 'impact'){ score += f.scores.impact * 12; } if(use === 'clarity'){ score += f.scores.touch * 7; score += f.scores.edge * 5; } if(use === 'privacy'){ score += f.privacy ? 100 : -40; } if(use === 'daily'){ score += f.scores.scratch * 4; score += f.scores.finger * 4; score += f.scores.touch * 4; score += f.scores.edge * 3; } if(priority){ score += f.scores[priority] * 12; } return score; } function itsfBuildResult(){ const ranked = [...films].sort(function(a,b){ return itsfScoreFilm(b) - itsfScoreFilm(a); }); const f = ranked[0]; const hero = document.getElementById('hero'); hero.style.setProperty('--accent',f.color); hero.innerHTML = ` DOPORUČENÁ VARIANTA ${f.display || f.name} ${f.text} ${f.price} Kč Materiál ${f.material} Tloušťka ${f.thick} Privacy úhel ${f.privacy || '—'} UV vytvrzování ${f.material === 'UV PET' ? 'Ano' : 'Ne'} HODNOCENÍ 1–5 ${itsfRating( 'Poškrábání', f.scores.scratch, f.color )} ${itsfRating( 'Posuv', f.scores.touch, f.color )} ${itsfRating( 'Otisky', f.scores.finger, f.color )} ${itsfRating( 'Náraz', f.scores.impact, f.color )} ${itsfRating( 'Hrany', f.scores.edge, f.color )} `; const reason = document.getElementById('reason'); reason.innerHTML = ` Proč právě tato? ${itsfReasonText(f)} Výběr je založen na vašich odpovědích a na pěti parametrech: odolnost proti poškrábání, hladkost posuvu, odolnost proti otiskům, absorpce nárazu a přilnavost hran. `; [ 'zoneLeft', 'zoneMid', 'zoneRight' ].forEach(function(id){ document .getElementById(id) .classList.remove('active'); }); let zoneId = 'zoneMid'; let message = '↑ VYZKOUŠEJTE PROSTŘEDNÍ ČÁST: CrystalUV Clear.'; if(f.id === 'hyperShield'){ zoneId = 'zoneLeft'; message = '← VYZKOUŠEJTE LEVOU ČÁST: HyperShield Clear 2× Armor.'; } else if(f.privacy){ zoneId = 'zoneRight'; message = '→ VYZKOUŠEJTE PRAVOU ČÁST: Privacy fólie.'; } else if(f.id === 'crystal'){ zoneId = 'zoneMid'; message = '↑ VYZKOUŠEJTE PROSTŘEDNÍ ČÁST: CrystalUV Clear.'; } else{ zoneId = 'zoneMid'; message = '↑ PRO POROVNÁNÍ VYZKOUŠEJTE PROSTŘEDNÍ ČÁST: CrystalUV Clear.'; } document .getElementById(zoneId) .classList.add('active'); document .getElementById('tryText') .textContent = message; itsfShow('result'); } function itsfRating(label,value,color){ return ` ${label} ${ [1,2,3,4,5].map(function(i){ return ` `; }).join('') } ${value}/5 `; } function itsfReasonText(f){ const reasons = []; if(answers.privacy === 'yes'){ reasons.push('vybrali jste soukromí'); } if(answers.use === 'impact'){ reasons.push('prioritou je ochrana proti nárazu'); } if(answers.use === 'clarity'){ reasons.push('prioritou je čistý a příjemný displej'); } if(answers.use === 'daily'){ reasons.push('hledáte univerzální řešení pro každý den'); } if(answers.priority === 'scratch'){ reasons.push('důležitá je odolnost proti poškrábání'); } if(answers.priority === 'touch'){ reasons.push('důležitá je hladkost posuvu'); } if(answers.priority === 'finger'){ reasons.push('důležité jsou otisky'); } if(answers.priority === 'edge'){ reasons.push('důležitá je přilnavost hran'); } if(!reasons.length){ return 'Tato volba nejlépe odpovídá vašim odpovědím.'; } return 'Tato volba nejlépe odpovídá tomu, že ' + reasons.join(', ') + '.'; } function itsfRestart(){ answers = {}; itsfShow('q1'); } /* Zabraňuje posouvání stránky pod průvodcem */ const itsfRoot = document.getElementById('itsmartfix-film-guide'); if(itsfRoot){ itsfRoot.addEventListener( 'touchmove', function(e){ if( e.target && e.target.closest && e.target.closest('button') ){ return; } e.preventDefault(); }, { passive:false } ); } /* DŮLEŽITÉ: Průvodce přesuneme přímo do BODY. Díky tomu není omezený šířkou ani výškou obsahového bloku stránky. */ (function(){ var guide = document.getElementById('itsmartfix-film-guide'); if(!guide){ return; } function mountGuide(){ try{ if(guide.parentNode !== document.body){ document.body.appendChild(guide); } document.documentElement.style.overflow = 'hidden'; document.body.style.overflow = 'hidden'; }catch(error){ /* nic */ } } if(document.readyState === 'loading'){ document.addEventListener( 'DOMContentLoaded', mountGuide, { once:true } ); }else{ mountGuide(); } })();

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