# WRAPD poradce

Interaktivní WRAPD poradce vám pomůže vybrat ochrannou fólii podle vašich priorit – čistý obraz, hladký dotyk, minimum otisků, ochrana při pádu nebo privacy.

## Obsah článku

#wrapd-app{ --bg:#eef3f6; --panel:#ffffff; --line:#d5e1e7; --text:#172630; --muted:#657783; --blue:#159bd7; --green:#15966a; --gold:#e7a928; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; color:var(--text); background: radial-gradient( circle at 85% 5%, rgba(88,201,255,.12), transparent 30% ), linear-gradient( 180deg, #f5f8fa 0%, #eaf0f4 100% ); border-radius:20px; overflow:hidden; margin:20px 0; } #wrapd-app *{ box-sizing:border-box; } .wrapd{ max-width:1180px; margin:auto; padding:18px; } /* ========================================= HERO ========================================= */ .w-hero{ padding:30px 22px; background: linear-gradient( 135deg, #ffffff 0%, #eef7fb 100% ); border:1px solid #d5e2e9; border-radius:18px; box-shadow: 0 8px 25px rgba(30,60,75,.06); } .w-eye{ font-size:11px; color:#159bd7; font-weight:800; text-transform:uppercase; letter-spacing:.12em; } .w-hero h2{ margin:8px 0 10px; color:#172630 !important; font-size:clamp(30px,5vw,50px); line-height:1; } .w-hero p{ margin:0; color:#61737e; line-height:1.55; font-size:15px; max-width:760px; } /* ========================================= LAYOUT ========================================= */ .w-layout{ display:grid; grid-template-columns: 390px minmax(0,1fr); gap:14px; margin-top:14px; } .w-box{ background:#ffffff; border:1px solid #d7e2e8; border-radius:16px; padding:18px; box-shadow: 0 6px 20px rgba(25,50,65,.05); } .w-box h3{ font-size:17px; color:#172630 !important; margin:0 0 7px; } .w-help{ font-size:12px; line-height:1.45; color:#71828c; margin:0 0 15px; } /* ========================================= VOLBY ========================================= */ .w-options{ display:grid; grid-template-columns: 1fr 1fr; gap:9px; } .w-option{ position:relative; min-height:72px; border:1px solid #cfdde4; background:#f8fafb; color:#172630; border-radius:14px; padding: 10px 9px 10px 76px; font-size:14px; line-height:1.25; font-weight:750; cursor:pointer; text-align:left; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease; } .w-option:hover{ border-color:#8bcbe8; background:#f1f8fb; } .w-option:active{ transform:scale(.985); } .w-option.active{ border-color:#159bd7; background:#e8f7fd; box-shadow: inset 0 0 0 1px rgba(21,155,215,.25), 0 3px 10px rgba(21,155,215,.08); } /* ========================================= CHECKBOX ========================================= */ .w-option .check{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:27px; height:27px; border:1px solid #8da8b6; border-radius:6px; display:grid; place-items:center; font-size:15px; font-weight:900; color:transparent; background:#ffffff; z-index:2; } .w-option.active .check{ background:#159bd7; border-color:#159bd7; color:#ffffff; } /* ========================================= JEDNODUCHÉ IKONY ========================================= */ .w-option .icon{ position:absolute; left:46px; top:50%; transform:translateY(-50%); width:23px; height:30px; display:flex; align-items:center; justify-content:center; color:#1a6f92; font-size:20px; line-height:1; font-weight:700; z-index:1; } /* ========================================= RESET ========================================= */ .w-reset{ width:100%; min-height:48px; margin-top:10px; border:1px solid #d2dfe6; background:#f6f8f9; color:#526570; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer; transition:.15s ease; } .w-reset:hover{ background:#eef4f7; border-color:#aebfc9; } /* ========================================= VÝSLEDEK ========================================= */ .w-result-head{ display:flex; justify-content:space-between; align-items:end; gap:10px; margin-bottom:10px; } .w-result-head h3{ font-size:23px; color:#172630 !important; margin:0; } .w-muted{ font-size:11px; color:#738590; text-align:right; } /* ========================================= DOPORUČENÁ FÓLIE ========================================= */ .w-best{ border:1px solid #56bde5; background: linear-gradient( 145deg, #f7fcfe 0%, #edf8fc 100% ); border-radius:15px; padding:17px; box-shadow: 0 8px 25px rgba(30,100,130,.08); } .w-besttop{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap:12px; } .w-label{ font-size:10px; color:#159bd7; text-transform:uppercase; letter-spacing:.1em; font-weight:800; } .w-name{ font-size:27px; font-weight:900; line-height:1.15; color:#172630; margin:5px 0; } .w-price{ font-size:20px; font-weight:850; color:#172630; margin-top:6px; } .w-meta{ font-size:12px; color:#71828c; margin-top:4px; } .w-score{ text-align:right; } .w-score strong{ font-size:35px; color:#159bd7; } .w-score span{ display:block; font-size:10px; color:#71828c; } .w-explain{ font-size:14px; line-height:1.5; color:#40545f; margin:13px 0 0; } /* ========================================= PILLS ========================================= */ .w-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .w-pill{ border:1px solid #cfe0e7; background:#ffffff; color:#40545f; border-radius:999px; padding:6px 9px; font-size:10px; } .w-pill:before{ content:"✓ "; color:#15966a; } /* ========================================= METRIKY ========================================= */ .w-metrics{ display:grid; grid-template-columns: repeat(5,1fr); gap:6px; margin-top:13px; } .w-metric{ border:1px solid #d5e1e7; background:#ffffff; border-radius:9px; padding:8px; } .w-metric b{ font-size:9px; line-height:1.2; display:block; min-height:24px; color:#344a56; } .w-stars{ color:#e7a928; font-size:12px; letter-spacing:.4px; white-space:nowrap; } /* ========================================= CTA ========================================= */ .w-cta{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:14px; } .w-cta a{ display:block; text-decoration:none; text-align:center; padding:14px 10px; border-radius:10px; font-size:14px; font-weight:850; } .w-call{ background: linear-gradient( 90deg, #b83f3b, #d15c56 ); color:#ffffff !important; } /* ========================================= ALTERNATIVY ========================================= */ .w-alts-title{ font-size:12px; color:#526570; text-transform:uppercase; letter-spacing:.06em; margin:16px 0 7px; } .w-alts{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; } .w-alt{ border:1px solid #d5e1e7; background:#f8fafb; border-radius:12px; padding:13px; } .w-alt .rank{ font-size:10px; color:#7b8b94; text-transform:uppercase; } .w-alt strong{ display:block; font-size:16px; line-height:1.25; color:#172630; margin-top:4px; } .w-alt .price{ font-size:13px; font-weight:800; color:#172630; margin-top:5px; } .w-alt .desc{ font-size:11px; color:#71828c; line-height:1.45; margin-top:6px; } /* ========================================= DETAIL ========================================= */ .w-all{ margin-top:12px; } .w-all > details{ border:1px solid #d5e1e7; background:#f8fafb; border-radius:11px; padding:0 10px; } .w-all details details{ border:1px solid #d5e1e7; background:#ffffff; border-radius:9px; margin:7px 0; padding:0 10px; } .w-all summary{ cursor:pointer; padding:12px 2px; font-size:12px; font-weight:800; color:#344a56; } .w-note{ font-size:11px; color:#71828c; line-height:1.5; padding:2px 2px 10px; } /* ========================================= TABLET ========================================= */ @media(max-width:900px){ .w-layout{ grid-template-columns:1fr; } } /* ========================================= MOBIL ========================================= */ @media(max-width:600px){ #wrapd-app{ border-radius:14px; } .wrapd{ padding:10px; } .w-hero{ padding:22px 15px; } .w-hero h2{ font-size:36px; } .w-options{ grid-template-columns:1fr 1fr; } .w-option{ min-height:70px; padding-left:72px; font-size:13px; } .w-result-head{ display:block; } .w-muted{ text-align:left; margin-top:4px; } .w-besttop{ grid-template-columns:1fr; } .w-score{ text-align:left; margin-top:7px; } .w-score strong{ font-size:31px; } .w-metrics{ grid-template-columns:1fr 1fr; } .w-alts{ grid-template-columns:1fr; } } /* ========================================= MALÝ TELEFON ========================================= */ @media(max-width:380px){ .w-options{ grid-template-columns:1fr; } .w-metrics{ grid-template-columns:1fr; } } ITSmartFix · WRAPD Najděte svou WRAPD fólii Vyberte, co je pro vás nejdůležitější. Můžete zvolit více vlastností a poradce vám doporučí fólii, která nejlépe odpovídá vašim požadavkům. Co od fólie očekáváte? Vyberte jednu nebo více možností. Opětovným kliknutím výběr zrušíte. Zrušit všechny volby Nejlepší shoda pro vás Výsledek se přepočítává okamžitě (function(){ "use strict"; /* ========================================= 4 FÓLIE ========================================= */ var F=[ { name:"WRAPD HyperFilm Clear", price:499, tech:"EPU", thickness:180, s:5, w:3, f:4, i:3, e:3, clear:true, matte:false, privacy:false, uv:false, curved:false, selfheal:true, description: "Univerzální čirá fólie s vysokou odolností proti poškrábání a self-healing efektem." }, { name:"WRAPD Crystal UV Clear", price:699, tech:"UV PET", thickness:180, s:2, w:4, f:4, i:3, e:5, clear:true, matte:false, privacy:false, uv:true, curved:true, selfheal:false, description: "Čirá UV fólie se sklovitým pocitem a velmi dobrým držením hran. Vhodná také pro zakřivené displeje." }, { name:"WRAPD HyperShield Clear", price:799, tech:"EPU", thickness:280, s:5, w:4, f:4, i:5, e:2, clear:true, matte:false, privacy:false, uv:false, curved:false, selfheal:true, description: "Zesílená fólie pro zákazníky, kteří chtějí především maximální ochranu při nárazu." }, { name:"WRAPD Crystal UV Matte Privacy", price:899, tech:"UV PET", thickness:250, s:3, w:5, f:5, i:4, e:5, clear:false, matte:true, privacy:true, uv:true, curved:true, selfheal:false, description: "Matná UV Privacy fólie kombinující soukromí, hladký dotyk a velmi dobré držení hran." } ]; /* ========================================= VLASTNOSTI BEZ EMOJI ========================================= */ var OPTIONS=[ [ "impact", "◆", "Maximální ochrana" ], [ "clearImage", "✦", "Čistý obraz" ], [ "smooth", "↗", "Hladký dotyk" ], [ "fingerprint", "●", "Minimum otisků" ], [ "scratch", "◆", "Odolnost proti škrábancům" ], [ "matte", "◉", "Matný displej" ], [ "privacy", "▣", "Soukromí / Privacy" ], [ "curved", "▱", "Zakřivený displej" ], [ "selfheal", "↻", "Samooprava drobných stop" ], [ "uv", "◇", "UV aplikace" ] ]; var active={}; var container= document.getElementById( "w-options" ); /* ========================================= VYTVOŘENÍ TLAČÍTEK ========================================= */ OPTIONS.forEach(function(o){ var button= document.createElement( "button" ); button.type="button"; button.className="w-option"; button.innerHTML= '✓'+ ''+ o[1]+ ''+ ''+ o[2]+ ''; button.addEventListener( "click", function(){ active[o[0]]= !active[o[0]]; button.classList.toggle( "active", active[o[0]] ); render(); } ); container.appendChild( button ); }); /* ========================================= VÝPOČET ========================================= */ function score(f){ var selected=0; var total=0; var reasons=[]; /* MAXIMÁLNÍ OCHRANA */ if(active.impact){ selected+=1.5; total+= (f.i/5)*1.5; if(f.i>=5){ reasons.push( "Maximální ochrana" ); } } /* ČISTÝ OBRAZ */ if(active.clearImage){ selected+=1; if(f.clear){ total+=1; reasons.push( "Čirý obraz" ); }else{ total+=0.2; } } /* HLADKÝ DOTYK */ if(active.smooth){ selected+=1; total+= f.w/5; if(f.w>=5){ reasons.push( "Velmi hladký dotyk" ); } } /* MINIMUM OTISKŮ */ if(active.fingerprint){ selected+=1; total+= f.f/5; if(f.f>=5){ reasons.push( "Minimum otisků" ); } } /* ŠKRÁBANCE */ if(active.scratch){ selected+=1; total+= f.s/5; if(f.s>=5){ reasons.push( "Vysoká odolnost proti škrábancům" ); } } /* MATNÝ POVRCH */ if(active.matte){ selected+=1.3; if(f.matte){ total+=1.3; reasons.push( "Matný povrch" ); } } /* PRIVACY */ if(active.privacy){ selected+=1.4; if(f.privacy){ total+=1.4; reasons.push( "Privacy" ); } } /* ZAKŘIVENÝ DISPLEJ */ if(active.curved){ selected+=1.2; if(f.curved){ total+=1.2; reasons.push( "Vhodná pro zakřivený displej" ); }else{ total+=0.35; } } /* SELF HEALING */ if(active.selfheal){ selected+=1; if(f.selfheal){ total+=1; reasons.push( "Self-healing" ); }else{ total+=0.15; } } /* UV */ if(active.uv){ selected+=1; if(f.uv){ total+=1; reasons.push( "UV aplikace" ); } } if(selected===0){ return{ score:0.5, reasons:[] }; } return{ score: total/selected, reasons: reasons }; } /* ========================================= HVĚZDIČKY ========================================= */ function stars(n){ return( "★".repeat(n)+ "☆".repeat(5-n) ); } /* ========================================= METRIKY ========================================= */ function metrics(f){ var m=[ [ "Škrábance", f.s ], [ "Hladkost", f.w ], [ "Otisky", f.f ], [ "Náraz", f.i ], [ "Hrany", f.e ] ]; return( ''+ m.map(function(x){ return( ''+ ''+ x[0]+ ''+ ''+ stars(x[1])+ ''+ '' ); }).join("")+ '' ); } /* ========================================= POPIS ========================================= */ function reasonText(f){ if( f.name.indexOf( "HyperShield" )>=0 ){ return( "Nejvhodnější volba, pokud je pro vás prioritou co nejvyšší ochrana displeje při nárazu." ); } if( f.name.indexOf( "Crystal UV Matte Privacy" )>=0 ){ return( "Vhodná kombinace pro ty, kteří chtějí matný povrch, soukromí, hladký dotyk a UV fólii." ); } if( f.name.indexOf( "Crystal UV Clear" )>=0 ){ return( "Čirá UV fólie se sklovitým pocitem. Hodí se také pro zakřivené displeje." ); } return( "Univerzální čirá fólie pro každodenní používání s vysokou odolností proti poškrábání a self-healing efektem." ); } /* ========================================= VYKRESLENÍ ========================================= */ function render(){ var rows=[]; F.forEach(function(f){ var s= score(f); rows.push({ film:f, score: s.score, reasons: s.reasons }); }); rows.sort( function(a,b){ return( b.score-a.score ); } ); var best= rows[0]; var f= best.film; var activeCount= Object.keys(active) .filter(function(k){ return active[k]; }) .length; var explanation= activeCount===0 ? "Vyberte vlastnosti, které jsou pro vás důležité. Potom vám poradce doporučí nejvhodnější fólii." : reasonText(f); var pills=""; best.reasons.forEach( function(r){ pills+= ''+ r+ ''; } ); var html= ''+ ''+ ''+ ''+ "Nejlepší shoda pro vás"+ ''+ ''+ f.name+ ''+ ''+ f.price+ " Kč"+ ''+ ''+ f.tech+ " · "+ f.thickness+ " μm"+ ''+ ''+ ''+ ''+ Math.round( best.score*100 )+ '%'+ ''+ ''+ "shoda"+ ''+ ''+ ''+ ''+ explanation+ ''+ ( pills ? ''+ pills+ '' : '' )+ metrics(f)+ ''+ ''+ "Chci tuto fólii"+ ''+ ''+ ''; /* ALTERNATIVY */ var alternatives= rows.slice(1,3); if(alternatives.length){ html+= ''+ "Další možnosti"+ ''+ ''+ alternatives.map( function(a,i){ return( ''+ ''+ "Alternativa "+ (i+1)+ ''+ ''+ a.film.name+ ''+ ''+ a.film.price+ " Kč"+ ''+ ''+ a.film.description+ ''+ '' ); } ).join("")+ ''; } /* TECHNICKÉ SROVNÁNÍ */ html+= ''+ ''+ ''+ "Zobrazit technické srovnání všech 4 fólií"+ ''; F.forEach(function(f){ html+= ''+ ''+ f.name+ " · "+ f.price+ " Kč"+ ''+ ''+ f.description+ ''+ ''+ f.tech+ " · "+ f.thickness+ " μm"+ ''+ ''+ metrics(f)+ ''; }); html+= ''+ ''; document.getElementById( "w-result" ).innerHTML=html; } /* ========================================= RESET ========================================= */ document.getElementById( "w-reset" ).addEventListener( "click", function(){ active={}; document .querySelectorAll( "#w-options .w-option" ) .forEach(function(button){ button.classList.remove( "active" ); }); render(); } ); /* ========================================= START ========================================= */ render(); })();

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