SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the "easy" version of the Design2Code testset here Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information.
6379
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 /* cyrillic-ext */6@font-face {7 font-family: 'Open Sans';8 font-style: normal;9 font-weight: 400;10 font-stretch: 100%;11 font-display: swap;12 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format('woff2');13 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;14}15/* cyrillic */16@font-face {17 font-family: 'Open Sans';18 font-style: normal;19 font-weight: 400;20 font-stretch: 100%;21 font-display: swap;22 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');23 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;24}25/* greek-ext */26@font-face {27 font-family: 'Open Sans';28 font-style: normal;29 font-weight: 400;30 font-stretch: 100%;31 font-display: swap;32 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');33 unicode-range: U+1F00-1FFF;34}35/* greek */36@font-face {37 font-family: 'Open Sans';38 font-style: normal;39 font-weight: 400;40 font-stretch: 100%;41 font-display: swap;42 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');43 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;44}45/* hebrew */46@font-face {47 font-family: 'Open Sans';48 font-style: normal;49 font-weight: 400;50 font-stretch: 100%;51 font-display: swap;52 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');53 unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;54}55/* math */56@font-face {57 font-family: 'Open Sans';58 font-style: normal;59 font-weight: 400;60 font-stretch: 100%;61 font-display: swap;62 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTVOmu1aB.woff2) format('woff2');63 unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0330, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2034-2037, U+2057, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2102, U+210A-210E, U+2110-2112, U+2115, U+2119-211D, U+2124, U+2128, U+212C-212D, U+212F-2131, U+2133-2138, U+213C-2140, U+2145-2149, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B6, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;64}65/* symbols */66@font-face {67 font-family: 'Open Sans';68 font-style: normal;69 font-weight: 400;70 font-stretch: 100%;71 font-display: swap;72 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTUGmu1aB.woff2) format('woff2');73 unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8B1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FB00-1FBFF;74}75/* vietnamese */76@font-face {77 font-family: 'Open Sans';78 font-style: normal;79 font-weight: 400;80 font-stretch: 100%;81 font-display: swap;82 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');83 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;84}85/* latin-ext */86@font-face {87 font-family: 'Open Sans';88 font-style: normal;89 font-weight: 400;90 font-stretch: 100%;91 font-display: swap;92 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');93 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;94}95/* latin */96@font-face {97 font-family: 'Open Sans';98 font-style: normal;99 font-weight: 400;100 font-stretch: 100%;101 font-display: swap;102 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');103 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;104}105/* cyrillic-ext */106@font-face {107 font-family: 'Open Sans';108 font-style: normal;109 font-weight: 600;110 font-stretch: 100%;111 font-display: swap;112 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format('woff2');113 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;114}115/* cyrillic */116@font-face {117 font-family: 'Open Sans';118 font-style: normal;119 font-weight: 600;120 font-stretch: 100%;121 font-display: swap;122 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');123 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;124}125/* greek-ext */126@font-face {127 font-family: 'Open Sans';128 font-style: normal;129 font-weight: 600;130 font-stretch: 100%;131 font-display: swap;132 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');133 unicode-range: U+1F00-1FFF;134}135/* greek */136@font-face {137 font-family: 'Open Sans';138 font-style: normal;139 font-weight: 600;140 font-stretch: 100%;141 font-display: swap;142 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');143 unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;144}145/* hebrew */146@font-face {147 font-family: 'Open Sans';148 font-style: normal;149 font-weight: 600;150 font-stretch: 100%;151 font-display: swap;152 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');153 unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;154}155/* math */156@font-face {157 font-family: 'Open Sans';158 font-style: normal;159 font-weight: 600;160 font-stretch: 100%;161 font-display: swap;162 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTVOmu1aB.woff2) format('woff2');163 unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0330, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2034-2037, U+2057, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2102, U+210A-210E, U+2110-2112, U+2115, U+2119-211D, U+2124, U+2128, U+212C-212D, U+212F-2131, U+2133-2138, U+213C-2140, U+2145-2149, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B6, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;164}165/* symbols */166@font-face {167 font-family: 'Open Sans';168 font-style: normal;169 font-weight: 600;170 font-stretch: 100%;171 font-display: swap;172 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTUGmu1aB.woff2) format('woff2');173 unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8B1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5, U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FB00-1FBFF;174}175/* vietnamese */176@font-face {177 font-family: 'Open Sans';178 font-style: normal;179 font-weight: 600;180 font-stretch: 100%;181 font-display: swap;182 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');183 unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;184}185/* latin-ext */186@font-face {187 font-family: 'Open Sans';188 font-style: normal;189 font-weight: 600;190 font-stretch: 100%;191 font-display: swap;192 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');193 unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;194}195/* latin */196@font-face {197 font-family: 'Open Sans';198 font-style: normal;199 font-weight: 600;200 font-stretch: 100%;201 font-display: swap;202 src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');203 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;204}205 206 207 208[data-sba-theme]{--dhue: 0;--dsat: 0%;--link-hue: 206;--shadow-light-color: hsl(49, 96%, 50%, 0.35);--shadow-dark-color: hsl(49, 96%, 50%, 0.7);--highlight-text-color: hsl(0, 0%, 0%)}[data-sba-theme=light]{--highlight-bg-color: #f7db22;--text-color: #000;--site-text-color: rgba(0, 0, 0, 0.9);--body-bg-color: #fff;--modal-bg-color: rgba(255, 255, 255, 0.85);--border-color: #dbdbdb;--area-bg-color: #e6e6e6;--invalid-color: #adadad;--menu-hover-color: #f5f5f5;--head-row-bg-color: #f5f5f5;--card-color: rgba(247, 219, 34, 0.1);--link-color: hsl(var(--link-hue), 45%, 38%);--link-visited-color: hsl(var(--link-hue), 45%, 53%);--link-hover-color: hsl(var(--link-hue), 45%, 53%);--success-color: #2ca61c}[data-sba-theme=dark]{--highlight-bg-color: #facd05;--text-color: hsl(var(--dhue), var(--dsat), 85%);--site-text-color: hsl(var(--dhue), var(--dsat), 100%, 0.9);--body-bg-color: hsl(var(--dhue), var(--dsat), 7%);--modal-bg-color: hsl(var(--dhue), var(--dsat), 7%, 0.85);--border-color: hsl(var(--dhue), var(--dsat), 20%);--area-bg-color: hsl(var(--dhue), var(--dsat), 22%);--invalid-color: hsl(var(--dhue), var(--dsat), 50%);--menu-hover-color: hsl(var(--dhue), var(--dsat), 22%);--head-row-bg-color: hsl(var(--dhue), var(--dsat), 13%);--card-color: hsl(var(--dhue), var(--dsat), 22%);--link-color: hsl(var(--link-hue), 90%, 64%);--link-visited-color: hsl(var(--link-hue), 90%, 76%);--link-hover-color: hsl(var(--link-hue), 90%, 76%);--success-color: #64f651}html{line-height:1.15;text-size-adjust:100%;font-size:62.5%;box-sizing:border-box;--card-gap: 1.8rem}*,*:before,*:after{box-sizing:inherit}body{margin:0;font-size:1.6rem;line-height:1.6;font-family:"Open Sans",sans-serif;background:var(--body-bg-color);color:var(--site-text-color)}h1{margin:0;flex-grow:2}h2{margin:2.2rem 0 1rem;font-size:2rem}h3,#mobile-installation h4{margin:0 0 .8rem;font-size:1.7rem}p,ul,ol{margin:0 0 1rem}.rgt{text-align:right}:target{scroll-margin-top:12rem;background:var(--highlight-bg-color)}img{height:auto;box-sizing:content-box}a{background-color:transparent;color:var(--link-color)}a:hover{text-decoration:none;color:var(--link-hover-color)}a:visited{color:var(--link-visited-color)}.emoji{font-weight:bolder;font-size:1.8rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}[aria-hidden=true]{display:none}main.wrapper{padding:12rem 0 3rem 0}main img{max-width:100%;display:block;background-color:var(--body-bg-color);border:.1rem solid var(--border-color);border-radius:.8rem}main img.store-icon{border-radius:.2rem;margin-bottom:.6rem;width:14rem}main img.store-icon.bookmarklet{cursor:move}main img.start-up-img{max-width:none}main .hive-box{shape-outside:circle(55% at 42% 44%);padding:1.5rem 4rem 4rem 0;float:left;position:static;border:none;max-width:60%}main .hive-box svg{width:20rem;max-width:100%}.card-listing{display:grid;justify-content:space-between;grid-template-columns:repeat(2, 1fr);column-gap:var(--card-gap);font-size:1.5rem;line-height:1.5}.card{display:flex;justify-content:space-between;flex-direction:column;gap:var(--card-gap);line-height:1.5;padding:var(--card-gap);margin-bottom:var(--card-gap);background:var(--card-color);border-width:.1rem;border-color:var(--border-color);border-style:solid;border-radius:.9rem}.card.row{flex-direction:row}.card.row img{max-width:none}.card img{margin-bottom:var(--card-gap)}.card article{padding:0 .5rem}.card .main-panel b{font-size:1.4rem}.card ul{margin:0 0 1rem 0;padding:0;list-style:none}::selection{background:var(--highlight-bg-color)}.legacy-browser .legacy{font-weight:bold;color:#b22222}.legacy-browser .modern{display:none}.modern-browser .legacy{display:none}header{position:fixed;border-bottom:1px solid var(--border-color);width:100%;padding:2rem 0;top:0;z-index:10;color:var(--site-text-color);background-color:#f9df6f}header .wrapper{display:flex;justify-content:space-between;align-items:center}header ul{padding:1.5rem 0 0 0;margin:0;list-style:none;display:flex;gap:.5rem}header ul .twitter,header ul .kofi{top:-0.4rem;background:var(--link-color)}header ul .twitter span,header ul .kofi span{display:inline-block}header ul .twitter svg,header ul .kofi svg{fill:#fff;margin-right:.5rem;width:1.5rem}header ul .twitter a,header ul .kofi a{display:flex;padding:.3rem .7rem;line-height:1;font-size:1.4rem;color:currentColor;text-decoration:none;align-items:center;color:#fff}header ul svg{width:2.2rem;height:2.2rem;display:inline-block;z-index:0;margin-right:1rem}#logo{margin-right:2rem}.wrapper{margin:0 auto;width:103.4rem;max-width:calc(100vw - 2.5rem);padding:0;position:relative}.intro{display:flex;align-items:flex-start;padding-top:3rem}.intro .intro-text{flex-grow:2;margin-right:2rem}.intro .intro-text p:first-of-type{padding-top:1.2rem}.install-source{display:flex;flex-direction:column}figure{margin:0;padding:0}figure.bookmarklet{display:inline-block}figure.bookmarklet~figcaption{display:block;text-align:left}figcaption{font-size:1.2rem;padding:.3rem 0 .6rem 0}.comment{font-size:93%}pre{white-space:pre-wrap;padding:1rem;display:block;width:100%;min-height:3rem;color:var(--site-text-color);font:1.5rem Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace}.help{cursor:help}textarea.card{min-height:10rem;padding-bottom:1.1rem}.text-part h3{margin:2rem 0 .8rem}#requirement-chart{margin-bottom:1.5rem}#requirement-chart svg{display:inline-block;width:1.2rem;height:1.2rem;fill:var(--success-color);position:relative;top:.2rem;margin:0 .2rem}#requirement-chart figcaption{text-align:left}table{border-width:.1rem;border-color:var(--border-color);border-style:solid;border-radius:.9rem;border-collapse:collapse;border-spacing:0;max-width:100%;table-layout:fixed}th{font-weight:bold}th:not(:first-of-type){overflow:hidden;text-overflow:ellipsis}th:first-of-type{width:8rem}th,td{border:1px solid var(--border-color);text-align:left;padding:.2rem .4rem;font-size:1.3rem;white-space:nowrap}tr:nth-child(n+1) td:nth-child(n+2){text-align:center}:is(#features,#installation,#mobile-installation)>ul{list-style:none;padding:0;margin:0}.main-panel>ul{margin:0 0 1rem 0;padding:0 0 0 2.5rem;list-style:disc}.action-button{display:inline-block;border:none;font:inherit;cursor:pointer;transition:background 250ms ease-in-out,transform 150ms ease;border-radius:.5rem;position:relative}.action-button a{color:currentColor}.action-button:hover,.action-button:focus{background:var(--link-hover-color)}.action-button:focus{outline:1px solid #fff;outline-offset:-4px}.action-button:active{transform:scale(0.99)}#copy-bm{padding:1rem 2rem;line-height:1;background:var(--link-color);color:var(--head-row-bg-color)}#copy-bm.success::after{position:absolute;content:"✔";color:var(--success-color);top:.4rem;right:-3rem;font-size:2.5rem}#btt{position:fixed;width:100vw;bottom:.5rem}#btt .wrapper{justify-content:flex-end;display:flex;width:111.4rem}#btt svg{width:4rem;aspect-ratio:1/1;display:block}@media screen and (max-width: 1160px){#btt .wrapper{max-width:calc(100vw - 4.5rem)}}@media screen and (max-width: 990px){.intro .intro-text p:first-of-type{padding-top:0}}@media screen and (max-width: 860px){.card{display:block}.card.row{flex-direction:column;padding-top:var(--card-gap)}.card.row img{max-width:100%}}@media screen and (max-width: 550px){header h1{font-size:1.8rem}header ul .twitter span,header ul .kofi span{overflow:hidden;white-space:nowrap;max-width:60px;text-overflow:ellipsis}}@media screen and (max-width: 768px){.desktop-only{display:none}.intro{display:block}}@media screen and (max-width: 700px){html{--card-gap: 1rem}body{font-size:1.4rem}.card-listing{display:block}.card-listing .row{padding-top:calc(2*var(--card-gap))}h1{font-size:2.2rem}.card{min-height:auto;padding-bottom:1.1rem}.card.panel{display:flex;flex-direction:row}.card.panel img{max-width:none}.card figure{min-height:auto}.card ul{clear:left}#logo{margin-right:1rem;width:3.6rem}}@media screen and (max-width: 468px){table{width:100%}header ul .twitter,header ul .kofi{border-radius:50%}header ul .twitter span,header ul .kofi span{display:none}header ul .twitter svg,header ul .kofi svg{margin:0}.card.panel{display:block}.card.panel img{max-width:100%}}@media screen and (max-width: 4px){header .wrapper{display:flex;justify-content:flex-start;align-items:start;min-height:5rem}header ul{position:absolute;right:0;top:2.5rem}}/*# sourceMappingURL=site.css.map */209 </style>210 <meta charset="utf-8">211 <title>212 Spelling Bee Assistant213 </title>214 <meta content="Spelling Bee Assistant is an add-on for Spelling Bee, the New York Times’ popular word puzzle. Features Dark Mode, Grid, First Letter, Letter Count, Bingo, Perfect Pangram" name="description">215 <meta content="width=device-width, initial-scale=1" name="viewport">216 <meta content="Spelling Bee Assistant" property="og:title">217 <meta content="Spelling Bee Assistant is an add-on for Spelling Bee, the New York Times’ popular word puzzle" property="og:description">218 <meta content="" property="og:image">219 <meta content="" property="og:url">220 <meta content="Spelling Bee Assistant" property="og:site_name">221 <meta content="summary_large_image" name="twitter:card">222 <meta content="@d_raber" name="twitter:site">223 <meta content="" name="twitter:image">224 <meta content="Spelling Bee Assistant" name="twitter:image:alt">225 <meta content="7vZlJKBsl3KZZRbJV474IyxJMXg64TYzSpAAoxO74-8" name="google-site-verification">226 <meta content="JdtUYs7m2sn0OLvWbE-xp0xxsluoRnMFJDmgzUiSKb0" name="google-site-verification">227 <meta content="#f9df6f" name="theme-color">228 </head>229 <body data-sba-theme="light">230 <header>231 <div class="wrapper">232 <img alt="Spelling Bee Assistant" height="72" id="logo" src="rick.jpg" width="72">233 <h1>234 Spelling Bee Assistant235 </h1>236 <ul class="social">237 <li class="kofi action-button">238 <a rel="noopener" target="_blank">239 <span>240 Buy me a coffee241 </span>242 </a>243 </li>244 </ul>245 </div>246 </header>247 <main class="wrapper">248 <section class="intro">249 <div class="intro-text">250 <figure class="hive-box">251 </figure>252 <p>253 <strong>254 Spelling Bee Assistant255 </strong>256 is an add-on for257 <a rel="noopener" target="_blank">258 Spelling259 Bee260 </a>261 , the New York Times’ popular word puzzle. It’s packed with262 <a>263 features264 </a>265 that will boost your playing experience.266 </p>267 <p>268 Follow your progress, see what lies ahead of you and if you want to, get a hint or two.269 Eventually, when you run out of ideas, reveal today’s answers - no more waiting until the next270 day!271 </p>272 <p>273 Spelling Bee Assistant is a great improvement for this excellent game and it won’t spoil the fun. Promised!274 </p>275 </div>276 <div class="desktop-only">277 <figure>278 <img alt="Spelling Bee Assistant" class="start-up-img desktop-only" height="216" src="rick.jpg" width="157">279 </figure>280 </div>281 </section>282 <section id="installation">283 <h2>284 Installation285 </h2>286 <p>287 By installing this software you agree to the terms of the288 <a target="_blank">289 GNU General Public License v3.0290 </a>291 .292 </p>293 <ul class="card-listing">294 <li class="card row">295 <ul class="install-source">296 <li>297 <a rel="noopener" target="_blank">298 <img alt="Spelling Bee Assistant from the Chrome Web Store" class="store-icon chrome" height="46" src="rick.jpg" width="160">299 </a>300 </li>301 <li>302 <a rel="noopener" target="_blank">303 <img alt="Get Spelling Bee Assistant from Edge Add-ons" class="store-icon edge" height="46" src="rick.jpg" width="160">304 </a>305 </li>306 </ul>307 <article>308 <h3>309 Browser extension310 </h3>311 <p>312 The browser extension loads the assistant along with the313 <a rel="noopener" target="_blank">314 Spelling315 Bee316 </a>317 website. It is available for318 <a rel="noopener" target="_blank">319 Chrome320 </a>321 and322 <a rel="noopener" target="_blank">323 Edge324 </a>325 .326 </p>327 </article>328 </li>329 <li class="card row">330 <ul class="install-source">331 <li>332 <a class="installer" onclick="return false" rel="nofollow">333 <img alt="Spelling Bee Assistant" class="bookmarklet store-icon" height="46" src="rick.jpg" width="160">334 </a>335 </li>336 </ul>337 <article>338 <h3>339 Bookmarklet340 </h3>341 <p>342 Alternatively, you can launch the assistant via a343 <a class="help">344 bookmarklet345 </a>346 . 347 To set it up, simply drag the amber badge to your browser's bookmarks bar.348 </p>349 </article>350 </li>351 </ul>352 <ul>353 <li>354 <a>355 Can I install Spelling Bee Assistant on a mobile device356 </a>357 ?358 </li>359 <li>360 <a>361 Which data does Spelling Bee Assistant access?362 </a>363 </li>364 </ul>365 </section>366 <section id="features">367 <h2>368 Feature Overview369 </h2>370 <ul class="card-listing">371 <li class="card row panel">372 <figure>373 <img alt="Spelling Bee Assistant" height="511" src="rick.jpg" width="158">374 </figure>375 <article class="main-panel">376 <h3>377 The main panel378 </h3>379 <p>380 All tools in the main panel work in the same fashion; they show you how381 many items you’ve found so far (382 <b>383 ✓384 </b>385 ), how many are still in the pot (386 <b>387 ?388 </b>389 )390 and the sum thereof (391 <b>392 ∑393 </b>394 ).395 </p>396 <ul>397 <li>398 <strong>399 Score400 </strong>401 represents your all-over progress for both, words and points.402 </li>403 <li>404 <strong>405 Letter count406 </strong>407 groups the terms by word length.408 </li>409 <li>410 <strong>411 First letter412 </strong>413 groups them by their first letter.414 </li>415 <li>416 <strong>417 First two letters418 </strong>419 is similar, but obviously, it's more revealing.420 </li>421 </ul>422 <p>423 Greyed out lines indicate that all terms in a row have been found.424 </p>425 </article>426 </li>427 <li class="card row panel">428 <figure>429 <img alt="Assistant Menu" height="550" src="rick.jpg" width="177">430 </figure>431 <article>432 <h3>433 The Assistant menu434 </h3>435 <p>436 <strong>437 Show Assistant438 </strong>439 lets you show or hide the main panel.440 <strong>441 Score442 </strong>443 ,444 <strong>445 Letter count446 </strong>447 ,448 <strong>449 First letter450 </strong>451 ,452 <strong>453 First two454 letters455 </strong>456 and457 <strong>458 Pangrams459 </strong>460 do the same for each section.461 </p>462 <p>463 The464 <strong>465 <a>466 Progress Bar467 </a>468 </strong>469 is a visual indicator of your all-over progress.470 </p>471 <p>472 The473 <strong>474 <a>475 Grid476 </a>477 </strong>478 is a matrix grouping the terms by first letter and word length.479 </p>480 <p>481 <strong>482 <a>483 Spill the beans484 </a>485 </strong>486 validates your answer while you type.487 </p>488 <p>489 <strong>490 <a>491 Dark Mode492 </a>493 </strong>494 and495 <strong>496 <a>497 Dark Mode Colors498 </a>499 </strong>500 provide a configurable dark color scheme.501 </p>502 <p>503 <strong>504 <a>505 Your Progress506 </a>507 </strong>508 explains in detail what you already achieved.509 </p>510 <p>511 <strong>512 <a>513 Community514 </a>515 </strong>516 shows how to connect to like-minded517 <em>518 hiveminds519 </em>520 .521 </p>522 <p>523 <strong>524 <a>525 Today’s Answers526 </a>527 </strong>528 should be the last resort.529 </p>530 <p>531 Use the532 <strong>533 <a rel="noopener" target="_blank">534 Buy me a coffee535 </a>536 </strong>537 link if you want to show some appreciation...538 </p>539 </article>540 </li>541 <li class="card" id="fe-progress">542 <figure>543 <img alt="Progress Bar" height="243" src="rick.jpg" width="468">544 </figure>545 <article>546 <p>547 The548 <strong>549 Progress Bar550 </strong>551 displays your advancement based on your points so far. You can click on it552 to reveal the more detailed553 <strong>554 Your Progress555 </strong>556 screen.557 </p>558 </article>559 </li>560 <li class="card" id="fe-spill">561 <figure>562 <img alt="Spill the Beans" height="243" src="rick.jpg" width="468">563 </figure>564 <article>565 <p>566 With every letter you type, the567 <strong>568 Spill the beans569 </strong>570 emoji reveals whether you’re on the right track or571 barking up the wrong tree.572 </p>573 </article>574 </li>575 </ul>576 </section>577 <div class="text-part">578 <section>579 <h2 id="requirements">580 System requirements581 </h2>582 <p>583 Spelling Bee Assistant requires a modern web browser in a recent version. Below is a chart with Browser/OS combinations that are known to be working:584 </p>585 <figure id="requirement-chart">586 <table>587 <thead>588 <tr>589 <th>590 Browser591 </th>592 <th>593 Windows594 </th>595 <th>596 MacOS597 </th>598 <th>599 Ubuntu600 </th>601 <th>602 Android603 </th>604 <th>605 iOS606 </th>607 </tr>608 </thead>609 <tbody>610 <tr>611 <td>612 Blink ¹613 <sup>614 |615 </sup>616 ²617 </td>618 <td class="win-10">619 </td>620 <td class="mac-os">621 </td>622 <td class="linux">623 </td>624 <td class="android">625 ²626 </td>627 <td class="ios">628 ?629 </td>630 </tr>631 <tr>632 <td>633 WebKit ³634 <sup>635 |636 </sup>637 ⁴638 </td>639 <td class="win-10">640 n/a641 </td>642 <td class="mac-os">643 ³644 </td>645 <td class="linux">646 ⁴647 </td>648 <td class="android">649 n/a650 </td>651 <td class="ios">652 ³653 </td>654 </tr>655 </tbody>656 </table>657 <figcaption>658 <ol>659 <li>660 Chrome, Edge, Brave, Vivaldi…661 </li>662 <li>663 Kiwi664 </li>665 <li>666 Safari667 </li>668 <li>669 Gnome Web670 </li>671 </ol>672 Browser extension | Bookmarklet673 </figcaption>674 </figure>675 <div id="mobile-installation">676 <p>677 To install it on mobile devices, follow the instructions below.678 </p>679 <p>680 <em class="comment">681 Thanks to682 <a>683 [Name Redacted]684 </a>685 for contributing the iOS instructions and hosting the shortcut.686 </em>687 </p>688 <ul class="card-listing">689 <li class="card" id="kiwi-install">690 <article>691 <h4>692 Android: Use the extension with693 <a rel="noopener" target="_blank">694 Kiwi695 </a>696 </h4>697 <ol>698 <li>699 Download700 <a rel="noopener" target="_blank">701 Kiwi Browser702 </a>703 from the Google Play Store.704 </li>705 <li>706 Open Kiwi and navigate to the Spelling Bee Assistant’s707 <a rel="noopener" target="_blank">708 page on the Chrome Web Store709 </a>710 .711 </li>712 <li>713 Select714 <em>715 Add to Chrome716 </em>717 to install the extension.718 </li>719 <li>720 Review the security warning that appears; if acceptable, confirm by tapping721 <em>722 OK723 </em>724 .725 </li>726 </ol>727 <p>728 The extension will now be active whenever you visit the Spelling Bee game on Kiwi, enhancing your gameplay729 experience.730 </p>731 </article>732 </li>733 <li class="card" id="safari-install">734 <article>735 <h4>736 iOS / iPadOS: Use a shortcut on Safari737 </h4>738 <ol>739 <li>740 Open the Settings app. Navigate to741 <em>742 Shortcuts > Advanced743 </em>744 and enable745 <em>746 Allow747 Running Scripts748 </em>749 to let shortcuts run scripts like those of Spelling Bee Assistant.750 </li>751 <li>752 Access the shortcut by opening753 <a>754 this link755 </a>756 . Tap757 <em>758 Get759 Shortcut760 </em>761 and then762 <em>763 Add764 </em>765 .766 </li>767 <li>768 To use the shortcut, open769 <a rel="noopener" target="_blank">770 Spelling Bee771 </a>772 in Safari and access the Share menu. Find and run773 <em>774 SB Assistant775 </em>776 .777 </li>778 <li>779 Upon first run, a security warning appears. If you agree, tap780 <em>781 Allow782 </em>783 .784 </li>785 </ol>786 <p>787 To keep it handy, pin788 <em>789 SB Assistant790 </em>791 to the top of your share sheet by tapping792 <em>793 Edit Actions…794 </em>795 and selecting796 the green plus next to the797 <em>798 SB Assistant799 </em>800 action.801 </p>802 </article>803 </li>804 </ul>805 </div>806 </section>807 <section>808 <h2>809 Doesn’t it spoil the game?810 </h2>811 <p>812 I try to keep Spelling Bee Assistant as subtle and unobstrusive as possible. Judging from user feedback as well my own experience, this concept works out just fine.813 </p>814 <p>815 The challenge stays the same and so does the fun. But now you have a set of little helpers at hand when you’re stuck in a corner.816 </p>817 </section>818 <section>819 <h2 id="bookmarklet">820 What is a bookmarklet?821 </h2>822 <div>823 <figure class="bookmarklet">824 <img alt="Bookmarklet" height="98" src="rick.jpg" width="499">825 </figure>826 <figcaption>827 Regular bookmarks along with the Spelling Bee Assistant828 </figcaption>829 </div>830 <p>831 Bookmarklets are small pieces of code that can enhance the functionality of a website. They reside,832 just833 like regular bookmarks, in your browser’s bookmark menu.834 </p>835 </section>836 <section id="contact">837 <h2>838 I discovered a bug | I’d like to give feedback839 </h2>840 <p>841 You can report bugs or request features842 <a>843 at GitHub844 </a>845 . Keep in mind that this846 is a847 fun weekend project and I don’t want it to be a burden. I might work on issues from time to time,848 but I can’t make any promises.849 </p>850 <p>851 You can also find me at852 <a rel="noopener" target="_blank">853 [Link Redacted]854 </a>855 where I regularly post the latest updates under the handle856 <a rel="noopener" target="_blank">857 spellingBeeAssistant858 </a>859 .860 </p>861 </section>862 <section>863 <h2>864 Is the NYT behind this or are you affiliated with the NYT?865 </h2>866 <p>867 No, no affiliation whatsover. They know that Spelling Bee Assistant exists and rumor has it that some of them are even users...868 </p>869 </section>870 <section id="privacy">871 <h2>872 Your privacy873 </h2>874 <p>875 This website does not employ any technology to collect personally identifiable information about its visitors.876 Both the site and the associated bookmarklet are hosted on GitHub Pages. For details on the data GitHub Pages877 collects, please consult878 <a rel="noopener" target="_blank">879 their privacy policy.880 </a>881 Regardless, I have no access to the data collected by GitHub.882 </p>883 <p id="privacy-stores">884 Regarding the browser extension associated with this site: When installing the extension from a browser 885 add-on store, you might see a message stating,886 <em>887 "This extension can read and change your data 888 on www.nytimes.com [...]"889 </em>890 , or something similar. Such messages can understandably lead to 891 privacy concerns. However, the extension is designed solely to read data from the Spelling Bee game; 892 it does not access, modify, or submit any personal information.893 </p>894 <p>895 Although most896 <a>897 add-on stores898 </a>899 offer download statistics, these are typically 900 aggregated by country and do not include any personally identifiable information.901 </p>902 </section>903 <section>904 <h2>905 Spelling Bee Assistant on GitHub906 </h2>907 <ul>908 <li>909 <a rel="noopener" target="_blank">910 Repository911 </a>912 </li>913 <li>914 <a rel="noopener" target="_blank">915 Releases916 </a>917 </li>918 <li>919 <a rel="noopener" target="_blank">920 Issues921 </a>922 </li>923 <li>924 <a rel="noopener" target="_blank">925 Pull926 Requests927 </a>928 </li>929 </ul>930 </section>931 </div>932 </main>933 <div id="btt">934 <div class="wrapper">935 <a title="Back to top">936 </a>937 </div>938 </div>939 </body>940</html>941