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<html>2 <head>3 <style>4 5/* Please put code in right sections below: */6/****** Main style *****/7/****** Code ******/8/****** Switch button (from html_of_wiki) *****/9/****** Docversion ******/10/****** Outline ******/11/****** Drawer ******/12/****** Drawer content ******/13/****** Doc ******/14/****** Page specific ******/15/****** Doc block ******/16/****** Mobile ******/17/****** Large screen ******/18/****** Print ******/19 20/****** Main style *****/21html {22 box-sizing: border-box;23}24*,25*:before,26*:after {27 box-sizing: inherit;28}29a,30a:visited {31 color: #2e8eff;32 text-decoration: none;33}34a.backref {35 display: none;36}37h1:hover a.backref,38h2:hover a.backref,39h3:hover a.backref,40h4:hover a.backref {41 display: inline;42}43h1,44h2,45h3,46h4 {47 font-weight: normal;48 color: #094489; /* dark blue */49}50.project-page h1 {51 margin: 100px 0 70px 0;52 font-size: 50px;53}54p {55 text-align: justify;56}57body {58 margin: 0;59 font-family: "Work Sans", sans-serif;60 color: #555;61}62#gsearch-box {63 transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;64 width: 40px;65 height: 40px;66 border-radius: 20px;67 border: none;68 cursor: pointer;69 background: white;70}71#gsearch-box + label {72 color: black;73 position: absolute;74 right: 10px;75 top: 24px;76 cursor: pointer;77}78#gsearch-box:hover {79 color: white;80 background: #98fb98; /* pale green */81 box-shadow: 0 0 0 5px #36648b; /* dark steel blue */82}83#gsearch-box:hover + label#gsearch-icon {84 color: white;85}86#gsearch-box:focus {87 transition: width 0.6s, border-radius 0.6s, background 0.6s;88 border: none;89 outline: none;90 box-shadow: none;91 padding-left: 15px;92 cursor: text;93 width: 300px;94 border-radius: auto;95 background: white;96 color: black;97}98#gsearch-box:focus + label#gsearch-icon {99 color: black;100}101#gsearch-box:not(:focus) {102 text-indent: -5000px;103}104 105#gsearch-submit {106 display: none;107}108 109#gsearch-icon {110 color: white;111 width: 20px;112}113 114form#googlesearch {115 position: relative;116 padding-top: 15px;117 margin-left: 15px;118 margin-right: 60px;119}120 121.main-button {122 display: inline-block;123 padding: 15px 45px;124 background-color: #64caff;125 border-radius: 3px;126}127a.main-button,128a.main-button:visited {129 color: white !important;130}131.horiz-blocks {132 display: flex;133 flex-direction: row;134 justify-content: space-between;135 flex-wrap: wrap;136}137.horiz-blocks > * {138 max-width: 500px;139 min-width: 200px;140}141.horiz-blocks > *:first-child {142 margin-right: 20px;143}144.main-page-section-news .horiz-blocks {145 justify-content: unset;146 margin: 0;147}148.main-page-section-news .horiz-blocks > * {149 max-width: unset;150 margin: 0;151 width: 50%;152}153.main-page-section {154 background-color: white;155}156.main-page-section h2 {157 font-size: 36px;158 font-weight: normal;159}160.main-page-section h3.subtitle {161 margin-top: -1.2rem;162}163.main-page-section-header {164 position: sticky;165 top: -510px;166 z-index: 2;167 background-color: #003474;168 background-image: url("/img/cover-ocsigen.jpg");169 background-size: cover;170 height: 600px;171 color: white;172 padding: 150px 150px;173}174.main-page-section-header h1,175.main-page-section-js_of_ocaml h2,176.main-page-section-js_of_ocaml h3,177.main-page-section-header h2 {178 color: white;179}180.main-page-section-header .main-button {181 margin-top: 50px;182}183.main-page-section-header h1 {184 font-size: 40px;185 margin-bottom: 10px;186}187.main-page-section-header h2 {188 font-size: 16px;189}190.page-header {191 display: flex;192 position: fixed;193 z-index: 3;194 top: 0;195 left: 0;196 width: 100%;197 background-color: #001a39;198 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);199 height: 90px;200 padding: 10px 20px;201 text-align: right;202}203body.ocsigen\.github\.io.intro .page-header {204 background-color: rgba(0, 0, 0, 0.2);205}206.page-header a {207 color: white;208}209.page-header p.logo-ocsigen img {210 width: 100px;211}212.page-header p.logo-subproject {213 position: absolute;214 top: 26px;215 left: 98px;216 font-size: 23px;217 color: #ff8d52;218}219.page-header .mainmenu {220 flex-grow: 1;221 line-height: 30px;222 margin: 20px 0px;223 font-size: 12px;224}225 226.page-header .mainmenu p {227 display: inline-block;228 margin: 0;229}230.page-header .mainmenu p a,231.page-header .mainmenu p span a {232 font-size: 13px;233 padding: 5px 15px;234 color: white;235}236.page-header .mainmenu .mainmenu-current {237 border-bottom: 4px solid #64caff;238}239li.drawermainmenu-page,240li.drawermainmenu-home,241li.drawermainmenu-doc,242.mainmenu-home,243.mainmenu-doc {244 font-weight: bold;245}246li.drawermainmenu-project a {247 color: #2e8eff;248}249li.drawermainmenu-current a {250 font-weight: bold;251 color: #ff8d52;252}253.page-header .logo-ocsigen {254 position: absolute;255 left: 60px;256 top: 20px;257}258.main-page-section-partners {259 text-align: center;260 width: 100%;261 overflow-x: auto;262 white-space: nowrap;263}264.main-page-section-partners ul {265 display: inline-block;266 line-height: 30px;267 vertical-align: middle;268 margin: 20px 0;269}270.main-page-section-partners li {271 display: inline-block;272 padding: 5px 20px;273}274.main-page-section-partners img {275 width: 100px;276}277.main-page-section-partners img.logo-cnrs {278 width: 50px;279}280.main-page-section-users ul {281 column-count: 3;282}283.main-page-section-content {284 position: relative;285 max-width: 1200px;286 padding: 50px;287 margin: 0 auto;288}289.main-page-section-news .main-page-section-content {290 padding: 50px 0;291 margin: 0;292 max-width: 100%;293}294.main-page-section-news .main-page-section-content h2 {295 max-width: 1200px;296 margin: 20px auto;297 padding: 0 50px;298}299[class^="main-page-news-"] {300 padding: 35px;301}302.main-page-news-1 {303 background-color: #ffffdd;304}305.main-page-news-2 {306 background-color: #73c6ed;307 color: white;308}309.main-page-section-multitier {310 color: #222;311}312.main-page-schema-multitier {313 width: 800px;314 max-width: calc(100vw - 40px);315}316.main-page-section-multitier-schema {317 position: relative;318 height: 500px;319 padding: 50px 0;320}321.main-page-section-multitier-schema > p {322 text-align: center;323}324.main-page-section-js_of_ocaml {325 background-color: #001a39;326 color: white;327}328.main-page-section-js_of_ocaml-schema {329 position: relative;330 display: flex;331 flex-direction: row;332 justify-content: space-around;333 align-items: flex-start;334 flex-wrap: wrap;335}336.main-page-section-js_of_ocaml-ocaml code[class*="language-"]::before,337.main-page-section-js_of_ocaml-js code[class*="language-"]::before {338 color: rgba(255, 255, 255, 0.2);339 text-shadow: none;340}341pre {342 max-width: 85vw;343 overflow-x: auto;344}345pre[class*="language-"].main-page-section-js_of_ocaml-ocaml,346pre[class*="language-"].main-page-section-js_of_ocaml-js {347 max-width: 100vw;348 border: 1px solid white;349 border-radius: 10px;350 padding: 40px !important;351 margin: 40px;352 background-color: transparent !important;353}354.darkcode code[class*="language-"] {355 text-shadow: none;356 color: white;357}358.main-page-section-js_of_ocaml-arrow1 {359 position: absolute;360 top: 100px;361 left: 525px;362 font-size: 51px;363}364.main-page-section-js_of_ocaml-arrow2 {365 position: absolute;366 top: 300px;367 left: 525px;368 font-size: 51px;369 transform: rotateZ(45deg);370}371.darkcode .token.number {372 color: #ffaa99;373}374.darkcode .token.keyword {375 color: #63caff; /* light blue */376}377.darkcode .token.operator {378 background-color: transparent;379 color: #ddccbb;380}381.main-page-section-about {382 background-color: #001a39; /* dark dark blue */383 color: #ddd;384 padding: 30px 0;385}386.main-page-section-about ul {387 list-style-type: none;388}389.main-page-section-about li {390 line-height: 200%;391}392.main-page-section-projects {393 background-color: white;394 color: #888;395}396.main-page-schema-js_of_ocaml {397}398.main-page-projects {399 display: flex;400 flex-direction: row;401 justify-content: center;402 flex-wrap: wrap;403 padding-bottom: 50px;404}405.main-page-project {406 position: relative;407 width: 400px;408 max-width: 100vw;409 height: 210px;410 background-color: white;411 background: url("/img/ocsigen-bubbles-shadow-small.png");412 background-repeat: no-repeat;413 background-position: 127% 220%;414 margin: 20px;415 border-radius: 4px;416 box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);417 overflow: hidden;418}419.main-page-project h3::before {420 content: "";421 position: absolute;422 left: 30px;423 top: 30px;424 width: 90px;425 display: block;426 background-image: url("/img/ocsigen-white.svg");427 background-size: contain;428 background-repeat: no-repeat;429 height: 28px;430}431.main-page-project h3 {432 background-color: #001a39;433 color: #ff8d52;434 padding: 44px 0 10px 92px;435 margin: 0;436}437.main-page-project p {438 margin: 0;439 padding: 30px;440 color: #555;441}442.project-page {443 margin: 120px auto;444 max-width: 1100px;445}446.twocols {447 display: flex;448 flex-direction: row;449 flex-wrap: nowrap;450}451.leftcol {452 flex-shrink: 0;453 position: sticky;454 top: 120px;455 bottom: 0;456 height: calc(100vh - 160px);457 overflow-y: auto;458 width: 300px;459 margin: 100px 40px 0 0;460 padding: 18px 18px 50px 18px;461 background-color: rgba(255, 255, 255, 0.9);462 border-radius: 5px;463 border: 1px solid #eee;464}465.leftcol::-webkit-scrollbar {466 display: none;467}468.leftcol h1 {469 margin: 30px 0 0 0;470 font-size: 16px;471}472.leftcol h2,473.leftcol h3,474.leftcol h4 {475 margin: 4px 0 4px 10px;476 font-size: 14px;477}478.leftcol h2 {479 margin: 20px 0 2px 0;480}481.leftcol h4 {482 margin-left: 20px;483}484.rightcol {485 padding: 0 20px;486 right: 0;487}488/* Adding space before the target element (URL #fragments) so that it is not under page header */489:target::before {490 display: block;491 content: " ";492 /* margin-top: -100px; does not work with <pre> */493 height: 100px;494 visibility: hidden;495}496/****** Reason switch button (from html_of_wiki) *****/497button#reason {498 position: fixed;499 right: 20px;500 top: 120px;501 background-color: #ff8d52; /* orange */502 border-radius: 50%;503 border: none;504 height: 75px;505 width: 75px;506 color: white;507 cursor: pointer;508 font-size: 12px;509 z-index: 3;510}511/* Update the switch button's content */512body:not(.reason) button#reason::after {513 content: "Reason syntax";514}515body.reason button#reason::after {516 content: "regular OCaml syntax";517}518.reasonwarning {519 display: none;520 font-style: italic;521}522body.reason .reasonwarning {523 display: block;524}525.focused {526 background: #fcf0eb;527 padding: 1px 15px;528 border-radius: 10px;529}530/****** Client-server switch button *****/531 532/* <pre> is shared among the original and automatically translated code, so we533 * only hide those containing manually translated code, which would otherwise534 * appear as empty boxes (with a background, because <code> is inline). */535body:not(.reason) pre.language-reason.manually-translated,536body.reason pre.language-ocaml.manually-translated,537/* Hide the translated ReasonML code from OCaml users */538body:not(.reason) code.language-reason,539/* API pages only use <pre> elements for OCaml code... */540body.reason pre.language-ocaml.standalone,541body:not(.reason) pre.language-reason.standalone,542/* Hide the original OCaml code from ReasonML users */543body.reason code.language-ocaml:not(.error) {544 display: none;545}546 547/* Design from https://www.w3schools.com/howto/howto_css_switch.asp */548/* The switch - the box around the slider */549.csw-switch {550 position: relative;551 display: inline-block;552 width: 60px;553 height: 34px;554 margin-top: 117px;555 float: right;556}557/* Hide default HTML checkbox */558.csw-switch input {559 opacity: 0;560 width: 0;561 height: 0;562}563/* The slider */564.csw-slider {565 position: absolute;566 cursor: pointer;567 top: 0;568 left: 0;569 right: 0;570 bottom: 0;571 background-color: #5cacee; /* steel blue */572 -webkit-transition: 0.4s;573 transition: 0.4s;574}575 576.csw-slider:before {577 position: absolute;578 content: "";579 height: 26px;580 width: 26px;581 left: 4px;582 bottom: 4px;583 background-color: white;584 -webkit-transition: 0.4s;585 transition: 0.4s;586}587input:checked + .csw-slider {588 background-color: #d4df67; /* dark yellow */589}590input:focus + .csw-slider {591 box-shadow: 0 0 1px #00cd66;592}593input:checked + .csw-slider:before {594 -webkit-transform: translateX(26px);595 -ms-transform: translateX(26px);596 transform: translateX(26px);597}598 599/* Rounded sliders */600.csw-slider-style-round {601 border-radius: 34px;602}603.csw-slider-style-round:before {604 border-radius: 50%;605}606 607.csw-slider-yes,608.csw-slider-no {609 position: absolute;610 left: 3px;611 top: 35px;612}613.csw-switch input:not(:checked) + .csw-slider + .csw-slider-no {614 display: inline;615}616.csw-switch617 input:not(:checked)618 + .csw-slider619 + .csw-slider-no620 + .csw-slider-yes {621 display: none;622}623.csw-switch input:checked + .csw-slider + .csw-slider-no + .csw-slider-yes {624 display: inline;625}626.csw-switch input:checked + .csw-slider + .csw-slider-no {627 display: none;628}629 630/****** Code ******/631 632pre.shared {633 background-color: #eeffee !important;634 border-color: #b4eeb4;635}636pre.server {637 background-color: #ddeeff !important;638 border-color: #cae1ff;639}640pre.client {641 background-color: #ffffdd !important;642 border-color: #ffec8b;643}644 645span.teletype {646 color: #0ca9dc;647 font-family: monospace;648}649 650span.ocsforge_color {651 font-family: monospace;652}653 654span.ocsforge_color_delimiter,655span.ocsforge_color_keyword {656 color: #990099;657}658span.ocsforge_color_comment {659 color: #ff6600;660}661span.ocsforge_color_operator {662 color: black;663}664span.ocsforge_color_lid {665 color: black;666}667span.ocsforge_color_uid {668 color: #339900;669}670span.ocsforge_color_label {671 color: #878700;672}673 674span.ocsforge_color_int,675span.ocsforge_color_float,676span.ocsforge_color_bin,677span.ocsforge_color_oct,678span.ocsforge_color_hex,679span.ocsforge_color_char,680span.ocsforge_color_string {681 color: #07ace5;682}683 684span.odocwiki_name {685 color: #0033ff;686}687span.odocwiki_inlinecode {688 color: #08ade5;689}690 691hr + pre.odocwiki_code {692 margin-top: 1em;693}694 695pre,696pre.odocwiki_code {697 clear: both;698 background-color: #f1f1f1;699 border-left: 6px solid #dedede;700 padding: 8px;701 margin: 1em 0 1.5em 0;702}703 704pre.odocwiki_code {705 margin: 2.5em 0 1em 0;706}707 708span.odocwiki_code {709 display: block;710 margin: 0;711}712 713span.odocwiki_inlinecode {714 font-family: monospace;715}716 717span.odocwiki_variant,718span.odocwiki_field {719 display: block;720 width: 600px;721}722 723span.odocwiki_variant_constr,724span.odocwiki_field_descr {725 margin-top: 0.5em;726 display: block;727 float: left;728 margin-top: 0.3em;729}730 731span.odocwiki_comments {732 display: table;733 float: right;734 margin-top: 0.3em;735 color: #ff6600;736 white-space: normal;737}738span.odocwiki_comments > span {739 display: table-cell;740}741span.odocwiki_comments > span:nth-child(2) {742 max-width: 500px;743}744span.odocwiki_comments_close {745 vertical-align: bottom;746}747 748span.odocwiki_variant::after,749span.odocwiki_field::after {750 content: "";751 display: block;752 clear: both;753 height: 0;754 visibility: hidden;755}756 757/*758 759span.odocwiki_variant > span { display: table-cell; }760*/761 762pre[class*="language-"] {763 position: relative;764 z-index: 0;765}766code[class*="language-"]::before {767 z-index: -1;768}769 770code.language-ocaml::before {771 content: "OCaml";772}773 774code.language-reason::before {775 content: "Reason";776}777 778code.language-javascript::before {779 content: "JavaScript";780}781 782code.language-ocaml::before,783code.language-reason::before,784code.language-javascript::before {785 position: absolute;786 top: -22px;787 right: 0;788 color: #ffffff;789 font-weight: bold;790 font-size: 50px;791 font-family: "Work Sans";792}793 794code[class*="language-"],795pre[class*="language-"] {796 white-space: pre-wrap !important;797}798 799/****** Docversion ******/800.how-versions {801 margin-bottom: 10px;802}803 804/****** Outline ******/805.ocsimore_outline {806 margin: 60px 0;807}808 809/****** Drawer *****/810.how-drawer {811 z-index: 1000;812}813#how-drawer-toggle {814 display: none;815}816#how-drawer-label {817 display: block;818 position: fixed;819 top: 25px;820 right: 30px;821 width: 40px;822 height: 40px;823 z-index: 1000;824 cursor: pointer;825}826.how-drawer-content {827 position: fixed;828 width: 350px;829 height: 100vh;830 max-width: 100vw;831 top: 0;832 right: 0;833 background-color: #001a39;834 transform: translateX(400px);835 transition: transform 0.5s;836 box-shadow: -5px 0 5px 0 rgba(0, 0, 0, 0.2);837}838#how-drawer-toggle:checked ~ .how-drawer-content {839 transform: translateX(0);840 transition: transform 0.5s;841}842.how-drawer-icon::before,843.how-drawer-icon::after,844.how-drawer-icon {845 position: absolute;846 display: block;847 width: 25px;848 height: 3px;849 background-color: white;850 left: 0;851 border-radius: 1px;852 transition: transform 0.5s;853}854.how-drawer-icon::before,855.how-drawer-icon::after {856 content: "";857}858.how-drawer-icon::before {859 top: -8px;860}861.how-drawer-icon {862 top: 18px;863 left: 7px;864}865.how-drawer-icon::after {866 top: 8px;867}868#how-drawer-toggle:checked ~ #how-drawer-label .how-drawer-icon {869 background-color: transparent;870}871#how-drawer-toggle:checked ~ #how-drawer-label .how-drawer-icon::before {872 transform: translateY(8px) rotate(45deg);873}874#how-drawer-toggle:checked ~ #how-drawer-label .how-drawer-icon::after {875 transform: translateY(-8px) rotate(-45deg);876}877 878/****** Drawer content *****/879.how-drawer-content {880 padding: 100px 20px 50px 20px;881 overflow: auto;882 color: white;883 text-align: left;884}885.drawermainmenu {886 list-style-type: none;887}888.how-drawer-content h1 {889 color: #2f8eff;890 font-size: 22px;891 margin: 50px 0 0 0;892}893.how-drawer-content h2 {894 color: #2f8eff;895 font-size: 18px;896}897.how-drawer-content h3 {898 color: #2f8eff;899 font-size: 16px;900}901.drawermainmenu li a {902 display: block;903 padding: 15px 0;904}905 906/****** Doc ******/907.concepts {908 width: 400px;909 max-width: 85vw;910 overflow-x: auto;911 background-color: #ff8d52;912 color: white;913 padding: 1px 20px;914 margin-left: auto;915 border-radius: 5px;916}917 918aside.concept {919 border-left: 4px #348 solid;920 padding-left: 20px;921}922 923.screenshot::before {924 content: "Screenshot";925 display: block;926 text-align: center;927 background-color: #def;928 color: white;929 font-weight: bold;930 line-height: 30px;931 font-size: 20px;932}933 934.screenshot {935 border: 4px #def solid;936 margin: 20px;937}938 939/****** Page specific ******/940/* intro tuto */941body.tuto .tutocase {942 background-color: #f7cbb5;943 padding: 15px 25px;944 border-radius: 5px;945}946/* tuto os */947body.tuto.start div.screenshots img {948 max-height: 200px;949 max-width: calc(100vw - 30px);950}951/****** Dock block ******/952section.docblock {953 border: 2px solid;954 padding: 10px;955 border-radius: 10px;956 margin-top: 20px;957}958section.docblock > header {959 position: sticky;960 top: 90px;961 background-color: white;962 padding-top: 50px;963 border: 2px solid white;964 margin: -12px;965 z-index: 1;966}967section.docblock > header > h2 {968 margin: -2px;969 padding: 10px;970 border: 2px solid;971 border-bottom: none;972 border-top-right-radius: 10px;973 border-top-left-radius: 10px;974}975 976/****** Mobile version ******/977@media (max-width: 720px) {978 .smallscreen {979 display: block;980 }981 .largescreen {982 display: none;983 }984 .page-header .logo-ocsigen {985 left: 30px;986 }987 /* We use an id because of https://github.com/ocsigen/tyxml/issues/196 */988 #smallscreencsswitch {989 display: block;990 margin: 0 15px;991 }992 #largescreencsswitch {993 display: none;994 }995 .page-header .mainmenu {996 visibility: hidden;997 }998 .main-page-section-header {999 padding: 90px 40px;1000 }1001 .main-page-section-header h1 {1002 font-size: 30px;1003 }1004 .main-page-section-content {1005 padding: 50px 20px;1006 }1007 .main-page-section-users ul {1008 column-count: 1;1009 }1010 pre[class*="language-"].main-page-section-js_of_ocaml-ocaml,1011 pre[class*="language-"].main-page-section-js_of_ocaml-js {1012 border: none;1013 border-radius: unset;1014 margin: 40px 0;1015 background-color: transparent !important;1016 }1017 .main-page-project {1018 border-radius: unset;1019 }1020 .leftcol {1021 display: none;1022 }1023 .project-page h1 {1024 font-size: 36px;1025 }1026 .main-page-section-news .horiz-blocks > * {1027 width: 100%;1028 }1029}1030@media (min-width: 1180px) {1031 .main-page-section-js_of_ocaml-schema pre[class*="language-"] {1032 width: 450px;1033 }1034}1035@media (max-width: 1179px) {1036 .main-page-section-js_of_ocaml-arrow1 {1037 top: 240px;1038 left: 50%;1039 transform: rotateZ(90deg);1040 }1041 .main-page-section-js_of_ocaml-arrow2 {1042 display: none;1043 }1044}1045/****** Large screen ******/1046@media (min-width: 721px) {1047 .how-drawer .how-doctree {1048 display: none;1049 }1050 .rightcol {1051 margin-left: 40px;1052 }1053 .smallscreen {1054 display: none;1055 }1056 .largescreen {1057 display: block;1058 }1059 /* We use an id because of https://github.com/ocsigen/tyxml/issues/196 */1060 #smallscreencsswitch {1061 display: none;1062 }1063 #largescreencsswitch {1064 display: block;1065 }1066}1067@media (min-width: 1200px) {1068 body {1069 background-image: url("/img/ocsigen-bubbles-large.png");1070 background-repeat: no-repeat;1071 background-position: -800px 0;1072 background-attachment: fixed;1073 }1074 .main-page-news-1 {1075 padding-left: calc(50% - 550px);1076 }1077 .main-page-news-2 {1078 padding-right: calc(50% - 550px);1079 }1080}1081/****** Print ******/1082@media print {1083 .page-header, #reason {1084 display: none;1085 }1086}1087 1088 1089 1090code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}1091/*# sourceMappingURL=prism.min.css.map */1092 </style>1093 <title>1094 Module Ot_drawer1095 </title>1096 <meta charset="utf-8">1097 <meta content="width=device-width, initial-scale=1" name="viewport">1098 </head>1099 <body class="Ot_drawer ocsigen-toolkit">1100 <div class="project-page">1101 <div class="page-header">1102 <p class="logo-ocsigen">1103 <a class="ocsimore_phrasing_link">1104 <img alt="Ocsigen" src="rick.jpg">1105 </a>1106 </p>1107 <p class="logo-subproject">1108 Toolkit1109 </p>1110 <div class="mainmenu">1111 <p class="mainmenu-home">1112 <a class="ocsimore_phrasing_link">1113 Home1114 </a>1115 </p>1116 <p class="mainmenu-doc">1117 <a class="ocsimore_phrasing_link">1118 Doc1119 </a>1120 </p>1121 <p>1122 <a class="ocsimore_phrasing_link">1123 Eliom1124 </a>1125 </p>1126 <p>1127 <a class="ocsimore_phrasing_link">1128 Js_of_ocaml1129 </a>1130 </p>1131 <p>1132 <a class="ocsimore_phrasing_link">1133 Lwt1134 </a>1135 </p>1136 <p>1137 <a class="ocsimore_phrasing_link">1138 Tyxml1139 </a>1140 </p>1141 <p>1142 <a class="ocsimore_phrasing_link">1143 Start1144 </a>1145 </p>1146 </div>1147 <form action="" id="googlesearch">1148 <input id="gsearch-box" name="q" placeholder="Search using Google">1149 <label for="gsearch-box">1150 <img alt id="gsearch-icon" src="rick.jpg">1151 </label>1152 <input id="gsearch-submit" onclick="document.getElementById('gsearch-box').value += ' site:ocsigen.org';" type="submit">1153 </form>1154 <aside class="how-drawer">1155 <input id="how-drawer-toggle" type="checkbox">1156 <label for="how-drawer-toggle" id="how-drawer-label">1157 <span class="how-drawer-icon">1158 </span>1159 </label>1160 <nav class="how-drawer-content">1161 <ul class="drawermainmenu">1162 <li class="drawermainmenu-home">1163 <a class="ocsimore_phrasing_link">1164 Home1165 </a>1166 </li>1167 <li class="drawermainmenu-doc">1168 <a class="ocsimore_phrasing_link">1169 Doc1170 </a>1171 </li>1172 <li class="drawermainmenu-project">1173 <a class="ocsimore_phrasing_link">1174 Eliom1175 </a>1176 </li>1177 <li class="drawermainmenu-project">1178 <a class="ocsimore_phrasing_link">1179 Js_of_ocaml1180 </a>1181 </li>1182 </ul>1183 <nav class="how-doctree">1184 <h1>1185 Ocsigen toolkit1186 </h1>1187 <h2>1188 <a class="ocsimore_phrasing_link">1189 Introduction1190 </a>1191 </h2>1192 <h1>1193 Ocsigen-toolkit server API1194 </h1>1195 <h2>1196 <a class="ocsimore_phrasing_link">1197 Ot_popup1198 </a>1199 </h2>1200 <h2>