| <html><head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <title>HTML checker</title> |
| <meta name="description" content="REE"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="stylesheet" async="" href="/css/style-dist.css"> |
| <link rel="stylesheet" async="" href="/hs/styles/a11y-dark.css"> |
| <link rel="apple-touch-icon" sizes="57x57" href="/ico/apple-icon-57x57.png"> |
| <link rel="apple-touch-icon" sizes="60x60" href="/ico/apple-icon-60x60.png"> |
| <link rel="apple-touch-icon" sizes="72x72" href="/ico/apple-icon-72x72.png"> |
| <link rel="apple-touch-icon" sizes="76x76" href="/ico/apple-icon-76x76.png"> |
| <link rel="apple-touch-icon" sizes="114x114" href="/ico/apple-icon-114x114.png"> |
| <link rel="apple-touch-icon" sizes="120x120" href="/ico/apple-icon-120x120.png"> |
| <link rel="apple-touch-icon" sizes="144x144" href="/ico/apple-icon-144x144.png"> |
| <link rel="apple-touch-icon" sizes="152x152" href="/ico/apple-icon-152x152.png"> |
| <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-icon-180x180.png"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script> |
| <link rel="icon" type="image/png" sizes="192x192" href="/ico/android-icon-192x192.png"> |
| <link rel="icon" type="image/png" sizes="32x32" href="/ico/favicon-32x32.png"> |
| <link rel="icon" type="image/png" sizes="96x96" href="/ico/favicon-96x96.png"> |
| <link rel="icon" type="image/png" sizes="16x16" href="/ico/favicon-16x16.png"> |
| <link rel="manifest" href="/manifest.webmanifest"> |
| <script src="/js/script.js"></script> |
| <script src="/js/granim.min.js"></script> |
| <script src="/js/jquery-3.4.1-dist.js"></script> |
| <script src="/hs/highlight.pack2.js"></script> |
| <script src="/hs/highlightjs-line-numbers.min.js"></script><style type="text/css">.hljs-ln{border-collapse:collapse}.hljs-ln td{padding:0}.hljs-ln-n:before{content:attr(data-line-number)}</style> |
| <script> |
| hljs.initHighlightingOnLoad(); |
| hljs.initLineNumbersOnLoad(); |
| </script> |
| |
| |
| <style type="text/css"> |
| @keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}</style></head> |
| |
| <body onload="checkEmpty();setTimeout(function(){ document.querySelector(".page-loader").style.display = "none"; }, 2000);" data-gr-c-s-loaded="true" class="clickup-chrome-ext_installed"> |
| <nav class="navbar is-dark" role="navigation" aria-label="main navigation"> |
| <div class="navbar-brand"> |
| <a class="navbar-item" href="/"> |
| <i class="far fa-universal-access"></i> |
| </a> |
| |
| <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> |
| <span aria-hidden="true"></span> |
| <span aria-hidden="true"></span> |
| <span aria-hidden="true"></span> |
| </a> |
| </div> |
| |
| <div id="navbarBasicExample" class="navbar-menu"> |
| <div class="navbar-start"> |
| <a class="navbar-item"> |
| Home |
| </a> |
| |
| <a class="navbar-item"> |
| Documentation |
| </a> |
| |
| </div> |
| |
| <div class="navbar-end"> |
| <div class="navbar-item"> |
| <div class="buttons"> |
| <a class="button is-light"> |
| Log in |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
| <img> |
| <img> |
| <img> |
| <div class="page-loader" style="display: none;"> |
| <div class="spinner"> |
| <div class="rect1"></div> |
| <div class="rect2"></div> |
| <div class="rect3"></div> |
| <div class="rect4"></div> |
| <div class="rect5"></div> |
| </div> |
| |
| </div> |
| <section class="hero is-info"> |
| <canvas id="canvas-basic" class="animate" width="2195" height="176"> |
| </canvas> |
| <div class="hero-body"> |
| <div class="container"> |
| <h1 class="title has-text-centered"> |
| Results |
| </h1> |
| |
| </div> |
| </div> |
| </section> |
| |
| <div class="container is-fluid is-small"> |
| <div class="notification is-link"> |
| Please note the animations will take some time to load smoothly, especially for longer sites |
| </div> |
| |
| <section class="info-tile"> |
| <h1 class="has-text-white title-header header-b">Accessibility Issues</h1> |
| <article class="info-wrapper is-child box"> |
| <div class="error-wrapper-alt" id="a-issues"> |
| <div class="issue-wrapper"> |
| <div class="issue-header a"> |
| <i class="fas fa-image"></i> | Missing alt attr |
| <div class="icon-right"> |
| <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt" target="_blank"><i class="far fa-book"></i></a> |
| <i class="fas fa-search" onclick="openModalNum(8)"></i> |
| <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-3k7s0du2')"></i> |
| </div> |
| </div> |
| <div class="show-on-expand" id="div-id-3k7s0du2"> |
| <div class="example"> |
| <center> I'm centered text! </center> |
| |
| </div> |
| </div> |
| </div> |
| |
| |
| |
| |
| </div> |
| </article> |
| <h1 class="has-text-white title-header header-a">Old Tags</h1> |
| <article class="info-wrapper is-child box"> |
| <div class="error-wrapper-alt" id="old-issues"> |
| |
| |
| |
| |
| <div class="issue-wrapper"> |
| <div class="issue-header o"> |
| <i class="fas fa-code"></i> | Tag obsolete, use CSS |
| <div class="icon-right"> |
| <a href="" target="_blank"><i class="far fa-book"></i></a> |
| <i class="fas fa-search" onclick="openModalNum(2)"></i> |
| <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-zg92vhls')"></i> |
| </div> |
| </div> |
| <div class="show-on-expand" id="div-id-zg92vhls"> |
| Element Preview |
| <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag"><<span class="hljs-name">br</span>></span> </code></pre> |
| Potential Fixes |
| <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-comment"><!-- No solution found --></span></code></pre> |
| <button class="button is-dark copy" data-copy="<!-- No solution found -->">Copy Solution</button> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| <div class="issue-wrapper"> |
| <div class="issue-header o"> |
| <i class="fas fa-code"></i> | Tag obsolete, use CSS |
| <div class="icon-right"> |
| <a href="" target="_blank"><i class="far fa-book"></i></a> |
| <i class="fas fa-search" onclick="openModalNum(5)"></i> |
| <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-e95p2ank')"></i> |
| </div> |
| </div> |
| <div class="show-on-expand" id="div-id-e95p2ank"> |
| Element Preview |
| <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag"><<span class="hljs-name">center</span>></span><span class="hljs-tag"></<span class="hljs-name">center</span>></span></code></pre> |
| Potential Fixes |
| <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-centered"</span>></span><span class="hljs-comment"><!-- elements here --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css"><span class="hljs-selector-class">.text-centered</span>{<span class="hljs-attribute">text-align</span>: center;}</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span></code></pre> |
| <button class="button is-dark copy" data-copy="<div class="text-centered"><!-- elements here --></div><style>.text-centered{text-align: center;}</style>">Copy Solution</button> |
| </div> |
| </div> |
| |
| |
| |
| <div class="issue-wrapper"> |
| <div class="issue-header o"> |
| <i class="fas fa-code"></i> | Tag obsolete, use CSS |
| <div class="icon-right"> |
| <a href="" target="_blank"><i class="far fa-book"></i></a> |
| <i class="fas fa-search" onclick="openModalNum(6)"></i> |
| <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-p5cqbw8y')"></i> |
| </div> |
| </div> |
| <div class="show-on-expand" id="div-id-p5cqbw8y"> |
| Element Preview |
| <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag"><<span class="hljs-name">center</span>></span><span class="hljs-tag"></<span class="hljs-name">center</span>></span></code></pre> |
| Potential Fixes |
| <pre style="display:block;"><code class="language-html hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-centered"</span>></span><span class="hljs-comment"><!-- elements here --></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css"><span class="hljs-selector-class">.text-centered</span>{<span class="hljs-attribute">text-align</span>: center;}</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span></code></pre> |
| <button class="button is-dark copy" data-copy="<div class="text-centered"><!-- elements here --></div><style>.text-centered{text-align: center;}</style>">Copy Solution</button> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| |
| </div> |
| </article> |
| <h1 class="has-text-white title-header header-misc">Misc Issues</h1> |
| <article class="info-wrapper is-child box"> |
| <div class="error-wrapper-alt" id="misc-issues"> |
| |
| |
| <div class="issue-wrapper"> |
| <div class="issue-header m"> |
| <i class="fas fa-code"></i> | Missing lang |
| <div class="icon-right"> |
| <a href="" target="_blank"><i class="far fa-book"></i></a> |
| <i class="fas fa-search" onclick="openModalNum(1)"></i> |
| <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-ivhlixj8')"></i> |
| </div> |
| </div> |
| <div class="show-on-expand" id="div-id-ivhlixj8"> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| <div class="issue-wrapper"> |
| <div class="issue-header m"> |
| <i class="fas fa-code"></i> | Title Is Empty |
| <div class="icon-right"> |
| <a href="" target="_blank"><i class="far fa-book"></i></a> |
| <i class="fas fa-search" onclick="openModalNum(3)"></i> |
| <i class="fas fa-caret-down" onclick="toggleDiv(this,'id-jjb9lrvq')"></i> |
| </div> |
| </div> |
| <img src="/example/foo.png" class="large-img"> |
| <div class="show-on-expand" id="div-id-jjb9lrvq"> |
| |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </div> |
| </article> |
| </section> |
| |
| </div> |
| <div class="modal is-dark"> |
| <div class="modal-background"></div> |
| <div class="modal-card" style="width:70% !important;"> |
| <img src="/image/this-is-a-long-path/foo.jpg" style="padding-left:2px;"> |
| <header class="modal-card-head"> |
| <p class="modal-card-title">HTML view</p> |
| <button class="delete" aria-label="close" onclick="closeModal()"></button> |
| </header> |
| <section class="modal-card-body"> |
| <pre><code class="html hljs xml"><table class="hljs-ln"><tbody><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1"><div class="hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1"><span class="hljs-tag"><<span class="hljs-name">html</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2"><div class="hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2"> <span class="hljs-tag"><<span class="hljs-name">br</span>></span> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3"><div class="hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span><span class="hljs-tag"></<span class="hljs-name">title</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4"><div class="hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4"> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5"><div class="hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5"> <span class="hljs-tag"><<span class="hljs-name">center</span>></span><span class="hljs-tag"></<span class="hljs-name">center</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6"><div class="hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6"> <span class="hljs-tag"><<span class="hljs-name">center</span>></span><span class="hljs-tag"></<span class="hljs-name">center</span>></span></td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7"><div class="hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7"> </td></tr><tr><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8"><div class="hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8"> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"this is a test"</span>></span></td></tr></tbody></table></code></pre> |
| </section> |
| <footer class="modal-card-foot"> |
| <button class="button" onclick="closeModal()">Close</button> |
| </footer> |
| </div> |
| </div> |
| <div class="container is-fluid is-small"> |
| |
| <h1 class="has-text-white title-header header-a">Data</h1> |
| <article class="info-wrapper is-child is-data box"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div> |
| <div class="buttons is-centered has-addons"> |
| <button class="button is-success is-selected">Bar Graph View</button> |
| <button class="button">Pie Chart View</button> |
| </div> |
| |
| <canvas id="myChart" width="3174" height="3174" style="color: white; display: block; height: 1814px; width: 1814px;" class="chartjs-render-monitor"></canvas> |
| </article> |
| |
| </div> |
| |
| <script> |
| var ctx = document.getElementById('myChart').getContext('2d'); |
| var myChart = new Chart(ctx, { |
| type: 'bar', |
| data: { |
| labels: ["Div"], |
| datasets: [{ |
| label: 'Types of elems', |
| data: [1], |
| backgroundColor: [ |
| 'rgba(255, 99, 132, 0.2)', |
| 'rgba(54, 162, 235, 0.2)', |
| 'rgba(255, 206, 86, 0.2)', |
| 'rgba(75, 192, 192, 0.2)', |
| 'rgba(153, 102, 255, 0.2)', |
| 'rgba(255, 159, 64, 0.2)' |
| ], |
| borderColor: [ |
| 'rgba(255, 99, 132, 1)', |
| 'rgba(54, 162, 235, 1)', |
| 'rgba(255, 206, 86, 1)', |
| 'rgba(75, 192, 192, 1)', |
| 'rgba(153, 102, 255, 1)', |
| 'rgba(255, 159, 64, 1)' |
| ], |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| scales: { |
| yAxes: [{ |
| ticks: { |
| beginAtZero: true |
| } |
| }] |
| }, |
| legend: { |
| labels: { |
| |
| fontColor: 'white' |
| } |
| } |
| } |
| }); |
| </script> |
| <input type="text" style="display: none;" id="copyText"> |
| <script> |
| if ('serviceWorker' in navigator) { |
| window.addEventListener('load', function () { |
| navigator.serviceWorker.register('/sw.js').then(function (registration) { |
| |
| console.log('ServiceWorker registration successful with scope: ', registration.scope); |
| }, function (err) { |
| |
| console.log('ServiceWorker registration failed: ', err); |
| }); |
| }); |
| } |
| let lineNum = 0 |
| let hover = false |
| function hNumber(number) { |
| a.style.backgroundColor = "blue" |
| a.scrollIntoView(); |
| lineNum = number; |
| } |
| |
| function closeModal() { |
| document.querySelector(".modal").classList.remove("is-active") |
| if (lineNum != 0) { |
| } |
| } |
| |
| function checkEmpty() { |
| let goodString = |
| let aIssues = $("#a-issues") |
| let miscIssues = $("#misc-issues") |
| let oldIssues = $("#old-issues") |
| if (oldIssues.children().length === 0) { |
| oldIssues.append(goodString) |
| } |
| if (aIssues.children().length === 0) { |
| aIssues.append(goodString) |
| } |
| if (miscIssues.children().length === 0) { |
| miscIssues.append(goodString) |
| } |
| } |
| |
| function openModal() { |
| document.querySelector(".modal").classList.add("is-active") |
| } |
| |
| function openModalNum(number) { |
| document.querySelector(".modal").classList.add("is-active") |
| hNumber(number) |
| } |
| |
| function hoverMe(id1, id2, t) { |
| |
| a.style.display = "none"; |
| b.classList.remove('slide-bottom'); |
| } |
| var granimInstance = new Granim({ |
| element: '#canvas-basic', |
| direction: 'left-right', |
| states: { |
| "default-state": { |
| gradients: [ |
| ['#9D50BB', '#6E48AA'], |
| ['#4776E6', '#8E54E9'] |
| ] |
| } |
| } |
| }); |
| |
| function copy(elem) { |
| let copyText = document.getElementById("copyText"); |
| copyText.setAttribute("value", elem.getAttribute("data-copy")); |
| let elemText = elem.innerText |
| copyText.style.display = "block" |
| copyText.select(); |
| copyText.setSelectionRange(0, 99999); |
| |
| document.execCommand("copy"); |
| elem.innerHTML = "Copied!" |
| setTimeout(function () { |
| elem.innerHTML = elemText |
| }, 4000); |
| copyText.style.display = "none" |
| } |
| animateCSSClass('.animate', 'fadeIn') |
| document.querySelectorAll(".copy").forEach(elem => |
| elem.addEventListener("click", function () { |
| copy(elem) |
| })) |
| |
| |
| |
| |
| |
| |
| </script> |
| |
| |
| </body></html> |