<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Image Requirements</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <style> :root { --ink:#000; --paper:#fff; --lime:#AFF44A; --lav:#D5B3FF; --mist:#F4F4F1; --rule:#E3E3DF; --muted:#5C5C58; } * { box-sizing: border-box; } html, body { margin:0; padding:0; background:var(--paper); } body { font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif; color:var(--ink); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; } .kb { max-width:920px; margin:0 auto; padding:40px 24px 64px; } p { margin:0 0 1em; } p:last-child { margin-bottom:0; } a { color:var(--ink); text-decoration-thickness:2px; text-underline-offset:3px; } a:hover { text-decoration-color:var(--lime); } code { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.92em; background:var(--mist); padding:2px 6px; border-radius:4px; } h1 { font-size:clamp(36px,5.6vw,56px); line-height:1.04; font-weight:800; letter-spacing:-.025em; margin:0 0 14px; } .intro { font-size:19px; line-height:1.45; max-width:32em; margin:0 0 30px; color:#2A2A28; } .hero { display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:clamp(24px,5%,48px); } .hero-copy { flex:3 1 280px; min-width:0; } .shot-wrap { flex:1 1 230px; min-width:210px; max-width:300px; } ol.specs { margin:0; padding:0; list-style:none; counter-reset:spec; } ol.specs li { counter-increment:spec; position:relative; padding:0 0 22px 50px; font-size:18px; } ol.specs li::before { content:counter(spec); position:absolute; left:0; top:1px; width:34px; height:34px; border-radius:50%; background:var(--lime); color:var(--ink); font-size:15px; font-weight:800; display:grid; place-items:center; } ol.specs li strong { display:block; font-weight:700; font-size:20px; line-height:1.3; margin:3px 0 4px; } ol.specs li span { color:#2A2A28; } ol.specs li:last-child { padding-bottom:0; } .note { background:var(--lav); border-radius:12px; padding:18px 22px; font-size:17px; font-weight:500; margin-top:32px; max-width:40em; } .note b { font-weight:700; } /* Device */ .shot { position:relative; padding:0 18px 0 16px; } .device { position:relative; background:#1A1A1A; border-radius:16px; padding:24px 11px 36px; box-shadow:inset 0 0 0 1px #3A3A3A; } .device .cam { position:absolute; top:9px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#050505; box-shadow:inset 0 0 0 1px #4A4A4A; } .screen { position:relative; width:100%; aspect-ratio:600/1024; background:#000; border-radius:3px; box-shadow:0 0 0 1px #3A3A3A; } .ui { position:absolute; inset:0; overflow:hidden; border-radius:3px; font-size:8px; color:#fff; } .ui > * { position:absolute; } .ov { position:absolute; inset:0; } .hl { position:absolute; border:2px solid var(--lime); border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.45); } .b { position:absolute; right:-14px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--lime); color:var(--ink); font-size:13px; font-weight:800; display:grid; place-items:center; box-shadow:0 0 0 2.5px var(--paper); z-index:2; } .b.left { right:auto; left:-14px; } .shot-caption { font-size:14px; color:var(--muted); margin-top:12px; padding:0 18px 0 16px; } /* Mockup bits */ .bg { inset:0; } .cap { text-transform:uppercase; letter-spacing:.08em; font-weight:600; } .ph { border:1px dashed rgba(255,255,255,.55); color:rgba(255,255,255,.85); display:grid; place-items:center; font-size:6.5px; letter-spacing:.12em; text-transform:uppercase; border-radius:2px; } .hbtn { left:14%; width:72%; height:11.5%; background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:space-between; padding:0 9%; font-size:8.5px; } .hbtn svg { width:11px; height:11px; } .card { background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.15); display:grid; place-items:center; text-align:center; padding:8%; } .card .in { border:1px solid rgba(255,255,255,.75); padding:10% 6%; width:100%; font-weight:300; letter-spacing:.14em; font-size:8px; line-height:1.7; } .card .in b { font-weight:700; display:block; } .nav { left:0; width:100%; text-align:center; font-size:9px; letter-spacing:.06em; font-weight:600; display:grid; place-items:center; } .pill { background:#7A8F4A; color:#fff; border-radius:999px; display:grid; place-items:center; font-size:6px; letter-spacing:.06em; font-weight:700; } .dot { border-radius:50%; background:#2b2b2b; width:9%; aspect-ratio:1; } .tab { font-size:7.5px; font-weight:500; letter-spacing:.03em; color:#8a8a8a; white-space:nowrap; display:flex; gap:9px; align-items:center; overflow:hidden; } .tab b { color:#fff; font-weight:600; } .item { background:#161616; border-radius:2px; } .hero-img { position:absolute; left:0; top:0; width:47%; height:100%; border-radius:2px 0 0 2px; } .iname { position:absolute; left:51%; top:6%; width:46%; font-size:7.5px; font-weight:500; letter-spacing:.02em; line-height:1.25; } .add { position:absolute; right:3%; bottom:8%; background:#fff; color:#111; font-size:6.5px; font-weight:600; padding:2px 6px; border-radius:2px; } .bnav { left:0; bottom:0; width:100%; height:11%; background:#1a1a1a; display:flex; justify-content:space-around; align-items:center; } .bnav div { display:grid; place-items:center; gap:2px; font-size:5.5px; color:#9a9a9a; } .bnav div i { width:9px; height:9px; border-radius:3px; background:#3a3a3a; display:block; } .bnav div.on { color:#fff; } .bnav div.on i { background:#fff; } /* Receipt */ .backdrop { background:#1A1A1A; border-radius:16px; padding:18px 14px; } .paper { background:#fff; border-radius:3px; padding:10px 9px 12px; box-shadow:0 6px 18px rgba(0,0,0,.35); } .rimg { position:relative; aspect-ratio:580/188; border:2px solid var(--lime); border-radius:3px; background:#F4F4F1; display:grid; place-items:center; color:#5C5C58; font-size:8px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; } .rimg .b { box-shadow:0 0 0 2.5px #fff; } .ln { height:5px; background:#E3E3DF; border-radius:2px; margin:6px 0; } .row { display:flex; justify-content:space-between; gap:12px; } .row .ln { flex:1 1 auto; } .row .ln.s { flex:0 0 22%; } .sep { border-top:1px dashed #D6D6D2; margin:9px 0; } @media (max-width:700px) { h1 { font-size:34px; } } /* ---------- Views (CSS-only navigation) ---------- */ .sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; } .view { display:none; } #ir-home:checked ~ .landing { display:block; } #ir-1:checked ~ #p1, #ir-2:checked ~ #p2, #ir-3:checked ~ #p3, #ir-4:checked ~ #p4, #ir-5:checked ~ #p5, #ir-6:checked ~ #p6 { display:block; } .back { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--ink); background:var(--mist); border-radius:999px; padding:8px 16px 8px 12px; cursor:pointer; margin-bottom:26px; border:2px solid var(--mist); } .back:hover, .back:focus-visible { border-color:var(--ink); } .back svg { width:14px; height:14px; } /* ---------- Card grid ---------- */ .grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; } @media (max-width:560px) { .grid { grid-template-columns:1fr; } } .card { display:flex; align-items:center; gap:18px; background:var(--mist); border:2px solid var(--mist); border-radius:16px; padding:18px 20px 18px 18px; color:var(--ink); min-height:132px; cursor:pointer; transition:border-color .15s ease, transform .15s ease; } .card:hover, .card:focus-visible { border-color:var(--ink); transform:translateY(-1px); } .card:hover .go { background:var(--lime); } @media (prefers-reduced-motion:reduce) { .card { transition:none; } .card:hover { transform:none; } } .card .txt { flex:1 1 auto; min-width:0; } .card h2 { margin:0 0 3px; font-size:20px; line-height:1.2; font-weight:700; letter-spacing:-.01em; } .card p { margin:0; font-size:14px; line-height:1.4; color:var(--muted); } .go { flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--paper); display:grid; place-items:center; transition:background .15s ease; } .go svg { width:14px; height:14px; } /* ---------- Tiny device thumbnails ---------- */ .thumb { flex:0 0 58px; width:58px; } .dev { background:#1A1A1A; border-radius:8px; padding:8px 4px 11px; box-shadow:inset 0 0 0 1px #3A3A3A; } .scr { position:relative; aspect-ratio:600/1024; background:#000; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px #3A3A3A; } .scr > * { position:absolute; } .k { border:1.5px solid var(--lime); border-radius:1px; } .tbar { left:14%; width:72%; height:11%; background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.2); } .pap { background:#fff; border-radius:2px; padding:4px 3px 5px; box-shadow:0 0 0 1px #3A3A3A; } .pap .k { display:block; height:13px; background:var(--mist); border-width:1.5px; } .pap .ln { height:2px; background:#DDDDD9; border-radius:1px; margin:3px 0; } </style> </head> <body> <div class="kb"> <input class="sr" type="radio" name="ir" id="ir-home" checked> <input class="sr" type="radio" name="ir" id="ir-1"> <input class="sr" type="radio" name="ir" id="ir-2"> <input class="sr" type="radio" name="ir" id="ir-3"> <input class="sr" type="radio" name="ir" id="ir-4"> <input class="sr" type="radio" name="ir" id="ir-5"> <input class="sr" type="radio" name="ir" id="ir-6"> <!-- ================= LANDING ================= --> <div class="view landing"> <h1>Image Requirements</h1> <p class="intro">Pick the screen you're designing for. Each page lists the exact sizes and limits for that spot.</p> <div class="grid"> <label class="card" for="ir-1" tabindex="0"> <div class="thumb"><div class="dev"><div class="scr"> <div style="inset:0;background:linear-gradient(165deg,#2f5a28,#183622 45%,#0a1410)"></div> <div class="k" style="left:27%;top:3%;width:46%;height:9%"></div> <div class="tbar" style="top:55%"></div><div class="tbar" style="top:69%"></div><div class="tbar" style="top:83%"></div> </div></div></div> <div class="txt"><h2>Home Screen</h2><p>Logo, background, and button rules</p></div> <span class="go"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span> </label> <label class="card" for="ir-2" tabindex="0"> <div class="thumb"><div class="dev"><div class="scr"> <div style="inset:0;background:#141414"></div> <div style="right:3%;top:3%;width:34%;height:6%;background:#7A8F4A;border-radius:99px"></div> <div style="left:30%;top:19%;width:40%;height:3%;background:#fff;border-radius:1px;opacity:.8"></div> <div class="k" style="left:2%;top:27%;width:96%;height:12%;background:#1c1c1c"></div> <div style="left:26%;top:41%;width:48%;height:3%;background:#fff;border-radius:1px;opacity:.8"></div> <div style="left:0;top:52%;width:100%;height:48%;background:linear-gradient(165deg,#2f5a28,#0a1410);opacity:.25"></div> </div></div></div> <div class="txt"><h2>Menu Navigation Dropdown</h2><p>Button label and color rules</p></div> <span class="go"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span> </label> <label class="card" for="ir-3" tabindex="0"> <div class="thumb"><div class="dev"><div class="scr"> <div style="inset:0;background:#0d0d0d"></div> <div style="left:3%;top:9%;width:94%;height:5%;background:#1e1e1e"></div> <div style="left:2%;top:21%;width:96%;height:18%;background:#161616"></div> <div class="k" style="left:2%;top:21%;width:46%;height:18%;background:linear-gradient(135deg,#6a4a2c,#c9944f)"></div> <div style="left:2%;top:41%;width:96%;height:18%;background:#161616"></div> <div style="left:2%;top:41%;width:46%;height:18%;background:linear-gradient(135deg,#3f5a3a,#9fb96a)"></div> <div style="left:2%;top:61%;width:96%;height:18%;background:#161616"></div> <div style="left:2%;top:61%;width:46%;height:18%;background:linear-gradient(135deg,#7a3b2f,#d98c5a)"></div> <div style="left:0;bottom:0;width:100%;height:11%;background:#1a1a1a"></div> </div></div></div> <div class="txt"><h2>Order Entry Screen</h2><p>Hero images, category labels, item names</p></div> <span class="go"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span> </label> <label class="card" for="ir-4" tabindex="0"> <div class="thumb"><div class="dev"><div class="scr"> <div style="inset:0;background:repeating-linear-gradient(-38deg,#2f8a5a 0 12%,#e9c53f 12% 24%,#3aa8a0 24% 36%,#f3e6b8 36% 48%,#e46a8a 48% 60%,#d9b13a 60% 72%,#7bb457 72% 84%,#2f8a5a 84% 100%)"></div> <div class="k" style="inset:2%"></div> </div></div></div> <div class="txt"><h2>Playlist (Ads)</h2><p>Full-screen images and videos</p></div> <span class="go"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span> </label> <label class="card" for="ir-5" tabindex="0"> <div class="thumb"><div class="dev"><div class="scr"> <div style="inset:0;background:radial-gradient(circle at 28% 18%,#5a2f24 0,rgba(0,0,0,0) 38%),radial-gradient(circle at 74% 72%,#2f4a22 0,rgba(0,0,0,0) 42%),#121212"></div> <div style="left:12%;top:21%;width:76%;height:37%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.55)"></div> <div class="tbar" style="left:12%;width:74%;top:84%;height:8.5%"></div> <div class="k" style="inset:2%"></div> </div></div></div> <div class="txt"><h2>eClub Screen</h2><p>Background image</p></div> <span class="go"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span> </label> <label class="card" for="ir-6" tabindex="0"> <div class="thumb"><div class="dev"><div class="pap"> <span class="k"></span> <div class="ln" style="width:70%"></div><div class="ln" style="width:85%"></div><div class="ln" style="width:60%"></div> <div class="ln" style="width:80%"></div><div class="ln" style="width:55%"></div><div class="ln" style="width:75%"></div> <div class="ln" style="width:45%"></div><div class="ln" style="width:65%"></div> <span class="k" style="margin-top:5px"></span> </div></div></div> <div class="txt"><h2>Receipts</h2><p>Header and footer images</p></div> <span class="go"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span> </label> </div> </div> <!-- ================= Image Requirements: Home Screen ================= --> <div class="view" id="p1"> <label class="back" for="ir-home" tabindex="0"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>All image requirements</label> <h1>Image Requirements: Home Screen</h1> <p class="intro">The first screen guests see when they pick up the tablet. Three parts of it are yours to customize.</p> <div class="hero"> <div class="hero-copy"> <ol class="specs"> <li><strong>Logo</strong><span>Must be 278 x 100 px.</span></li> <li><strong>Background</strong><span>Must be 600 x 1024 px.</span></li> <li><strong>Buttons</strong><span>Labels must be 20 characters or fewer. Button colors must be hex codes (e.g., #FFFFFF).</span></li> </ol> </div> <div class="shot-wrap" aria-hidden="true"> <div class="shot"> <div class="device"> <div class="cam"></div> <div class="screen"> <div class="ui"> <div class="bg" style="background:linear-gradient(165deg,#2f5a28 0%,#183622 40%,#0a1410 100%)"></div> <div class="ph" style="left:27%;top:2.2%;width:46%;height:8.8%">Your logo</div> <div class="card" style="left:8%;top:22%;width:84%;height:30%"><div class="in">Your<b>Tagline</b>Here</div></div> <div class="hbtn cap" style="top:55%">Join eClub <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div> <div class="hbtn cap" style="top:69%">Play Games <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div> <div class="hbtn cap" style="top:83%">View Menu <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div> </div> <div class="ov"> <div class="hl" style="left:1.2%;top:.8%;width:97.6%;height:98.4%"><span class="b">2</span></div> <div class="hl" style="left:27%;top:2.2%;width:46%;height:8.8%"><span class="b">1</span></div> <div class="hl" style="left:11%;top:53.3%;width:80%;height:43%"><span class="b">3</span></div> </div> </div> </div> </div> <p class="shot-caption">Numbered to match the specs.</p> </div> </div> </div> <!-- ================= Image Requirements: Menu Navigation Dropdown ================= --> <div class="view" id="p2"> <label class="back" for="ir-home" tabindex="0"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>All image requirements</label> <h1>Image Requirements: Menu Navigation Dropdown</h1> <p class="intro">The dropdown guests open from the top of the screen to jump between sections.</p> <div class="hero"> <div class="hero-copy"> <ol class="specs"> <li><strong>Buttons</strong><span>Labels must be 20 characters or fewer. Button colors must be hex codes (e.g., #FFFFFF).</span></li> </ol> </div> <div class="shot-wrap" aria-hidden="true"> <div class="shot"> <div class="device"> <div class="cam"></div> <div class="screen"> <div class="ui"> <div class="bg" style="background:#141414"></div> <svg style="left:5%;top:4%;width:6%;height:auto" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg> <div class="pill" style="right:2%;top:2.4%;width:34%;height:6.6%">CALL SERVER</div> <div style="left:0;top:13.4%;width:100%;border-top:1px solid #2c2c2c"></div> <div class="nav cap" style="top:17%;height:8%">eClub</div> <div class="nav cap" style="top:26%;height:12%;background:#1c1c1c">View Menu</div> <div class="nav cap" style="top:39%;height:8%">Play Games</div> <div style="left:0;top:50%;width:100%;height:50%;background:linear-gradient(165deg,#2f5a28,#0a1410);opacity:.28"></div> <div class="hbtn cap" style="top:55%;opacity:.35">Join eClub <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div> <div class="hbtn cap" style="top:69%;opacity:.35">Play Games <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div> <div class="hbtn cap" style="top:83%;opacity:.35">View Menu <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div> </div> <div class="ov"> <div class="hl" style="left:.8%;top:26%;width:98.4%;height:12%"><span class="b">1</span></div> </div> </div> </div> </div> <p class="shot-caption">Numbered to match the specs.</p> </div> </div> </div> <!-- ================= Image Requirements: Order Entry Screen ================= --> <div class="view" id="p3"> <label class="back" for="ir-home" tabindex="0"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>All image requirements</label> <h1>Image Requirements: Order Entry Screen</h1> <p class="intro">Where guests browse categories and add items to their order.</p> <div class="hero"> <div class="hero-copy"> <ol class="specs"> <li><strong>Hero images</strong><span>Must be 600 x 402 px.</span></li> <li><strong>Category labels</strong><span>Must be 15 characters or fewer.</span></li> <li><strong>Menu item names</strong><span>Must be 32 characters or fewer.</span></li> </ol> </div> <div class="shot-wrap" aria-hidden="true"> <div class="shot"> <div class="device"> <div class="cam"></div> <div class="screen"> <div class="ui"> <div class="bg" style="background:#0d0d0d"></div> <div class="ph" style="left:3%;top:1.8%;width:26%;height:5.2%;font-size:5.5px">Logo</div> <div class="dot" style="right:3%;top:1.6%;background:#2b2b2b"></div> <div class="dot" style="right:14%;top:1.6%"></div> <div class="dot" style="right:25%;top:1.6%"></div> <div class="tab" style="left:3%;top:9.4%;width:94%;height:5.4%"><b>APPS</b><span>STARTERS</span><span>PIZZAS</span><span>SWEETS</span><span>DRINKS</span></div> <div style="right:3%;top:9.4%;height:5.4%;display:grid;place-items:center;font-size:9px;color:#bbb;background:#0d0d0d;padding-left:6px">&middot;&middot;&middot;</div> <div class="cap" style="left:3%;top:16%;font-size:9px;font-weight:700;letter-spacing:.04em">Apps</div> <div class="item" style="left:2%;top:21.5%;width:96%;height:18%"> <div class="hero-img" style="background:linear-gradient(135deg,#6a4a2c,#c9944f)"></div> <div class="iname">Menu item name</div> <div class="add">Add</div> </div> <div class="item" style="left:2%;top:41%;width:96%;height:18%"> <div class="hero-img" style="background:linear-gradient(135deg,#3f5a3a,#9fb96a)"></div> <div class="iname">Menu item name</div> <div class="add">Add</div> </div> <div class="item" style="left:2%;top:60.5%;width:96%;height:18%"> <div class="hero-img" style="background:linear-gradient(135deg,#7a3b2f,#d98c5a)"></div> <div class="iname">Menu item name</div> <div class="add">Add</div> </div> <div class="item" style="left:2%;top:80%;width:96%;height:18%"> <div class="hero-img" style="background:linear-gradient(135deg,#4a4a5a,#9a9ab0)"></div> <div class="iname">Menu item name</div> <div class="add">Add</div> </div> <div class="bnav"><div><i></i>Home</div><div><i></i>Beer</div><div class="on"><i></i>Menu</div><div><i></i>Games</div><div><i></i>Pay</div></div> </div> <div class="ov"> <div class="hl" style="left:2%;top:21.5%;width:45%;height:18%"><span class="b left">1</span></div> <div class="hl" style="left:1%;top:8.8%;width:98%;height:6.6%"><span class="b">2</span></div> <div class="hl" style="left:50.5%;top:21.5%;width:47.5%;height:6.6%"><span class="b">3</span></div> </div> </div> </div> </div> <p class="shot-caption">Numbered to match the specs.</p> </div> </div> </div> <!-- ================= Image Requirements: Playlist (Ads) ================= --> <div class="view" id="p4"> <label class="back" for="ir-home" tabindex="0"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>All image requirements</label> <h1>Image Requirements: Playlist (Ads)</h1> <p class="intro">Full-screen promos that play in rotation on the tablet. Playlists can hold still images, videos, or a mix.</p> <div class="hero"> <div class="hero-copy"> <ol class="specs"> <li><strong>Static images</strong><span>Must be 600 x 1024 px.</span></li> <li><strong>Videos</strong><span>Must be 600 x 1024 px, in MP4 format.</span></li> </ol> <div class="note"><b>Adding a video?</b> There are a few more rules for frame rate, codec, and fast start. The <a href="https://help.ziosk.com/kb/guide/en/video-requirements-M5cBwWCeZ9/Steps/3591908" target="_top" rel="noopener">Video Requirements article</a> covers all of them.</div> </div> <div class="shot-wrap" aria-hidden="true"> <div class="shot"> <div class="device"> <div class="cam"></div> <div class="screen"> <div class="ui"> <div class="bg" style="background:repeating-linear-gradient(-38deg,#2f8a5a 0 12%,#e9c53f 12% 24%,#3aa8a0 24% 36%,#f3e6b8 36% 48%,#e46a8a 48% 60%,#d9b13a 60% 72%,#7bb457 72% 84%,#2f8a5a 84% 100%)"></div> <div style="left:10%;top:22%;width:80%;text-align:center;color:#fff;font-weight:800;font-size:17px;line-height:1.05;letter-spacing:-.01em;text-shadow:0 2px 6px rgba(0,0,0,.35)">YOUR PROMO<br>GOES HERE</div> <div style="left:10%;top:40%;width:80%;text-align:center;color:#fff;font-weight:500;font-size:7.5px;letter-spacing:.2em;text-shadow:0 1px 4px rgba(0,0,0,.35)">FULL SCREEN &middot; PORTRAIT</div> </div> <div class="ov"> <div class="hl" style="left:1.2%;top:.8%;width:97.6%;height:98.4%"><span class="b" style="top:44%">1</span><span class="b" style="top:56%">2</span></div> </div> </div> </div> </div> <p class="shot-caption">Numbered to match the specs.</p> </div> </div> </div> <!-- ================= Image Requirements: eClub Screen ================= --> <div class="view" id="p5"> <label class="back" for="ir-home" tabindex="0"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>All image requirements</label> <h1>Image Requirements: eClub Screen</h1> <p class="intro">The sign-up screen guests reach from the eClub button. The whole background is your image.</p> <div class="hero"> <div class="hero-copy"> <ol class="specs"> <li><strong>Background image</strong><span>Must be 600 x 1024 px.</span></li> </ol> </div> <div class="shot-wrap" aria-hidden="true"> <div class="shot"> <div class="device"> <div class="cam"></div> <div class="screen"> <div class="ui"> <div class="bg" style="background:radial-gradient(circle at 28% 18%,#5a2f24 0,rgba(0,0,0,0) 38%),radial-gradient(circle at 74% 72%,#2f4a22 0,rgba(0,0,0,0) 42%),#121212"></div> <svg style="left:5%;top:3.6%;width:6%;height:auto" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg> <div class="cap" style="left:0;top:3.4%;width:100%;text-align:center;font-size:8.5px;font-weight:700">eClub</div> <div style="left:26%;top:9.4%;width:48%;height:.5%;background:#3a3a3a;border-radius:2px"></div> <div style="left:26%;top:9.4%;width:12%;height:.5%;background:#fff;border-radius:2px"></div> <div class="card" style="left:12%;top:21%;width:76%;height:37%;padding:6%"><div class="in" style="text-align:left;letter-spacing:.06em;line-height:1.5;padding:9% 8%"><b style="font-size:10px;letter-spacing:.1em;line-height:1.25;margin-bottom:6px">Sign up for our eClub</b>Join now to hear about events, seasonal menus, and more.</div></div> <div class="hbtn cap" style="left:12%;width:74%;top:84%;height:8.5%">Sign me up <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></div> </div> <div class="ov"> <div class="hl" style="left:1.2%;top:.8%;width:97.6%;height:98.4%"><span class="b">1</span></div> </div> </div> </div> </div> <p class="shot-caption">Numbered to match the specs.</p> </div> </div> </div> <!-- ================= Image Requirements: Receipts ================= --> <div class="view" id="p6"> <label class="back" for="ir-home" tabindex="0"><svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>All image requirements</label> <h1>Image Requirements: Receipts</h1> <p class="intro">Printed receipts can carry your branding at the top and the bottom.</p> <div class="hero"> <div class="hero-copy"> <ol class="specs"> <li><strong>Header image</strong><span>Must be 580 x 188 px.</span></li> <li><strong>Footer image</strong><span>Must be 580 x 188 px.</span></li> </ol> </div> <div class="shot-wrap" aria-hidden="true"> <div class="shot"> <div class="backdrop"> <div class="paper"> <div class="rimg">Header image<span class="b">1</span></div> <div class="row" style="margin-top:9px"><div class="ln" style="max-width:40%"></div><div class="ln s"></div></div> <div class="row"><div class="ln" style="max-width:45%"></div><div class="ln s" style="visibility:hidden"></div></div> <div class="sep"></div> <div class="row"><div class="ln" style="max-width:55%"></div><div class="ln s"></div></div> <div class="row"><div class="ln" style="max-width:65%"></div><div class="ln s" style="visibility:hidden"></div></div> <div class="row"><div class="ln" style="max-width:50%"></div><div class="ln s"></div></div> <div class="row"><div class="ln" style="max-width:62%"></div><div class="ln s" style="visibility:hidden"></div></div> <div class="sep"></div> <div class="row"><div class="ln" style="max-width:34%"></div><div class="ln s"></div></div> <div class="row"><div class="ln" style="max-width:28%"></div><div class="ln s"></div></div> <div class="row"><div class="ln" style="max-width:26%"></div><div class="ln s"></div></div> <div class="sep"></div> <div class="row"><div class="ln" style="max-width:40%"></div><div class="ln s"></div></div> <div class="rimg" style="margin-top:12px">Footer image<span class="b">2</span></div> </div> </div> </div> <p class="shot-caption">Numbered to match the specs.</p> </div> </div> </div> </div> <script> // Keyboard support for the card and back buttons (Enter or Space). Everything else works without JS. document.querySelectorAll('label[for^="ir-"]').forEach(function (l) { l.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); l.click(); } }); }); </script> </body> </html>