Datasetpublic
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.
sourceHugging Faceodc-byupdated 3y agoView on Hugging Face
22likes1.8kdownloads
root11059.html
11059.html420 linesDownload Raw Back to root
1<!DOCTYPE html>2<html class="desktop landscape">3 <head>4  <meta charset="utf-8">5  <title>6   Enagic Distributor Support Portal7  </title>8  <meta content="Enagic International Co., Ltd." name="author">9  <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" name="viewport">10  <!--OPTIONAL JQUERY PLUGIN-->11  <!-- -->12  <meta content="index,follow" name="robots">13  <style>14   /* GENERAL15================================================== */16 17/* Simple Reset */18* { margin: 0; padding: 0; box-sizing: border-box; }19html {20	height: 100%21}22body {23	font: 500 95%/1.3em 'Roboto', sans-serif;24	height: 100%;25	width: 100%;26	-webkit-font-smoothing: antialiased;27	-webkit-text-size-adjust: 100%;28	background: #000;29	color: #FFF;30}31 32/* Form Layout */33.form-wrapper {34	background-color: rgba(0, 0, 0, 0.5);35	margin: 3em auto;36	padding: 1em;37	max-width: 300px;38	border-radius: 5px; 39}40.form-wrapper img { max-width: 100%;}41form {42	padding: 0 1.5em;43}44h1 { 45	margin-bottom: .5em;46}47 48.form-item {49	margin-bottom: 0.75em;50	width: 100%;51}52.form-item a[href $='.pdf'] {53    background:url(https://information.enagic.com/mypage/my/images/icon_pdf.png) no-repeat left top;54    background-size: 11%;55    margin: 0 0 0 0;56    padding: 0px 0px 100px 25px;57    color: #FFF;58}59.form-item a[href $='.pdf']:hover { color:#FFC}60.form-item input {61	background: #fafafa;62	border: none;63	font-size: 1em;64	padding: .75em 1em;65	width: 100%;66	font-family: 'Roboto', sans-serif;67	border-radius: 3px;68}69 70.form-item input:focus {71	border-bottom: 2px solid #c0c0c0;72	outline: none;73}74.form-item input#policycheck {75	margin-top: 10px;76	width: inherit;77	-ms-transform: scale(2, 2);78	-webkit-transform: scale(2, 2);79	transform: scale(2, 2);80}81.button-panel {82	margin: 1em 0 0;83	width: 100%;84}85.button-panel .button {86	background: #024F9E;87	border: none;88	color: #fff;89	cursor: pointer;90	height: 50px;91	font-family: 'Roboto', sans-serif;92	font-size: 1.2em;93	letter-spacing: 0.05em;94	text-align: center;95	text-transform: uppercase;96	transition: background 0.3s ease-in-out;97	width: 100%;98	border-radius: 3px; 99}100.button:hover {101	background: #2A8FEA;102}103 104.button-panel2 {105	margin: 1em 0 0;106	width: 100%;107}108.button-panel2 .button2 {109	background: #FFA500;110	border: none;111	color: #fff;112	cursor: pointer;113	height: 50px;114	font-family: 'Roboto', sans-serif;115	font-size: 1.2em;116	letter-spacing: 0.05em;117	text-align: center;118	text-transform: uppercase;119	transition: background 0.3s ease-in-out;120	width: 100%;121	border-radius: 3px; 122}123.button2:hover {124	background: #F9CB7C;125}126 127.button2:disabled {128	background: #F9CB7C;129}130 131.form-footer {132	font-size: 1em;133	padding: 1em 0;134	text-align: center;135}136.form-footer a {137	color: #FFF;138	text-decoration: none;139	transition: border-color 0.3s;140}141.form-footer a:hover {142	border-bottom: 1px dotted #8c8c8c;143	color: #FFC;144}145.error_message {146	background: pink;147	margin-bottom:  .5em;148	padding: 2px 5px;149	color: red150}151.pattern {152	background-image: url(../images/pattern.png);153	background-repeat: repeat;154	background-attachment: scroll;155	width: 100%;156	height: 100%;157	position: absolute;158	top: 0;159	left: 0160}161 162/* BIG VIDEO BACKGROUND163================================================== */164 165.big-background {166	z-index: 550;167	text-align: center;168	height: 100%;169	min-height: 100%;170	position: relative;171	overflow: hidden172}173.big-background .big-background-container {174	width: 830px;175	max-width: 100%;176	display: inline-block;177	position: absolute;178	top: 50%;179	left: 50%;180	-webkit-transform: translate(-50%, -50%);181	-moz-transform: translate(-50%, -50%);182	-ms-transform: translate(-50%, -50%);183	-o-transform: translate(-50%, -50%);184	transform: translate(-50%, -50%)185}186.big-background-title {187	font-family: 'Raleway', sans-serif;188	font-size: 78px;189	color: #fff;190	font-weight: 300;191	text-transform: uppercase;192	text-align: center;193	margin-bottom: 22px;194	padding-top: 20px;195	display: inline-block;196	background-attachment: scroll;197	background-repeat: repeat-x;198	background-position: top center199}200a.big-background-btn {201	font-family: 'Lato', sans-serif;202	font-size: 13px;203	text-transform: uppercase;204	text-decoration: none;205	color: #fff;206	background: transparent;207	border: 2px solid #fff;208	padding: 10px 14px;209	cursor: pointer;210	letter-spacing: 2px;211	text-align: center;212	display: inline-block;213	-webkit-transition: .4s background ease;214	-moz-transition: .4s background ease;215	-o-transition: .4s background ease;216	transition: .4s background ease;217}218.big-background-btn:hover {219	color: #fff;220	background: rgba(255, 255, 255, 0.20)221}222.big-background-default-image {223	background:url(../images/enagic-mypage.jpg);224	background-repeat: no-repeat;225	background-position: center center;226	background-size: cover;227	max-width: 100%;228	height: 100%;229	z-index: 0;230	backface-visibility: hidden231}232 233/* MEDIA QUERIES234================================================== */235 236@media screen and (max-width: 768px) {237	.about-section-title {238		line-height: 1239	}240}241@media screen and (max-width: 480px) {242	.big-background-title {243		font-size: 58px244	}245	.small-background-title {246		line-height: 1247	}248	/*.player{ display: none;}  -> If you want to remove the video bg on a specific viewport w/o plugin*/249}250@media screen and (max-width: 360px) {251	.big-background-title, #colorize {252		line-height: 1253	}254}255@media screen and (max-width: 320px) {256	.small-background-title {257		font-size: 30px258	}259}260 261/*262    Colorbox Core Style:263    The following CSS is consistent between example themes and should not be altered.264*/265#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}266#cboxWrapper {max-width:none;}267#cboxOverlay{position:fixed; width:100%; height:100%;}268#cboxMiddleLeft, #cboxBottomLeft{clear:left;}269#cboxContent{position:relative;}270#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}271#cboxTitle{margin:0;}272#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}273#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}274.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}275.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}276#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}277 278/* 279    User Style:280    Change the following styles to modify the appearance of Colorbox.  They are281    ordered & tabbed in a way that represents the nesting of the generated HTML.282*/283#cboxOverlay{background:#fff; opacity: 0.7; filter: alpha(opacity = 70);}284#colorbox{outline:0;}285    #cboxContent{margin-top:32px; overflow:visible; background:#FFF;}286        .cboxIframe{background:#fff;}287        #cboxError{padding:50px; border:1px solid #ccc;}288        #cboxLoadedContent{background:#FFF; padding:1px; color:#000;}289        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}290        #cboxLoadingOverlay{background:#FFF;}291        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}292        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}293 294        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */295        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../images/controls.png) no-repeat 0 0;}296        297        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */298        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}299 300        #cboxPrevious{background-position:0px 0px; right:44px;}301        #cboxPrevious:hover{background-position:0px -25px;}302        #cboxNext{background-position:-25px 0px; right:22px;}303        #cboxNext:hover{background-position:-25px -25px;}304        #cboxClose{background-position:-50px 0px; right:0;}305        #cboxClose:hover{background-position:-50px -25px;}306        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}307        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}308        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}309        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}310        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}311 312 313 314 315@font-face {316  font-family: 'Roboto';317  font-style: normal;318  font-weight: 500;319  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc9.ttf) format('truetype');320}321 322 323 324        #bgndVideo {325            position: absolute; pointer-events: none;326            z-index: 0;327            width: 100%;328            height: 100%;329        }330        #bgndVideo video {331            width: 100%;332            height: 100%;333            object-fit: cover;334        }335  </style>336  <!-- <meta http-equiv="refresh" content="0;url=https://information.enagic.com/mypage/maintenance.php"> -->337 </head>338 <body>339  <section class="big-background">340   <div id="bgndVideo">341   </div>342   <div class="pattern">343   </div>344   <div class="big-background-container">345    <!-- Form -->346    <div class="form-wrapper">347     <h1>348      <img alt="Enagic Distributor Support Portal" src="rick.jpg">349     </h1>350     <form action="guest.php" method="post" name="guest">351      <div style="padding-bottom:4px;">352       <p>353        Do you have an Enagic Client ID Number?354       </p>355      </div>356      <div class="button-panel2">357       <button class="button2" name="go_to_login" onclick="location.href='https://information.enagic.com/mypage/login.php?loginfrom=us'" style="display:inline-block;width:40%;margin-right:8px;" type="button">358        YES359       </button>360       <button class="button2" name="go_to_gws" style="display:inline-block;width:40%;" type="button">361        NO362       </button>363      </div>364      <input name="country" type="hidden" value="us">365      <input name="page_name_from" type="hidden" value="guest">366     </form>367    </div>368    <!-- / From -->369   </div>370  </section>371  <!-- This contains the hidden content for inline calls -->372  <div id="cboxOverlay" style="display: none;">373  </div>374  <div class="" id="colorbox" role="dialog" style="display: none;" tabindex="-1">375   <div id="cboxWrapper">376    <div>377     <div id="cboxTopLeft" style="float: left;">378     </div>379     <div id="cboxTopCenter" style="float: left;">380     </div>381     <div id="cboxTopRight" style="float: left;">382     </div>383    </div>384    <div style="clear: left;">385     <div id="cboxMiddleLeft" style="float: left;">386     </div>387     <div id="cboxContent" style="float: left;">388      <div id="cboxTitle" style="float: left;">389      </div>390      <div id="cboxCurrent" style="float: left;">391      </div>392      <button id="cboxPrevious" type="button">393      </button>394      <button id="cboxNext" type="button">395      </button>396      <button id="cboxSlideshow" type="button">397      </button>398      <div id="cboxLoadingOverlay" style="float: left;">399      </div>400      <div id="cboxLoadingGraphic" style="float: left;">401      </div>402     </div>403     <div id="cboxMiddleRight" style="float: left;">404     </div>405    </div>406    <div style="clear: left;">407     <div id="cboxBottomLeft" style="float: left;">408     </div>409     <div id="cboxBottomCenter" style="float: left;">410     </div>411     <div id="cboxBottomRight" style="float: left;">412     </div>413    </div>414   </div>415   <div style="position: absolute; width: 9999px; visibility: hidden; display: none; max-width: none;">416   </div>417  </div>418 </body>419</html>420