SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing 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 dataset in the huggingface format 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. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html class="js" lang="en">3 <head>4 <style>5 /**6 * Demo styles7 * Styling specific to the content and wrapping8 * elements of each styled form control,9 */10html,11body {12 background: #fcfcfc;13 font-family: arial;14 font-size: 100%;15 margin: 0;16 padding: 0;17}18 19*,20*:before,21*:after {22 box-sizing: border-box;23}24 25body {26 line-height: 1.4;27}28 29a {30 color: #08599B;31 font-weight: bold;32}33 34h4, h5 {35 font-size: 1.05em;36 line-height: 1.2;37}38 39h2, h3, h4, h5, h6 {40 margin-top: 2em;41}42 43main {44 padding-top: .75em;45}46 47.demo > header {48 border-bottom: 1px solid #aaa;49}50 51a:hover,52a:focus {53 box-shadow: none;54 outline: 2px solid;55 outline-offset: 2px;56 text-decoration: none;57}58 59pre {60 background: #fdfdfd;61 border: 1px solid #ccc;62 max-width: 100%;63 overflow: auto;64 padding: .5em;65}66 67hr {68 margin: 1.5em 0;69}70 71.demo-wrap {72 background: #fff;73 border-left: 1px solid #eee;74 border-right: 1px solid #eee;75 margin: 0 auto;76 max-width: 660px;77 padding: 0 1.5em 3em;78 overflow-x: hidden;79}80 81.demo-wrap__header {82 background: #1a2a1a;83 color: #fefefe;84 margin: -1em -1.5em 0;85 padding: 3em 1.5em 2em;86 position: relative;87}88 89.demo-wrap__header a {90 color: #fff;91}92 93.demo-wrap__header__title {94 font-size: 1.3em;95 margin-bottom: .5em;96 margin-top: .5em;97}98 99.demo-details {100 margin-top: 3em101}102 103.demo-details > h3:first-of-type {104 margin-top: 0;105}106 107/* IE + Edge need this to treat as a block element */108details {109 display: block;110}111 112p code {113 white-space: nowrap;114}115 116 117.progress-meter-example {118 margin-bottom: 2em;119}120 121.progress-meter-example label:after {122 content: "";123 display: block;124}125 126 127 128/**129 * Shared styling among the different form controls.130 * Much of these styles are pulled from normalize.css.131 * Use as necessary within your own style sheets.132 */133 134input,135button,136textarea,137select {138 border-radius: 0; /* may change, but start consistently */139 box-sizing: border-box;140 font-family: inherit;141 font-size: inherit;142 font-weight: inherit;143 line-height: normal;144 margin: 0;145 overflow: visible; /* show overflow in Edge */146 text-transform: none; /* remove inheritance Edge, Firefox, IE */147}148 149/**150 * Remove the Clear button added by MS browsers151 */152input::-ms-clear {153 display: none;154 height: 0;155 width: 0;156}157 158/**159 * Style for disabled text fields160 */161input:not([type])[disabled], input[type=text][disabled], textarea[disabled] {162 opacity: .625;163}164 165/**166 * <button> Focus Normalization:167 * remove FireFox specific inner focus styles.168 * focus style will be reapplied later.169 */170button::-moz-focus-inner {171 border-style: none;172 padding: 0;173}174 175 176/**177 * 1. Correct color inheritance in IE178 * 2. Correct the text wrapping in Edge and IE179 */180legend {181 color: inherit; /* 1 */182 display: table; /* 2 */183 line-height: normal;184 max-width: 100%; /* 2 */185 white-space: normal; /* 2 */186}187 188 189 190/** --------------------------------------------------------------------191 192 ARIA Switch On / Off button193 194 These styles have not been formatted to work with a195 checkbox that has been modified into a role=switch, and196 presently require a parent / child relationship, rather than197 a sibling relationship as a "checkbox + element" would provide.198 199--------------------------------------------------------------------- */200 201.on-off-switch {202 align-items: center;203 color: #111;204 cursor: default;205 display: flex;206 font-weight: normal;207 justify-content: space-between;208}209 210/* hover/focus is applied to the span within instead */211.on-off-switch:hover,212.on-off-switch:focus {213 outline: 0;214}215 216.on-off-switch span {217 background: #eaeaea;218 border-radius: 2px;219 border: 1px solid;220 display: inline-block;221 outline-offset: 0px;222 outline: 0px solid;223 padding: .25rem;224 pointer-events: none;225 position: relative;226}227 228.on-off-switch span:before,229.on-off-switch span:after {230 border-radius: 2px;231 color: #4a4a4a;232 display: inline-block;233 min-width: 5ch;234 text-align: center;235}236 237.on-off-switch span:before {238 content: "Off";239}240 241.on-off-switch span:after {242 content: "On";243}244 245.on-off-switch[disabled] span:before,246.on-off-switch[disabled] span:after,247.on-off-switch[aria-disabled="true"] span:before,248.on-off-switch[aria-disabled="true"] span:after {249 opacity: .65;250 pointer-events: none;251}252 253.on-off-switch:not([data-keep-disabled]):hover span,254.on-off-switch:not([data-keep-disabled]):focus span {255 background: #fff;256 outline: 2px solid #2196f3;257 outline-offset: 2px;258}259 260.on-off-switch[aria-checked="false"] span:before,261.on-off-switch[aria-checked="true"] span:after {262 color: #fff;263 margin: 0;264}265 266.on-off-switch[aria-checked="false"] span:before {267 background: #222;268 outline: 1px solid #222;269}270.on-off-switch[aria-checked="true"] span:after {271 background: green;272 outline: 1px solid green;273}274 275 276 277/** --------------------------------------------------------------------278 279 ARIA Switch Toggle Button280 281--------------------------------------------------------------------- */282.switch-toggle {283 background: none;284 border: none;285 cursor: default;286 display: block;287 font-size: inherit;288 line-height: 1;289 margin: 1em 0 0;290 padding: .5em 0;291 position: relative;292 text-align: left;293 transition: box-shadow .2s ease-in-out;294 width: 100%;295}296 297.switch-toggle:focus {298 outline: none;299}300 301/* negate 'flash' of text color when pressing a button in some browsers */302.switch-toggle:active {303 color: inherit;304}305 306/* using the before/after pseudo elements of the span to create the "switch" */307.switch-toggle span:before,308.switch-toggle span:after {309 border: 1px solid #565656;310 content: "";311 position: absolute;312 top: 50%;313 transform: translateY(-50%);314}315 316/* styling specific to the knob of the switch */317.switch-toggle span:after {318 background: #fff;319 border-radius: 100%;320 height: 1.5em;321 right: 1.5em;322 transition: right .1825s ease-in-out;323 width: 1.5em;324}325 326/* styling specific to the knob "container" */327.switch-toggle span:before {328 background: #eee;329 border-radius: 1.75em;330 height: 1.75em;331 right: .25em;332 transition: background .2s ease-in-out;333 width: 2.75em;334}335 336.switch-toggle span {337 pointer-events: none;338}339 340 341.switch-toggle:not([data-keep-disabled]):hover span:before,342.switch-toggle:not([data-keep-disabled]):focus span:before {343 outline: 2px solid #2196f3;344 outline-offset: 2px;345}346 347/* change the position of the knob to indicate it has been checked*/348.switch-toggle[aria-checked="true"] span:after {349 right: .25em;350}351 352/* update the color of the "container" to further visually indicate state */353.switch-toggle[aria-checked="true"] span:before {354 background: #2196f3;355}356 357.switch-toggle[disabled] span,358.switch-toggle[aria-disabled="true"] span {359 opacity: .65;360}361 362/**363 * Toggle switch modifications for displaying On/Off labels364 */365.switch-toggle .show-labels:before {366 content: "Off";367 color: rgba(10, 10, 10, 1);368 line-height: 1.6;369 text-indent: 1.625em;370 width: 3.5em;371}372 373.switch-toggle[aria-checked="false"] .show-labels:after {374 right: 2.2em;375}376 377.switch-toggle[aria-checked="true"] .show-labels:before {378 color: rgba(255 ,255 ,255 ,1);379 content: "On";380 text-indent: .25em;381 text-shadow: 0 0 1px #000;382}383 384@media screen and (-ms-high-contrast: active) {385 .switch-toggle span:after {386 background-color: windowText;387 }388}389 390 391 392/* containing label */393.check-switch {394 display: block;395 overflow: hidden;396 padding: .5em 0;397 position: relative;398}399 400/* using the before/after pseudo elements of the span to create the "switch" */401.check-switch span:before,402.check-switch span:after {403 border: 1px solid #565656;404 content: "";405 position: absolute;406 top: 50%;407 transform: translateY(-50%);408}409 410/* styling specific to the knob of the switch */411.check-switch span:after {412 background: #fff;413 border-radius: 100%;414 height: 1.5em;415 right: 1.5em;416 transition: right .1825s ease-in-out;417 width: 1.5em;418}419 420/* styling specific to the knob "container" */421.check-switch span:before {422 background: #eee;423 border-radius: 1.75em;424 height: 1.75em;425 right: .25em;426 transition: background .2s ease-in-out;427 width: 2.75em;428}429 430/* hide the actual checkbox from view, but not from keyboards or ATs.431 Instead of standard visually hidden styling, instead set opacity to432 to 0 and set to full height/width of container element so that VO focus433 ring outlines the component, instead of a tiny box within the component.434 This will also allow for the checkbox input to be discovered if someone435 were to search by touch.436*/437.check-switch input {438 height: 100%;439 left: 0;440 opacity: 0;441 position: absolute;442 top: 0;443 width: 100%;444}445 446.check-switch input:disabled + span,447.check-switch input[aria-disabled="true"] + span {448 opacity: .65;449}450 451 452.check-switch:hover input:not([data-keep-disabled]) + span:before,453.check-switch input:not([data-keep-disabled]):focus + span:before {454 outline: 2px solid #2196f3;455 outline-offset: 2px;456}457 458 459/* change the position of the knob to indicate it has been checked*/460.check-switch input:checked + span:after {461 right: .25em;462}463 464/* update the color of the "container" to further visually indicate state */465.check-switch input:checked + span:before {466 background: #2196f3;467}468 469/* 'color in' the switch knob in high contrast mode by giving it470 a large border */471@media screen and (-ms-high-contrast: active) {472 .check-switch span:after {473 background-color: windowText;474 }475}476 </style>477 <meta charset="utf-8">478 <title>479 ARIA Switch Controls480 </title>481 <meta content="width=device-width, initial-scale=1" name="viewport">482 </head>483 <body id="body">484 <div class="demo-wrap" id="page">485 <header class="demo-wrap__header">486 <p class="demo-wrap__header__title">487 Accessible Styled Form Controls488 </p>489 <nav>490 <a>491 See source on GitHub492 </a>493 ,494 <a>495 Index of styled form controls496 </a>497 </nav>498 </header>499 <main aria-label="Content">500 <div class="demo">501 <div>502 <h1>503 <abbr title="Accessible Rich Internet Applications">504 ARIA505 </abbr>506 Switch Demos507 </h1>508 <p>509 Published:510 <span>511 March 20, 2017512 </span>513 </p>514 <p>515 Last updated:516 <span>517 January 23, 2022518 </span>519 </p>520 </div>521 <h2>522 Pattern Demos523 </h2>524 <p>525 <code>526 <button>527 </code>528 base529 </p>530 <button aria-checked="false" class="switch-toggle" data-switch data-switch-labels role="switch" type="button">531 Enable dark mode532 <span aria-hidden="true" class="show-labels">533 </span>534 </button>535 <p>536 <code>537 <span>538 </code>539 base540 </p>541 <span aria-checked="false" class="switch-toggle" data-switch role="switch" tabindex="0">542 Enable dark mode (no visible state labels)543 <span aria-hidden="true">544 </span>545 </span>546 <p>547 <code>548 <input type=checkbox>549 </code>550 base551 </p>552 <label class="check-switch">553 <input data-keep-disabled data-switch disabled role="switch" type="checkbox">554 Enable dark mode (disabled example)555 <span aria-hidden="true">556 </span>557 </label>558 <p>559 <code>560 <div>561 </code>562 base563 </p>564 <div aria-checked="false" class="on-off-switch" data-switch id="enabler" role="switch" tabindex="0">565 Enable the next switch566 <span aria-hidden="true">567 </span>568 </div>569 <p>570 <code>571 <a>572 </code>573 base574 </p>575 <a aria-checked="false" aria-disabled="true" class="on-off-switch" data-keep-disabled data-switch id="target" role="switch" tabindex="-1">576 Enable something else577 <span aria-hidden="true">578 </span>579 </a>580 <section class="demo-details">581 <h3>582 Pattern Details583 </h3>584 <details>585 <summary>586 Pattern Markup (before script runs)587 </summary>588 <pre><code><button data-switch589 type="button"590 class="switch-toggle"591 data-switch-labels592 disabled593>594 Dark mode595</button>596 597<span data-switch class="switch-toggle" hidden>598 Dark mode (no visible state labels)599</span>600 601<label class="check-switch">602 <input type="checkbox" data-switch data-keep-disabled disabled>603 Enable dark mode604</label>605 606<div class="on-off-switch" data-switch id="enabler" hidden>607 Enable the next switch608</div>609 610<a id="target"611 612 data-keep-disabled613 aria-disabled="true"614 class="on-off-switch"615 data-switch616>617 Enable something else618</a></code></pre>619 </details>620 <details>621 <summary>622 Pattern Markup (after script runs)623 </summary>624 <pre><code><button data-switch 625 type="button"626 class="switch-toggle" 627 data-switch-labels 628 role="switch" 629 aria-checked="false"630>631 Dark mode632 <span aria-hidden="true" class="show-labels"></span>633</button>634 635 636<span data-switch 637 class="switch-toggle" 638 role="switch" 639 tabindex="0" 640 aria-checked="false"641>642 Dark mode (no visible state labels)643 <span aria-hidden="true"></span>644</span>645 646 647<label class="check-switch">648 <input type="checkbox" 649 data-switch 650 data-keep-disabled 651 disabled 652 role="switch"653 >654 Enable dark mode655 <span aria-hidden="true"></span>656</label>657 658 659<div class="on-off-switch" 660 data-switch 661 id="enabler" 662 role="switch"663 tabindex="0" 664 aria-checked="false"665>666 Enable the next switch667 <span aria-hidden="true"></span>668</div>669 670 671<a id="target" 672 data-keep-disabled 673 aria-disabled="true" 674 class="on-off-switch" 675 data-switch 676 role="switch" 677 tabindex="-1" 678 aria-checked="false"679>680 Enable something else681 <span aria-hidden="true"></span>682</a></code></pre>683 </details>684 <p>685 A switch is meant to function similarly to a checkbox or toggle button, but assistive technologies are meant to announce it in a manner that is consistent with its on-screen appearance as an on/off sort of UI component.686 </p>687 <p>688 This particular pattern uses a689 <code>690 <button>691 </code>692 as the base element that is then modified into a693 <code>694 role="switch"695 </code>696 with JavaScript. When a697 <code>698 <button>699 </code>700 is modified to be exposed as a701 <code>702 switch703 </code>704 , the705 <code>706 aria-checked707 </code>708 attribute needs to be added, and managed, to appropriately convey the current state to assistive technologies (AT).709 </p>710 <p>711 For more information about switches and how AT, such as screen readers, interpret them, please review712 <a>713 the checkbox switch pattern714 </a>715 .716 </p>717 <p>718 For more information on the JavaScript and markup used, please see the719 <a>720 ReadMe on the GitHub repo for this pattern721 </a>722 .723 </p>724 <h4>725 Usage note726 </h4>727 <p>728 Presently there are729 <a>730 inconsistencies with screen readers and ARIA switches731 </a>732 .733 734 Please review them to understand how the role is treated depending on screen reader and browser pairings, and if there are any gaps you may need to consider when considering the use of this role.735 </p>736 </section>737 <h3>738 Continue reading739 </h3>740 <p>741 For more information about switches, please read the742 <a>743 <abbr>744 ARIA745 </abbr>746 specification for the747 <code>748 switch749 </code>750 role751 </a>752 .753 <a>754 Inclusive Components Toggle Buttons, by Heydon Pickering755 </a>756 .757 </p>758 </div>759 </main>760 </div>761 </body>762</html>763