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>3 <head>4 <style>5 *,6*:before,7*:after {8 -webkit-box-sizing: border-box;9 -moz-box-sizing: border-box;10 box-sizing: border-box;11}12 13/* For RTL languages, English parts need to be LTR */14.ltr{15 direction: ltr;16}17 18body {19 background-color: #D4D8DC;20 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;21 margin: 0;22 padding: 0;23}24 25nav {26 background-color: #db6ae6;27 color: black;28 direction: ltr;29 font-weight: normal;30 margin: 0 auto;31 opacity: 0.9;32 padding: 15px 0;33 position: fixed;34 text-align: center;35 top: 0;36 width: 100%;37 z-index: 1;38}39 40.language-switch {41 background-position: left center;42 background-repeat: no-repeat;43 cursor: pointer;44 padding: 8px 10px 8px 29px;45}46 47.dropdown .cs-CZ a, .cs-CZ a { background-image: url(../icons/flags/cs-CZ16.png); }48.dropdown .en-GB a, .en-GB a { background-image: url(../icons/flags/en-GB16.png); }49.dropdown .gl-ES a, .gl-ES a { background-image: url(../icons/flags/gl-ES16.png); }50.dropdown .es-ES a, .es-ES a { background-image: url(../icons/flags/es-ES16.png); }51.dropdown .pt-BR a, .pt-BR a { background-image: url(../icons/flags/pt-BR16.png); }52.dropdown .tr-TR a, .tr-TR a { background-image: url(../icons/flags/tr-TR16.png); }53.dropdown .de-DE a, .de-DE a { background-image: url(../icons/flags/de-DE16.png); }54.dropdown .fr-FR a, .fr-FR a { background-image: url(../icons/flags/fr-FR16.png); }55.dropdown .ca-ES a, .ca-ES a { background-image: url(../icons/flags/ca-ES16.png); }56.dropdown .nl-NL a, .nl-NL a { background-image: url(../icons/flags/nl-NL16.png); }57.dropdown .it-IT a, .it-IT a { background-image: url(../icons/flags/it-IT16.png); }58.dropdown .pl-PL a, .pl-PL a { background-image: url(../icons/flags/pl-PL16.png); }59.dropdown .ja-JP a, .pl-PL a { background-image: url(../icons/flags/ja-JP16.png); }60.dropdown .ru-RU a, .pl-PL a { background-image: url(../icons/flags/ru-RU16.png); }61.dropdown .pt-PT a, .pt-PT a { background-image: url(../icons/flags/pt-PT16.png); }62 63 64#cs-CZ { background-image: url(../icons/flags/cs-CZ24.png); }65#en-GB { background-image: url(../icons/flags/en-GB24.png); }66#es-ES { background-image: url(../icons/flags/es-ES24.png); }67#gl-ES { background-image: url(../icons/flags/gl-ES24.png); }68#pt-BR { background-image: url(../icons/flags/pt-BR24.png); }69#tr-TR { background-image: url(../icons/flags/tr-TR24.png); }70#de-DE { background-image: url(../icons/flags/de-DE24.png); }71#fr-FR { background-image: url(../icons/flags/fr-FR24.png); }72#ca-ES { background-image: url(../icons/flags/ca-ES24.png); }73#nl-NL { background-image: url(../icons/flags/nl-NL24.png); }74#it-IT { background-image: url(../icons/flags/it-IT24.png); }75#pl-PL { background-image: url(../icons/flags/pl-PL24.png); }76#ja-JP { background-image: url(../icons/flags/ja-JP24.png); }77#ru-RU { background-image: url(../icons/flags/ru-RU24.png); }78#pt-PT { background-image: url(../icons/flags/pt-PT24.png); }79 80nav a {81 color: black;82 font-weight: normal;83 padding: 8px 10px;84 text-decoration: none;85}86 87nav a:hover, .language-switch:hover, .current {88 border-bottom: 1px solid black;89}90 91header {92 background-color: #293840;93 border-bottom: 5px solid #db6ae6;94 color: #E8E8E8;95 margin-top: 47px;96 padding: 40px 0;97 position: relative;98 text-align: center;99}100 101.js-on header {102 border: none;103}104 105header h1 {106 font-size: 300%;107 font-weight: lighter;108 margin: 0;109 padding-bottom: 10px;110}111 112header h1 span {113 color: #db6ae6;114}115 116.tagline {117 color: #9FB3BE;118 font-size: 16px;119 margin: 0;120}121 122.button {123 background: #db6ae6;124 border-radius: 5px;125 color: white;126 display: inline-block;127 font-weight: lighter;128 letter-spacing: 1px;129 margin-top: 10px;130 padding: 10px 20px;131 text-decoration: none;132 transition: all 0.3s ease 0s;133}134 135.button:hover {136 background: #8a0963;137 cursor: pointer;138}139 140.jdm.button:hover {141 background: #004c99;142}143 144.search {145 background-color: #db6ae6;146 display: none;147 padding: 10px 0;148}149 150.js-on .search {151 display: block;152}153 154.search .search-container {155 margin: 0 auto;156 max-width: 500px;157 padding: 0 30px 0 0;158 position: relative;159}160 161.search .search-container input {162 background-color: transparent;163 border: 0 none;164 border-bottom: 1px solid white;165 color: white;166 display: block;167 font-size: 16px;168 padding: 10px;169 width: 100%;170}171 172.search .search-container input:focus {173 outline: none;174}175 176#search{177 direction: ltr;178}179 180.search .search-container label {181 background: url('../img/spyglass.png');182 background-size: 20px 20px;183 cursor: pointer;184 height: 20px;185 position: absolute;186 right: 0;187 text-indent: -9999px;188 top: 11px;189 width: 20px;190}191 192.sort-container {193 margin: 0 auto;194 max-width: 500px;195 padding: 10px 0;196 position: relative;197 text-align: center;198}199 200.sort-container a {201 text-decoration: none;202}203 204button {205 background-color: white;206 border: none;207 border-radius: 5px;208 cursor: pointer;209 font-size: 70%;210 font-weight: lighter;211 padding: 10px 15px;212 text-transform: uppercase;213 transition: all 0.3s ease 0s;214}215 216button:hover {217 background-color: #cce5fe;218}219 220.reset {221 color: #db6ae6;222}223 224main {225 border-bottom: 4px solid #db6ae6;226}227 228.sites {229 display: grid;230 grid-gap: 20px 14px;231 grid-template-columns: repeat(4, 1fr);232 margin: 0 auto;233 max-width: 1000px;234 min-height: 143px;235 padding: 30px 0;236}237 238.sites a {239 color: #db6ae6;240 text-decoration: none;241}242 243.sites a:hover {244 color: #283840;245 text-decoration: underline;246}247 248.no-results {249 display: none;250 font-weight: bold;251 grid-column: span 4;252 text-align: center;253}254 255.site-block .site-header {256 color: white;257 direction: ltr;258 display: block;259 font-size: 16px;260 font-weight: bold;261 line-height: 1;262 padding: 10px;263}264 265.site-block .site-header:hover {266 color: white;267 text-decoration: none;268}269 270.tooltip-content.toggled {271 width: 500px;272}273 274.site-block.easy .site-header {275 background-color: #7BAC7B;276 border: 1px solid #5D895D;277}278.site-block.easy .site-header:hover {279 background-color: #5D895D;280}281 282.site-block.medium .site-header {283 background-color: #E8C674;284 border: 1px solid #C5A65C;285}286.site-block.medium .site-header:hover {287 background-color: #C5A65C;288}289 290.site-block.hard .site-header {291 background-color: #D04343;292 border: 1px solid #AC4949;293}294.site-block.hard .site-header:hover {295 background-color: #AC4949;296}297 298.site-block.impossible .site-header {299 background-color: #2B2B2B;300 border: 1px solid black;301}302.site-block.impossible .site-header:hover {303 background-color: black;304}305 306.site-block .site-difficulty {307 background-color: #EAEBED;308 border: 1px solid #BFC6CC;309 border-top: 0;310 color: #293840;311 font-size: 12px;312 font-weight: bold;313 line-height: 0;314 margin: 0;315 padding: 15px 10px;316 text-transform: uppercase;317}318 319.site-block .tooltip-content {320 background-color: #EAEBED;321 border: 1px solid #BFC6CC;322 border-top: 0;323 color: #293840;324 display: none;325 font-size: 12px;326 line-height: 1.5;327 margin: 0;328 padding: 10px;329}330 331.site-block .tooltip-toggle {332 background-color: #EAEBED;333 border: 1px solid #BFC6CC;334 border-top: 0;335 color: #878787;336 display: block;337 font-size: 10px;338 font-weight: bold;339 line-height: 0;340 margin: 0;341 padding: 15px 10px;342 text-transform: uppercase;343}344 345.site-block .tooltip-toggle.contains-info {346 color: #293840;347}348 349.site-block.easy .tooltip-toggle.contains-info:hover { color: #7BAC7B; }350.site-block.medium .tooltip-toggle.contains-info:hover { color: #E8C674; }351.site-block.hard .tooltip-toggle.contains-info:hover { color: #D04343; }352.site-block.impossible .tooltip-toggle.contains-info:hover { color: #2B2B2B; }353 354.hide-info {355 display: none;356}357 358.toggled + .tooltip-toggle > .show-info {359 display: none;360}361.toggled + .tooltip-toggle > .hide-info {362 display: inline;363}364 365.info-container,366.banner-content {367 margin: 0 auto;368 max-width: 1000px;369 padding: 20px 0;370}371 372.info-container::after,373.banner-content::after {374 clear: both;375 content: '';376 display: block;377}378 379.info-block-half,380.banner-block .banner-block-half {381 float: left;382 padding: 0 20px;383 width: 50%;384}385 386.info-block {387 background-color: #293840;388 color: #9FB3BE;389}390 391.info-container a {392 color: white;393 text-decoration: none;394}395 396.info-container a:hover {397 color: #db6ae6;398}399 400.info-container h2 {401 color: white;402 font-weight: 200;403 margin: 0;404 padding-bottom: 10px;405}406 407.info-container p {408 font-size: 14px;409 line-height: 1.5;410 margin: 0 0 10px;411}412 413.info-container ul {414 padding: 0;415}416 417.info-container li {418 font-size: 14px;419 margin: 5px 0;420}421 422.info-container .difficulty {423 color: white;424 display: inline-block;425 font-weight: bold;426 line-height: 1;427 padding: 6px 12px;428}429 430.info-container .easy .difficulty {431 background-color: #7BAC7B;432 border: 1px solid #5D895D;433}434.info-container .medium .difficulty {435 background-color: #E8C674;436 border: 1px solid #C5A65C;437}438.info-container .hard .difficulty {439 background-color: #D04343;440 border: 1px solid #AC4949;441}442.info-container .impossible .difficulty {443 background-color: #2B2B2B;444 border: 1px solid black;445}446 447.banner-block {448 background-color: #7BAC7B;449 color: white;450}451 452.banner-block h2 {453 font-weight: 200;454}455 456.banner-block p {457 font-size: 14px;458 line-height: 1.5;459 margin: 0;460 margin-bottom: 10px;461}462 463.banner-block a {464 color: #2B2B2B;465 font-weight: bold;466 text-decoration: none;467}468 469.banner-block a:hover {470 color: #db6ae6;471}472 473.banner-block ul {474 padding: 0;475}476 477.banner-block li {478 font-size: 14px;479 list-style: none;480 padding: 5px;481}482 483.banner-block li .dot-wrapper {484 background-color: #EAEBED;485 border: 1px solid #BFC6CC;486 border-radius: 3px;487 display: inline-block;488 height: 20px;489 padding: 4px 4px;490 vertical-align: middle;491 width: 20px;492}493.banner-block li .dot {494 border-radius: 5px;495 display: block;496 height: 10px;497 width: 10px;498}499.banner-block li .dot.easy {500 background-color: #7BAC7B;501 border: 1px solid #5D895D;502}503.banner-block li .dot.medium {504 background-color: #E8C674;505 border: 1px solid #C5A65C;506}507.banner-block li .dot.hard {508 background-color: #D04343;509 border: 1px solid #AC4949;510}511.banner-block li .dot.impossible {512 background-color: #2B2B2B;513 border: 1px solid black;514}515 516.banner-block .banner-block-extension {517 background-image: url('../img/block.png');518 background-position: center bottom;519 background-repeat: no-repeat;520 background-size: 100%;521 height: 100px;522 margin: 0 auto;523 max-width: 540px;524}525 526footer {527 border-top: 1px solid #9FB3BE;528 color: #9FB3BE;529 font-size: 12px;530 margin-top: 30px;531 padding: 10px 0 20px 0;532 text-align: center;533}534 535.share-buttons {536 float: right;537}538 539[dir="rtl"] .share-buttons {540 float: left;541}542 543/* Media queries */544@media only screen and (max-width: 1000px) {545 .sites {546 grid-template-columns: repeat(3, 1fr);547 }548 .no-results {549 grid-column: span 3;550 }551}552 553@media only screen and (max-width: 560px) {554 header {555 padding: 40px 20px;556 }557 .search {558 padding: 10px 20px;559 }560 .sites {561 grid-template-columns: repeat(2, 1fr);562 }563 .no-results {564 grid-column: span 2;565 }566 .info-block-half,567 .banner-block-half {568 width: 100%;569 }570 .share-buttons {571 float: none;572 margin-top: 10px;573 }574}575 576@media only screen and (max-width: 480px) {577 .sites {578 grid-template-columns: repeat(1, 1fr);579 }580 .no-results {581 grid-column: auto;582 }583}584 585 586 587.dropdown {588 position: absolute;589 z-index: 9999999;590 display: none;591}592 593.dropdown .dropdown-menu,594.dropdown .dropdown-panel {595 min-width: 160px;596 max-width: 360px;597 list-style: none;598 background: #D4D8DC;599 border: solid 1px #DDD;600 border: solid 1px rgba(0, 0, 0, .2);601 /*border-radius: 6px;*/602 box-shadow: 0 5px 10px rgba(0, 0, 0, .2);603 overflow: visible;604 padding: 4px 0;605 margin: 0;606}607 608.dropdown .dropdown-panel {609 padding: 10px;610}611 612.dropdown.dropdown-tip {613 margin-top: 8px;614}615 616.dropdown.dropdown-tip:before {617 position: absolute;618 top: -6px;619 left: 9px;620 content: '';621 border-left: 7px solid transparent;622 border-right: 7px solid transparent;623 border-bottom: 7px solid #CCC;624 border-bottom-color: rgba(0, 0, 0, 0.2);625 display: inline-block;626}627 628.dropdown.dropdown-tip.dropdown-anchor-right:before {629 left: auto;630 right: 9px;631}632 633.dropdown.dropdown-tip:after {634 position: absolute;635 top: -5px;636 left: 10px;637 content: '';638 border-left: 6px solid transparent;639 border-right: 6px solid transparent;640 border-bottom: 6px solid #D4D8DC;641 display: inline-block;642}643 644.dropdown.dropdown-tip.dropdown-anchor-right:after {645 left: auto;646 right: 10px;647}648 649 650.dropdown.dropdown-scroll .dropdown-menu,651.dropdown.dropdown-scroll .dropdown-panel {652 max-height: 358px;653 overflow: auto;654}655 656.dropdown .dropdown-menu LI {657 list-style: none;658 padding: 0 0;659 margin: 0;660 line-height: 18px;661}662 663.dropdown .dropdown-menu LI > A,664.dropdown .dropdown-menu LABEL {665 display: block;666 color: #555;667 text-decoration: none;668 line-height: 18px;669 padding: 3px 15px;670 white-space: nowrap;671}672 673.dropdown .dropdown-menu LI > A:hover,674.dropdown .dropdown-menu LABEL:hover {675 background-color: #798287;676 color: #FFF;677 cursor: pointer;678}679 680.dropdown .dropdown-menu .dropdown-divider {681 font-size: 1px;682 border-top: solid 1px #E5E5E5;683 padding: 0;684 margin: 5px 0;685}686 687/* Icon Examples - icons courtesy of http://p.yusukekamiyamane.com/ */688.dropdown.has-icons LI > A {689 padding-left: 30px;690 background-position: 8px center;691 background-repeat: no-repeat;692}693 694.dropdown .undo A { background-image: url(icons/arrow-curve-180-left.png); }695.dropdown .redo A { background-image: url(icons/arrow-curve.png); }696.dropdown .cut A { background-image: url(icons/scissors.png); }697.dropdown .copy A { background-image: url(icons/document-copy.png); }698.dropdown .paste A { background-image: url(icons/clipboard.png); }699.dropdown .delete A { background-image: url(icons/cross-script.png); }700 </style>701 <title>702 Just What's The Data - A directory of information for you to acknowledge the amount of data that web services gather from you.703 </title>704 <meta charset="utf-8">705 <meta content="width=device-width,initial-scale=1" name="viewport">706 <!-- Cloudflare Web Analytics -->707 <!-- End Cloudflare Web Analytics -->708 </head>709 <body class="js-on" lang="en-GB" style>710 <nav>711 <!-- begin language switcher -->712 <span class="language-switch" data-dropdown="#language-dropdown" id="en-GB">713 English714 </span>715 <!-- end language switcher -->716 <a class="info">717 About718 </a>719 </nav>720 <header>721 <h1>722 Just723 <span>724 Whats725 </span>726 The727 <span>728 Data729 </span>730 </h1>731 <p class="tagline">732 A directory of information for you to acknowledge the amount of data that web services gather from you.733 </p>734 <p>735 <!-- <a class="button banner">Google Chrome Extension</a> -->736 <a class="button jdm">737 Visit JustGetMyData738 </a>739 <a class="button">740 Contribute on GitHub741 </a>742 <a class="button">743 Translate on Crowdin744 </a>745 <a class="button">746 Tweet JWTD747 </a>748 </p>749 </header>750 <div class="search">751 <div class="search-container">752 <input id="search" type="text">753 <label for="search">754 search755 </label>756 </div>757 <div class="sort-container">758 <button class="popular">759 Popular760 </button>761 <button class="az-sort" data-dropdown="#alphabetical-dropdown">762 A - Z763 </button>764 <button class="diff-sort" data-dropdown="#difficulty-dropdown">765 Quantity766 </button>767 <button class="reset">768 Reset769 </button>770 </div>771 </div>772 <main>773 <section class="sites" id="sites">774 <p class="no-results">775 Can't find what you're looking for?776 <a>777 Help make JustWhatsTheData better778 </a>779 .780 </p>781 <section class="site-block easy">782 <a class="site-header">783 1688784 </a>785 <p class="site-difficulty">786 Low787 </p>788 <div class="tooltip-content">789 <ul>790 <li>791 Basic personal data (name, birthdate, e-mail, tlf. number...).792 </li>793 <li>794 Basic device info (IP address, browser, type of device...).795 </li>796 <li>797 Payment data.798 </li>799 <li>800 Browsing data and use of their web/app (pages and links visited, games...).801 </li>802 </ul>803 </div>804 <a class="tooltip-toggle contains-info">805 <span class="show-info">806 show info...807 </span>808 <span class="hide-info">809 hide info...810 </span>811 </a>812 </section>813 <section class="site-block medium">814 <a class="site-header">815 Adobe816 </a>817 <p class="site-difficulty">818 Medium819 </p>820 <div class="tooltip-content">821 <ul>822 <li>823 Basic personal data (name, birthdate, e-mail, tlf. number...).824 </li>825 <li>826 Address.827 </li>828 <li>829 Basic device info (IP address, browser, type of device...).830 </li>831 <li>832 Payment data.833 </li>834 </ul>835 </div>836 <a class="tooltip-toggle contains-info">837 <span class="show-info">838 show info...839 </span>840 <span class="hide-info">841 hide info...842 </span>843 </a>844 </section>845 <section class="site-block medium">846 <a class="site-header">847 Alibaba848 </a>849 <p class="site-difficulty">850 Medium851 </p>852 <div class="tooltip-content">853 <ul>854 <li>855 Basic personal data (name, birthdate, e-mail, tlf. number...).856 </li>857 <li>858 Address.859 </li>860 <li>861 Basic device info (IP address, browser, type of device...).862 </li>863 <li>864 Payment data.865 </li>866 </ul>867 </div>868 <a class="tooltip-toggle contains-info">869 <span class="show-info">870 show info...871 </span>872 <span class="hide-info">873 hide info...874 </span>875 </a>876 </section>877 <section class="site-block medium">878 <a class="site-header">879 Aliexpress880 </a>881 <p class="site-difficulty">882 Medium883 </p>884 <div class="tooltip-content">885 <ul>886 <li>887 Basic personal data (name, birthdate, e-mail, tlf. number...).888 </li>889 <li>890 Address.891 </li>892 <li>893 Susceptive personal data (tax identification, DNI, nationality, employment situation...).894 </li>895 <li>896 Basic device info (IP address, browser, type of device...).897 </li>898 </ul>899 </div>900 <a class="tooltip-toggle contains-info">901 <span class="show-info">902 show info...903 </span>904 <span class="hide-info">905 hide info...906 </span>907 </a>908 </section>909 <section class="site-block medium" data-popular>910 <a class="site-header">911 Amazon912 </a>913 <p class="site-difficulty">914 Medium915 </p>916 <div class="tooltip-content">917 <ul>918 <li>919 Basic personal data (name, birthdate, e-mail, tlf. number...).920 </li>921 <li>922 Address.923 </li>924 <li>925 Basic device info (IP address, browser, type of device...).926 </li>927 <li>928 Payment data.929 </li>930 </ul>931 </div>932 <a class="tooltip-toggle contains-info">933 <span class="show-info">934 show info...935 </span>936 <span class="hide-info">937 hide info...938 </span>939 </a>940 </section>941 <section class="site-block hard" data-popular>942 <a class="site-header">943 Apple944 </a>945 <p class="site-difficulty">946 Lots947 </p>948 <div class="tooltip-content">949 <ul>950 <li>951 Basic personal data (name, birthdate, e-mail, tlf. number...).952 </li>953 <li>954 Address.955 </li>956 <li>957 Susceptive personal data (tax identification, DNI, nationality, employment situation...).958 </li>959 <li>960 Basic device info (IP address, browser, type of device...).961 </li>962 </ul>963 </div>964 <a class="tooltip-toggle contains-info">965 <span class="show-info">966 show info...967 </span>968 <span class="hide-info">969 hide info...970 </span>971 </a>972 </section>973 <section class="site-block medium">974 <a class="site-header">975 Badoo976 </a>977 <p class="site-difficulty">978 Medium979 </p>980 <div class="tooltip-content">981 <ul>982 <li>983 Basic personal data (name, birthdate, e-mail, tlf. number...).984 </li>985 <li>986 Basic device info (IP address, browser, type of device...).987 </li>988 <li>989 Payment data.990 </li>991 <li>992 Browsing data and use of their web/app (pages and links visited, games...).993 </li>994 </ul>995 </div>996 <a class="tooltip-toggle contains-info">997 <span class="show-info">998 show info...999 </span>1000 <span class="hide-info">1001 hide info...1002 </span>1003 </a>1004 </section>1005 <section class="site-block easy">1006 <a class="site-header">1007 BBVA1008 </a>1009 <p class="site-difficulty">1010 Low1011 </p>1012 <div class="tooltip-content">1013 <ul>1014 <li>1015 Basic personal data (name, birthdate, e-mail, tlf. number...).1016 </li>1017 <li>1018 Address.1019 </li>1020 <li>1021 Susceptive personal data (tax identification, DNI, nationality, employment situation...).1022 </li>1023 <li>1024 Basic device info (IP address, browser, type of device...).1025 </li>1026 </ul>1027 </div>1028 <a class="tooltip-toggle contains-info">1029 <span class="show-info">1030 show info...1031 </span>1032 <span class="hide-info">1033 hide info...1034 </span>1035 </a>1036 </section>1037 <section class="site-block easy">1038 <a class="site-header">1039 Binance1040 </a>1041 <p class="site-difficulty">1042 Low1043 </p>1044 <div class="tooltip-content">1045 <ul>1046 <li>1047 Basic personal data (name, birthdate, e-mail, tlf. number...).1048 </li>1049 <li>1050 Address.1051 </li>1052 <li>1053 Susceptive personal data (tax identification, DNI, nationality, employment situation...).1054 </li>1055 <li>1056 Basic device info (IP address, browser, type of device...).1057 </li>1058 </ul>1059 </div>1060 <a class="tooltip-toggle contains-info">1061 <span class="show-info">1062 show info...1063 </span>1064 <span class="hide-info">1065 hide info...1066 </span>1067 </a>1068 </section>1069 <section class="site-block medium">1070 <a class="site-header">1071 Board Game Geek1072 </a>1073 <p class="site-difficulty">1074 Medium1075 </p>1076 <div class="tooltip-content">1077 <ul>1078 <li>1079 Basic personal data (name, birthdate, e-mail, tlf. number...).1080 </li>1081 <li>1082 Address.1083 </li>1084 <li>1085 Basic device info (IP address, browser, type of device...).1086 </li>1087 <li>1088 Payment data.1089 </li>1090 </ul>1091 </div>1092 <a class="tooltip-toggle contains-info">1093 <span class="show-info">1094 show info...1095 </span>1096 <span class="hide-info">1097 hide info...1098 </span>1099 </a>1100 </section>1101 <section class="site-block medium">1102 <a class="site-header">1103 Booking1104 </a>1105 <p class="site-difficulty">1106 Medium1107 </p>1108 <div class="tooltip-content">1109 <ul>1110 <li>1111 Basic personal data (name, birthdate, e-mail, tlf. number...).1112 </li>1113 <li>1114 Address.1115 </li>1116 <li>1117 Basic device info (IP address, browser, type of device...).1118 </li>1119 <li>1120 Payment data.1121 </li>1122 </ul>1123 </div>1124 <a class="tooltip-toggle contains-info">1125 <span class="show-info">1126 show info...1127 </span>1128 <span class="hide-info">1129 hide info...1130 </span>1131 </a>1132 </section>1133 <section class="site-block hard">1134 <a class="site-header">1135 Coinbase1136 </a>1137 <p class="site-difficulty">1138 Lots1139 </p>1140 <div class="tooltip-content">1141 <ul>1142 <li>1143 Basic personal data (name, birthdate, e-mail, tlf. number...).1144 </li>1145 <li>1146 Address.1147 </li>1148 <li>1149 Susceptive personal data (tax identification, DNI, nationality, employment situation...).1150 </li>1151 <li>1152 Basic device info (IP address, browser, type of device...).1153 </li>1154 </ul>1155 </div>1156 <a class="tooltip-toggle contains-info">1157 <span class="show-info">1158 show info...1159 </span>1160 <span class="hide-info">1161 hide info...1162 </span>1163 </a>1164 </section>1165 <section class="site-block medium">1166 <a class="site-header">1167 Craigslist1168 </a>1169 <p class="site-difficulty">1170 Medium1171 </p>1172 <div class="tooltip-content">1173 <ul>1174 <li>1175 Precise location (using gps and/or bluetooth).1176 </li>1177 <li>1178 Address.1179 </li>1180 <li>1181 Basic device info (IP address, browser, type of device...).1182 </li>1183 <li>1184 Payment data.1185 </li>1186 </ul>1187 </div>1188 <a class="tooltip-toggle contains-info">1189 <span class="show-info">1190 show info...1191 </span>1192 <span class="hide-info">1193 hide info...1194 </span>1195 </a>1196 </section>1197 <section class="site-block hard">1198 <a class="site-header">1199 Discord1200 </a>