Haveibeenpwned: With Result

<div class="o-haveibeenpwned">
    <form action="/" method="post" novalidate="novalidate" id="pwnedSearch">
        <div class="o-search">
            <div class="o-search__padded u-p-b-1">
                <div class="row display-flex align-items-center">
                    <div class="grid-auto u-p-r-0">
                        <span class="o-search__icon">
                            <svg class="icon">
                                <use xlink:href="#icon-search"></use>
                            </svg>
                        </span>
                    </div>
                    <div class="grid u-p-l-0 display-flex">
                        <label for="account" class="u-visuallyhidden">Se om din e-post ha läckt</label>
                        <input name="account" type="search" placeholder="Ange din e-postadress" id="account" class="o-search__input js-search-domain-input">
                        <button id="o-search-result-submit" type="submit" class="a-button a-button--ocean-light a-button--large o-search__submit">
                            <span class="a-button__text">Sök</span>
                        </button>
                        <script>
                            document.querySelector('#pwnedSearch').addEventListener('submit', function(e) {
                                e.preventDefault();
                                window._mtm.push({
                                    'event': 'check_email'
                                });
                            });
                        </script>
                    </div>
                </div>
                <div class="row u-p-t-2">
                    <div class="grid-auto" style="margin-left:auto;">
                        <button type="button" class="a-button a-button--icon a-button--transparent u-p-x-0" data-a11y-toggle="haveibeenpwnedInfo" aria-controls="haveibeenpwnedInfo" data-toggle-text="Hur fungerar tjänsten?|Stäng" data-toggle-icon="questionmark|close" data-toggle-icon-target="howDoesItWorkIcon" data-toggle-target="haveibeenpwnedToggleText">
                            <span class="a-button__text" id="haveibeenpwnedToggleText">Hur fungerar den här tjänsten?</span>
                            <svg class="o-haveibeenpwned__btn-icon icon a-button__icon u-icon--medium" id="howDoesItWorkIcon">
                                <use xlink:href="#icon-questionmark"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="grid-18 o-haveibeenpwned__info" id="haveibeenpwnedInfo" data-focus-trap="false" aria-hidden="true">
                        <div class="m-alert m-alert--info u-m-b-2">
                            <h2>Hur fungerar tjänsten?</h2>
                            <p>Nulla hendrerit lorem nec lectus auctor feugiat. Phasellus posuere lobortis mauris, eget feugiat massa consectetur sit amet.</p>
                            <h2>En "läcka" är en incident där data oavsiktligt har exponerats för allmänheten</h2>
                            <p>Donec mollis elementum porttitor. In hac habitasse platea dictumst. In non augue velit. Pellentesque luctus tellus sit amet libero fringilla, sit amet feugiat ex pellentesque. </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="o-haveibeenpwned__result">
        <h2 class="alpha u-align-center u-p-t-4 color-ruby">
            Ojdå! Din e-post har läckt!
        </h2>
        <p class="u-align-center u-m-b-0">Vi hittade 13 dataläckor</p>
        <div class="display-flex align-items-baseline">
            <h3 class="beta u-p-t-4">
                Lösenordsläckor
            </h3>
            <button type="button" class="a-button a-button--icon a-button--transparent" data-a11y-toggle="seriousLeaks" aria-controls="seriousLeaks" data-toggle-icon-target="seriousLeaksIcon" data-toggle-text="Vad kan jag göra?|Stäng" data-toggle-icon="questionmark|close" data-toggle-target="seriousLeaksText">
                <span class="a-button__text" id="seriousLeaksText">Vad kan jag göra?</span>
                <svg class="icon a-button__icon u-icon--medium" id="seriousLeaksIcon">
                    <use xlink:href="#icon-questionmark"></use>
                </svg>
            </button>
        </div>
        <div class="o-haveibeenpwned__actions" id="seriousLeaks" data-focus-trap="false" aria-hidden="true">
            <div class="m-alert m-alert--info u-m-b-2">
                Text om åtgärder efter lösenordsläckor
            </div>
        </div>
        <table id="haveibeenpwnd">
            <thead>
                <tr>
                    <th class="o-haveibeenpwned__result__first-col">Tjänster</th>
                    <th>Vad har läckt?</th>
                </tr>
            </thead>
            <tbody>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--severe">
                    <td class="o-haveibeenpwned__result__first-col">
                        <a href="https://adobe.com" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/Adobe.png">
                                Adobe
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">Oktober 2013</time>
                        Email addresses, Password hints, Passwords, Usernames
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--severe">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/Hemmakvall.png">
                                Hemmakväll
                            </div>
                        </a>
                    <td>
                        <time class="a-meta">Juli 2015</time>
                        Email addresses, Names, Passwords, Phone numbers, Physical addresses
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--severe">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/LinkedIn.png">
                                LinkedIn
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">Maj 2016</time>
                        Email addresses, Passwords
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--severe">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/MySpace.png">
                                MySpace
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">2008</time>
                        Email addresses, Passwords, Usernames
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--severe">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/Lastfm.png">
                                Lastfm
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">Mars 2012</time>
                        Email addresses, Passwords, Usernames, Website activity
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--severe">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/SweClockers.png">
                                SweClockers
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">2015</time>
                        Email addresses, Passwords, Usernames
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--severe">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/imgur.png">
                                imgur
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">September 2013</time>
                        Email addresses, Passwords
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="display-flex align-items-baseline">
            <h3 class="beta u-p-t-4">
                Personuppgiftsläckor
            </h3>
            <button type="button" class="a-button a-button--icon a-button--transparent" data-a11y-toggle="moderateLeaks" aria-controls="moderateLeaks" data-toggle-icon-target="moderateLeaksIcon" data-toggle-text="Vad kan jag göra?|Stäng" data-toggle-icon="questionmark|close" data-toggle-target="moderateLeaksText">
                <span class="a-button__text" id="moderateLeaksText">Vad kan jag göra?</span>
                <svg class="icon a-button__icon u-icon--medium" id="moderateLeaksIcon">
                    <use xlink:href="#icon-questionmark"></use>
                </svg>
            </button>
        </div>
        <div class="o-haveibeenpwned__actions" id="moderateLeaks" data-focus-trap="false" aria-hidden="true">
            <div class="m-alert m-alert--info u-m-b-2">
                Text om åtgärder efter personuppgiftsläckor
            </div>
        </div>
        <table>
            <thead>
                <tr>
                    <th class="o-haveibeenpwned__result__first-col">Tjänster</th>
                    <th>Vad har läckt?</th>
                </tr>
            </thead>
            <tbody>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--medium">
                    <td class="o-haveibeenpwned__result__first-col">
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/VerificationsIO.png">
                                VerificationsIO
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">Februari 2019</time>
                        Dates of birth, Email addresses, Employers, Genders, Geographic locations, IP addresses, Job titles, Names, Phone numbers, Physical addresses
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--medium">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/List.png">
                                PDL
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">Oktober 2019</time>
                        Email addresses, Employers, Geographic locations, Job titles, Names, Phone numbers, Social media profiles
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--medium">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/LinkedIn.png">
                                LinkedInScrape
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">2021</time>
                        Education levels, Email addresses, Genders, Geographic locations, Job titles, Names, Social media profiles
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--medium">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/Gravatar.png">
                                Gravatar
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">Oktober 2020</time>
                        Email addresses, Names, Usernames
                    </td>
                </tr>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--medium">
                    <td>
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/Twitter.png">
                                Twitter
                            </div>
                        </a>
                    </td>
                    <td>
                        <time class="a-meta">2023</time>
                        Email addresses, Names, Social media profiles, Usernames
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="display-flex align-items-baseline">
            <h3 class="beta u-p-t-4">
                Övriga läckor
            </h3>
            <button type="button" class="a-button a-button--icon a-button--transparent" data-a11y-toggle="minorLeaks" aria-controls="minorLeaks" data-toggle-icon-target="minorLeaksIcon" data-toggle-text="Vad kan jag göra?|Stäng" data-toggle-icon="questionmark|close" data-toggle-target="minorLeaksText">
                <span class="a-button__text" id="minorLeaksText">Vad kan jag göra?</span>
                <svg class="icon a-button__icon u-icon--medium" id="minorLeaksIcon">
                    <use xlink:href="#icon-questionmark"></use>
                </svg>
            </button>
        </div>
        <div class="o-haveibeenpwned__actions" id="minorLeaks" data-focus-trap="false" aria-hidden="true">
            <div class="m-alert m-alert--info u-m-b-2">
                Text om åtgärder efter övriga läckor
            </div>
        </div>
        <table>
            <thead>
                <tr>
                    <th class="o-haveibeenpwned__result__first-col">Tjänster</th>
                    <th>Vad har läckt?</th>
                </tr>
            </thead>
            <tbody>
                <tr class="o-haveibeenpwned__result__item o-haveibeenpwned__result__item--low">
                    <td class="o-haveibeenpwned__result__first-col">
                        <a href="#" target="_blank" rel="nofollow noreferrer" class="o-haveibeenpwned__result__item__link">
                            <div class="o-haveibeenpwned__result__item__logo">
                                <img loading="lazy" width="50" height="50" src="https://haveibeenpwned.com/Content/Images/PwnedLogos/Luxottica.png"">
									Luxottica
								</div>
							</a>
						</td>
						<td>
							<time class=" a-meta">Februari 2010</time>
                                IP addresses
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <p class="u-font-size-medium u-p-2 u-align-center">Tjänsten tillhandahålls av <a href="https://haveibeenpwned.com" target="_blank" rel="nofollow noreferrer">haveibeenpwned.com</a> därför gäller deras <a href="https://haveibeenpwned.com/TermsOfUse" target="_blank" rel="nofollow noreferrer">användarvillkor</a> samt <a href="https://haveibeenpwned.com/Privacy" target="_blank" rel="nofollow noreferrer">integritetspolicy</a>. Här kan du läsa mer om hur <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy/" target="_blank">Internetstiftelsen behandlar personuppgifter</a>.</p>
</div>