diff --git a/start/html/index.css b/start/html/index.css index b81f7e7..d0cc4ce 100644 --- a/start/html/index.css +++ b/start/html/index.css @@ -1,6 +1,5 @@ * { - box-sizing: border-box !important; -} + box-sizing: border-box !important; } html, body { background-color: #21252b; @@ -9,270 +8,216 @@ html, body { margin: 0; overflow-x: hidden; padding: 0; - scrollbar-color: #4d5765 #21252b !important; -} + scrollbar-color: #4d5765 #21252b !important; } input, button { - font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif; -} + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif; } #content { - min-height: calc(100vh - 9rem); -} + min-height: calc(100vh - 9rem); } #header { height: 4rem; - padding: 0.5rem; - width: 100vw; -} -#header button { - background-color: #21252b; - border: none; - border-radius: 0.5rem; - color: #4c5666; - cursor: pointer; - float: right; - height: 3rem; - transition: all 0.3s ease; - width: 3rem; -} -#header button:hover { - background-color: #2c3139; - color: #99a2b2; -} -#header button.spaceleft { - margin-left: 1rem; -} + padding: .5rem; + width: 100vw; } + #header button { + background-color: #21252b; + border: none; + border-radius: .5rem; + color: #4c5666; + cursor: pointer; + float: right; + height: 3rem; + transition: all .3s ease; + width: 3rem; } + #header button:hover { + background-color: #2c3139; + color: #99a2b2; } + #header button.spaceleft { + margin-left: 1rem; } #title { margin-bottom: 5rem; margin-top: 5rem; - text-align: center; -} -#title h1 { - font-size: 4rem; - font-weight: 200; - margin-bottom: 1rem; -} -#title h1 span { - color: #4c5666; -} -#title span { - color: #7c889c; -} -#title span a { - color: #7c889c; -} + text-align: center; } + #title h1 { + font-size: 4rem; + font-weight: 200; + margin-bottom: 1rem; } + #title h1 span { + color: #4c5666; } + #title span { + color: #7c889c; } + #title span a { + color: #7c889c; } #search { text-align: center; - margin-bottom: 5rem; -} -#search #searchbar .buttonspacer { - display: inline-block; - width: 3.5rem; -} -#search #searchbar input { - background-color: #2c3139; - border: none; - border-radius: 0.5rem 0 0 0.5rem; - color: #d3d7de; - font-size: 1.5rem; - font-weight: 300; - height: 3rem; - padding: 0.5rem 1rem; - transition: all 0.3s ease; - vertical-align: bottom; -} -#search #searchbar input:focus { - background-color: #373e48; - outline: none; -} -#search #searchbar button { - border: none; - cursor: pointer; - height: 3rem; - transition: all 0.3s ease; - vertical-align: bottom; - width: 3rem; -} -#search #searchbar button#dnswatch-search-submit { - background-color: #373e48; - border-radius: 0 0.5rem 0.5rem 0; - color: #7c889c; -} -#search #searchbar button#dnswatch-search-submit:hover { - background-color: #424a56; - color: #d3d7de; -} -#search #searchbar button#help { - background-color: transparent; - border-radius: 0.5rem; - color: #4c5666; - margin-left: 0.5rem; -} -#search #searchbar button#help:hover { - background-color: #2c3139; - color: #99a2b2; -} -#search small { - display: block; - margin-top: 1rem; - color: #7c889c; -} -#search #loadani { - display: none; - margin-top: 1rem; - visibility: hidden; -} -#search #loadani #spinner { - animation: 1s linear infinite spinner; - border: 2px solid transparent; - border-bottom: 2px solid #61afef; - border-radius: 0.5rem; - display: inline-block; - height: 1rem; - width: 1rem; -} -#search #loadani span { - color: #61afef; - margin-left: 0.5rem; -} -#search #invaliddomain { - color: #e06c75; - display: none; - margin-top: 1rem; - visibility: hidden; -} -#search #invaliddomain .feather { - vertical-align: -0.3rem; -} + margin-bottom: 5rem; } + #search #searchbar .buttonspacer { + display: inline-block; + width: 3.5rem; } + #search #searchbar input { + background-color: #2c3139; + border: none; + border-radius: .5rem 0 0 .5rem; + color: #d3d7de; + font-size: 1.5rem; + font-weight: 300; + height: 3rem; + padding: .5rem 1rem; + transition: all .3s ease; + vertical-align: bottom; } + #search #searchbar input:focus { + background-color: #373e48; + outline: none; } + #search #searchbar button { + border: none; + cursor: pointer; + height: 3rem; + transition: all .3s ease; + vertical-align: bottom; + width: 3rem; } + #search #searchbar button#dnswatch-search-submit { + background-color: #373e48; + border-radius: 0 .5rem .5rem 0; + color: #7c889c; } + #search #searchbar button#dnswatch-search-submit:hover { + background-color: #424a56; + color: #d3d7de; } + #search #searchbar button#help { + background-color: transparent; + border-radius: .5rem; + color: #4c5666; + margin-left: .5rem; } + #search #searchbar button#help:hover { + background-color: #2c3139; + color: #99a2b2; } + #search small { + display: block; + margin-top: 1rem; + color: #7c889c; } + #search #loadani { + display: none; + margin-top: 1rem; + visibility: hidden; } + #search #loadani #spinner { + animation: 1s linear infinite spinner; + border: 2px solid transparent; + border-bottom: 2px solid #61afef; + border-radius: .5rem; + display: inline-block; + height: 1rem; + width: 1rem; } + #search #loadani span { + color: #61afef; + margin-left: .5rem; } + #search #invaliddomain { + color: #e06c75; + display: none; + margin-top: 1rem; + visibility: hidden; } + #search #invaliddomain .feather { + vertical-align: -.3rem; } #results small.random { color: #4c5666; display: block; - font-size: 0.8rem; + font-size: .8rem; margin-top: 1rem; - text-align: center; -} -#results small.random button { - background: none; - border: none; - color: #626e83; - cursor: pointer; - font-size: 0.8rem; - outline: none; - text-decoration: underline; -} + text-align: center; } + #results small.random button { + background: none; + border: none; + color: #626e83; + cursor: pointer; + font-size: .8rem; + outline: none; + text-decoration: underline; } + #results table { margin-left: 25vw; - width: 50vw; -} -#results table tr { - height: 3rem; -} -#results table tr td.status { - width: 3rem; -} -#results table tr td.status.check { - color: #98c379; -} -#results table tr td.status.cross { - color: #e06c75; -} -#results table tr td.status.ref { - color: #61afef; -} -#results table tr td.status.offline { - color: #d19a66; -} -#results table tr td.icon { - border-left: solid transparent 2rem; - width: 3rem; -} -#results table tr td.name small { - color: #7c889c; - margin-left: 1rem; -} -#results table tr td.desc { - text-align: right; -} -#results table tr td.desc.blocked { - color: #e06c75; -} -#results table tr td.desc.ref { - color: #61afef; -} -#results table tr td.help { - text-align: right; - width: 3rem; -} -#results table tr td.help button { - background-color: #21252b; - border: none; - border-radius: 0.5rem; - color: #4c5666; - cursor: pointer; - height: 2rem; - padding: 0.4rem; - transition: all 0.3s ease; - width: 2.1rem; -} -#results table tr td.help button:hover { - background-color: #2c3139; - color: #99a2b2; -} -#results table tr td.help button svg { - height: 1.2rem; - vertical-align: -0.2rem; - width: 1.2rem; -} + width: 50vw; } + #results table tr { + height: 3rem; } + #results table tr td.status { + width: 3rem; } + #results table tr td.status.check { + color: #98c379; } + #results table tr td.status.cross { + color: #e06c75; } + #results table tr td.status.ref { + color: #61afef; } + #results table tr td.status.offline { + color: #d19a66; } + #results table tr td.icon { + border-left: solid transparent 2rem; + width: 3rem; } + #results table tr td.name small { + color: #7c889c; + margin-left: 1rem; } + #results table tr td.desc { + text-align: right; } + #results table tr td.desc.blocked { + color: #e06c75; } + #results table tr td.desc.ref { + color: #61afef; } + #results table tr td.help { + text-align: right; + width: 3rem; } + #results table tr td.help button { + background-color: #21252b; + border: none; + border-radius: .5rem; + color: #4c5666; + cursor: pointer; + height: 2rem; + padding: .4rem; + transition: all .3s ease; + width: 2.1rem; } + #results table tr td.help button:hover { + background-color: #2c3139; + color: #99a2b2; } + #results table tr td.help button svg { + height: 1.2rem; + vertical-align: -.2rem; + width: 1.2rem; } #info { margin: 5rem auto; max-width: 50rem; - width: 100vw; -} -#info h1 { - color: #61afef; - font-size: 1.5rem; - font-weight: 300; - padding-bottom: 1rem; - padding-top: 5rem; -} -#info h1 svg { - vertical-align: -0.2rem; - margin-right: 0.3rem; -} -#info p { - line-height: 1.8rem; -} -#info p a { - color: #61afef; -} -#info p b { - color: #61afef; -} -#info p br { - display: block; - margin-top: 1.2rem; -} -#info a.moreinfo { - color: #61afef; - display: block; - margin-top: 5rem; - text-align: center; -} + width: 100vw; } + #info h1 { + color: #61afef; + font-size: 1.5rem; + font-weight: 300; + padding-bottom: 1rem; + padding-top: 5rem; } + #info h1 svg { + vertical-align: -.2rem; + margin-right: .3rem; } + #info p { + line-height: 1.8rem; } + #info p a { + color: #61afef; } + #info p b { + color: #61afef; } + #info p br { + display: block; + margin-top: 1.2rem; } + #info a.moreinfo { + color: #61afef; + display: block; + margin-top: 5rem; + text-align: center; } #footer { color: #7c889c; height: 9rem; padding-top: 5rem; - text-align: center; -} -#footer a { - color: #7c889c; -} + text-align: center; } + #footer a { + color: #7c889c; } #modal { background-color: rgba(0, 0, 0, 0.6); @@ -283,58 +228,43 @@ input, button { position: fixed; top: 0; width: 100vw; - z-index: 1000; -} -#modal #modal-content { - background-color: #21252b; - border-radius: 0.5rem; - color: #d3d7de; - margin-left: 50%; - margin-top: 25%; - max-width: 30rem; - padding: 2rem; - transform: translate(-50%, -50%); - width: 90%; -} -#modal #modal-content #modal-close { - color: #4c5666; - float: right; - transition: all 0.3s ease; -} -#modal #modal-content #modal-close:hover, #modal #modal-content #modal-close:focus { - color: #7c889c; - cursor: pointer; - text-decoration: none; -} -#modal #modal-content #modal-message { - line-height: 1.8rem; -} -#modal #modal-content #modal-message a { - color: #61afef; - text-decoration: underline; -} -#modal #modal-content #modal-message b { - color: #61afef; -} -#modal #modal-content #modal-message br { - display: block; - margin-top: 1.2rem; -} -#modal #modal-content #modal-message span { - color: #7c889c; -} + z-index: 1000; } + #modal #modal-content { + background-color: #21252b; + border-radius: .5rem; + color: #d3d7de; + margin-left: 50%; + margin-top: 25%; + max-width: 30rem; + padding: 2rem; + transform: translate(-50%, -50%); + width: 90%; } + #modal #modal-content #modal-close { + color: #4c5666; + float: right; + transition: all .3s ease; } + #modal #modal-content #modal-close:hover, #modal #modal-content #modal-close:focus { + color: #7c889c; + cursor: pointer; + text-decoration: none; } + #modal #modal-content #modal-message { + line-height: 1.8rem; } + #modal #modal-content #modal-message a { + color: #61afef; + text-decoration: underline; } + #modal #modal-content #modal-message b { + color: #61afef; } + #modal #modal-content #modal-message br { + display: block; + margin-top: 1.2rem; } + #modal #modal-content #modal-message span { + color: #7c889c; } .uncolored-svg { - filter: invert(0.8); -} + filter: invert(0.8); } @keyframes spinner { 0% { - transform: rotate(0deg); - } + transform: rotate(0deg); } 100% { - transform: rotate(360deg); - } -} - -/*# sourceMappingURL=index.css.map */ + transform: rotate(360deg); } } diff --git a/start/html/index.html b/start/html/index.html index 98e6b59..53251c9 100644 --- a/start/html/index.html +++ b/start/html/index.html @@ -22,6 +22,6 @@ giving them information on which ISPs are blocking their web services.
We support a Free Web without Internet censorship, and so should you!

What can I do against it?

If you happen to be affected by Internet censorship an you're still using your ISP's default DNS settings, we provide resources that can help you switch to a more trustworthy and most of the time even faster -DNS, thus regainig a Free Web without censorship! Read our +DNS, thus regaining a Free Web without censorship! Read our tutorial on how to gain back your freedom in the World Wide Web and circumvent DNS-blocking by ISPs!

More Information diff --git a/start/html/index.js b/start/html/index.js index c19ebd2..6a3a324 100644 --- a/start/html/index.js +++ b/start/html/index.js @@ -20,7 +20,11 @@ function dnswatch_search() { // send api request var request = new XMLHttpRequest(); - request.open('POST', 'https://dns-watch.org/lookup', true); + request.open('POST', + window.location.hostname === '' + ? 'https://dns-watch.org/lookup' // send request to the official website when running the .html locally + : `https://${window.location.hostname}/lookup`, // send request to /lookup if not running locally + true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); request.onload = function() { @@ -166,7 +170,7 @@ function show_modal(type) { let msg; switch (type) { case 'search': - msg = 'dns-watch.org is a service that allows you to see how (mainly German) Internet Service Providers (ISPs) deal with Internet censorship. More Information
In order to test a website for availability, enter the domain into the search bar and press Enter.
Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to'; + msg = 'In order to test a website for availability, enter the domain into the search bar and press Enter.
Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to'; break; case 'reference': msg = 'In order to validate the DNS responses, we use references.
These references are from trustworthy DNS providers, such as Cloudflare or UncensoredDNS.
The responses of the DNS providers that should be tested (located in the bottom table) will be compared to the results from the references.' diff --git a/start/index.css b/start/index.css index 6ba3513..aad0ef7 100644 --- a/start/index.css +++ b/start/index.css @@ -1,7 +1,6 @@ *stop() * { - box-sizing: border-box !important; -} + box-sizing: border-box !important; } html, body { background-color: #21252b; @@ -10,270 +9,216 @@ html, body { margin: 0; overflow-x: hidden; padding: 0; - scrollbar-color: #4d5765 #21252b !important; -} + scrollbar-color: #4d5765 #21252b !important; } input, button { - font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif; -} + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif; } #content { - min-height: calc(100vh - 9rem); -} + min-height: calc(100vh - 9rem); } #header { height: 4rem; - padding: 0.5rem; - width: 100vw; -} -#header button { - background-color: #21252b; - border: none; - border-radius: 0.5rem; - color: #4c5666; - cursor: pointer; - float: right; - height: 3rem; - transition: all 0.3s ease; - width: 3rem; -} -#header button:hover { - background-color: #2c3139; - color: #99a2b2; -} -#header button.spaceleft { - margin-left: 1rem; -} + padding: .5rem; + width: 100vw; } + #header button { + background-color: #21252b; + border: none; + border-radius: .5rem; + color: #4c5666; + cursor: pointer; + float: right; + height: 3rem; + transition: all .3s ease; + width: 3rem; } + #header button:hover { + background-color: #2c3139; + color: #99a2b2; } + #header button.spaceleft { + margin-left: 1rem; } #title { margin-bottom: 5rem; margin-top: 5rem; - text-align: center; -} -#title h1 { - font-size: 4rem; - font-weight: 200; - margin-bottom: 1rem; -} -#title h1 span { - color: #4c5666; -} -#title span { - color: #7c889c; -} -#title span a { - color: #7c889c; -} + text-align: center; } + #title h1 { + font-size: 4rem; + font-weight: 200; + margin-bottom: 1rem; } + #title h1 span { + color: #4c5666; } + #title span { + color: #7c889c; } + #title span a { + color: #7c889c; } #search { text-align: center; - margin-bottom: 5rem; -} -#search #searchbar .buttonspacer { - display: inline-block; - width: 3.5rem; -} -#search #searchbar input { - background-color: #2c3139; - border: none; - border-radius: 0.5rem 0 0 0.5rem; - color: #d3d7de; - font-size: 1.5rem; - font-weight: 300; - height: 3rem; - padding: 0.5rem 1rem; - transition: all 0.3s ease; - vertical-align: bottom; -} -#search #searchbar input:focus { - background-color: #373e48; - outline: none; -} -#search #searchbar button { - border: none; - cursor: pointer; - height: 3rem; - transition: all 0.3s ease; - vertical-align: bottom; - width: 3rem; -} -#search #searchbar button#dnswatch-search-submit { - background-color: #373e48; - border-radius: 0 0.5rem 0.5rem 0; - color: #7c889c; -} -#search #searchbar button#dnswatch-search-submit:hover { - background-color: #424a56; - color: #d3d7de; -} -#search #searchbar button#help { - background-color: transparent; - border-radius: 0.5rem; - color: #4c5666; - margin-left: 0.5rem; -} -#search #searchbar button#help:hover { - background-color: #2c3139; - color: #99a2b2; -} -#search small { - display: block; - margin-top: 1rem; - color: #7c889c; -} -#search #loadani { - display: none; - margin-top: 1rem; - visibility: hidden; -} -#search #loadani #spinner { - animation: 1s linear infinite spinner; - border: 2px solid transparent; - border-bottom: 2px solid #61afef; - border-radius: 0.5rem; - display: inline-block; - height: 1rem; - width: 1rem; -} -#search #loadani span { - color: #61afef; - margin-left: 0.5rem; -} -#search #invaliddomain { - color: #e06c75; - display: none; - margin-top: 1rem; - visibility: hidden; -} -#search #invaliddomain .feather { - vertical-align: -0.3rem; -} + margin-bottom: 5rem; } + #search #searchbar .buttonspacer { + display: inline-block; + width: 3.5rem; } + #search #searchbar input { + background-color: #2c3139; + border: none; + border-radius: .5rem 0 0 .5rem; + color: #d3d7de; + font-size: 1.5rem; + font-weight: 300; + height: 3rem; + padding: .5rem 1rem; + transition: all .3s ease; + vertical-align: bottom; } + #search #searchbar input:focus { + background-color: #373e48; + outline: none; } + #search #searchbar button { + border: none; + cursor: pointer; + height: 3rem; + transition: all .3s ease; + vertical-align: bottom; + width: 3rem; } + #search #searchbar button#dnswatch-search-submit { + background-color: #373e48; + border-radius: 0 .5rem .5rem 0; + color: #7c889c; } + #search #searchbar button#dnswatch-search-submit:hover { + background-color: #424a56; + color: #d3d7de; } + #search #searchbar button#help { + background-color: transparent; + border-radius: .5rem; + color: #4c5666; + margin-left: .5rem; } + #search #searchbar button#help:hover { + background-color: #2c3139; + color: #99a2b2; } + #search small { + display: block; + margin-top: 1rem; + color: #7c889c; } + #search #loadani { + display: none; + margin-top: 1rem; + visibility: hidden; } + #search #loadani #spinner { + animation: 1s linear infinite spinner; + border: 2px solid transparent; + border-bottom: 2px solid #61afef; + border-radius: .5rem; + display: inline-block; + height: 1rem; + width: 1rem; } + #search #loadani span { + color: #61afef; + margin-left: .5rem; } + #search #invaliddomain { + color: #e06c75; + display: none; + margin-top: 1rem; + visibility: hidden; } + #search #invaliddomain .feather { + vertical-align: -.3rem; } #results small.random { color: #4c5666; display: block; - font-size: 0.8rem; + font-size: .8rem; margin-top: 1rem; - text-align: center; -} -#results small.random button { - background: none; - border: none; - color: #626e83; - cursor: pointer; - font-size: 0.8rem; - outline: none; - text-decoration: underline; -} + text-align: center; } + #results small.random button { + background: none; + border: none; + color: #626e83; + cursor: pointer; + font-size: .8rem; + outline: none; + text-decoration: underline; } + #results table { margin-left: 25vw; - width: 50vw; -} -#results table tr { - height: 3rem; -} -#results table tr td.status { - width: 3rem; -} -#results table tr td.status.check { - color: #98c379; -} -#results table tr td.status.cross { - color: #e06c75; -} -#results table tr td.status.ref { - color: #61afef; -} -#results table tr td.status.offline { - color: #d19a66; -} -#results table tr td.icon { - border-left: solid transparent 2rem; - width: 3rem; -} -#results table tr td.name small { - color: #7c889c; - margin-left: 1rem; -} -#results table tr td.desc { - text-align: right; -} -#results table tr td.desc.blocked { - color: #e06c75; -} -#results table tr td.desc.ref { - color: #61afef; -} -#results table tr td.help { - text-align: right; - width: 3rem; -} -#results table tr td.help button { - background-color: #21252b; - border: none; - border-radius: 0.5rem; - color: #4c5666; - cursor: pointer; - height: 2rem; - padding: 0.4rem; - transition: all 0.3s ease; - width: 2.1rem; -} -#results table tr td.help button:hover { - background-color: #2c3139; - color: #99a2b2; -} -#results table tr td.help button svg { - height: 1.2rem; - vertical-align: -0.2rem; - width: 1.2rem; -} + width: 50vw; } + #results table tr { + height: 3rem; } + #results table tr td.status { + width: 3rem; } + #results table tr td.status.check { + color: #98c379; } + #results table tr td.status.cross { + color: #e06c75; } + #results table tr td.status.ref { + color: #61afef; } + #results table tr td.status.offline { + color: #d19a66; } + #results table tr td.icon { + border-left: solid transparent 2rem; + width: 3rem; } + #results table tr td.name small { + color: #7c889c; + margin-left: 1rem; } + #results table tr td.desc { + text-align: right; } + #results table tr td.desc.blocked { + color: #e06c75; } + #results table tr td.desc.ref { + color: #61afef; } + #results table tr td.help { + text-align: right; + width: 3rem; } + #results table tr td.help button { + background-color: #21252b; + border: none; + border-radius: .5rem; + color: #4c5666; + cursor: pointer; + height: 2rem; + padding: .4rem; + transition: all .3s ease; + width: 2.1rem; } + #results table tr td.help button:hover { + background-color: #2c3139; + color: #99a2b2; } + #results table tr td.help button svg { + height: 1.2rem; + vertical-align: -.2rem; + width: 1.2rem; } #info { margin: 5rem auto; max-width: 50rem; - width: 100vw; -} -#info h1 { - color: #61afef; - font-size: 1.5rem; - font-weight: 300; - padding-bottom: 1rem; - padding-top: 5rem; -} -#info h1 svg { - vertical-align: -0.2rem; - margin-right: 0.3rem; -} -#info p { - line-height: 1.8rem; -} -#info p a { - color: #61afef; -} -#info p b { - color: #61afef; -} -#info p br { - display: block; - margin-top: 1.2rem; -} -#info a.moreinfo { - color: #61afef; - display: block; - margin-top: 5rem; - text-align: center; -} + width: 100vw; } + #info h1 { + color: #61afef; + font-size: 1.5rem; + font-weight: 300; + padding-bottom: 1rem; + padding-top: 5rem; } + #info h1 svg { + vertical-align: -.2rem; + margin-right: .3rem; } + #info p { + line-height: 1.8rem; } + #info p a { + color: #61afef; } + #info p b { + color: #61afef; } + #info p br { + display: block; + margin-top: 1.2rem; } + #info a.moreinfo { + color: #61afef; + display: block; + margin-top: 5rem; + text-align: center; } #footer { color: #7c889c; height: 9rem; padding-top: 5rem; - text-align: center; -} -#footer a { - color: #7c889c; -} + text-align: center; } + #footer a { + color: #7c889c; } #modal { background-color: rgba(0, 0, 0, 0.6); @@ -284,56 +229,43 @@ input, button { position: fixed; top: 0; width: 100vw; - z-index: 1000; -} -#modal #modal-content { - background-color: #21252b; - border-radius: 0.5rem; - color: #d3d7de; - margin-left: 50%; - margin-top: 25%; - max-width: 30rem; - padding: 2rem; - transform: translate(-50%, -50%); - width: 90%; -} -#modal #modal-content #modal-close { - color: #4c5666; - float: right; - transition: all 0.3s ease; -} -#modal #modal-content #modal-close:hover, #modal #modal-content #modal-close:focus { - color: #7c889c; - cursor: pointer; - text-decoration: none; -} -#modal #modal-content #modal-message { - line-height: 1.8rem; -} -#modal #modal-content #modal-message a { - color: #61afef; - text-decoration: underline; -} -#modal #modal-content #modal-message b { - color: #61afef; -} -#modal #modal-content #modal-message br { - display: block; - margin-top: 1.2rem; -} -#modal #modal-content #modal-message span { - color: #7c889c; -} + z-index: 1000; } + #modal #modal-content { + background-color: #21252b; + border-radius: .5rem; + color: #d3d7de; + margin-left: 50%; + margin-top: 25%; + max-width: 30rem; + padding: 2rem; + transform: translate(-50%, -50%); + width: 90%; } + #modal #modal-content #modal-close { + color: #4c5666; + float: right; + transition: all .3s ease; } + #modal #modal-content #modal-close:hover, #modal #modal-content #modal-close:focus { + color: #7c889c; + cursor: pointer; + text-decoration: none; } + #modal #modal-content #modal-message { + line-height: 1.8rem; } + #modal #modal-content #modal-message a { + color: #61afef; + text-decoration: underline; } + #modal #modal-content #modal-message b { + color: #61afef; } + #modal #modal-content #modal-message br { + display: block; + margin-top: 1.2rem; } + #modal #modal-content #modal-message span { + color: #7c889c; } .uncolored-svg { - filter: invert(0.8); -} + filter: invert(0.8); } @keyframes spinner { 0% { - transform: rotate(0deg); - } + transform: rotate(0deg); } 100% { - transform: rotate(360deg); - } -} + transform: rotate(360deg); } } diff --git a/start/index.js b/start/index.js index bcb0ac2..cbb0063 100644 --- a/start/index.js +++ b/start/index.js @@ -21,7 +21,11 @@ function dnswatch_search() { // send api request var request = new XMLHttpRequest(); - request.open('POST', 'https://dns-watch.org/lookup', true); + request.open('POST', + window.location.hostname === '' + ? 'https://dns-watch.org/lookup' // send request to the official website when running the .html locally + : `https://${window.location.hostname}/lookup`, // send request to /lookup if not running locally + true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); request.onload = function() { @@ -167,7 +171,7 @@ function show_modal(type) { let msg; switch (type) { case 'search': - msg = 'dns-watch.org is a service that allows you to see how (mainly German) Internet Service Providers (ISPs) deal with Internet censorship. More Information
In order to test a website for availability, enter the domain into the search bar and press Enter.
Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to'; + msg = 'In order to test a website for availability, enter the domain into the search bar and press Enter.
Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to'; break; case 'reference': msg = 'In order to validate the DNS responses, we use references.
These references are from trustworthy DNS providers, such as Cloudflare or UncensoredDNS.
The responses of the DNS providers that should be tested (located in the bottom table) will be compared to the results from the references.' diff --git a/start/index.php b/start/index.php index a4826ec..5f64a81 100644 --- a/start/index.php +++ b/start/index.php @@ -21,6 +21,6 @@ giving them information on which ISPs are blocking their web services.
We support a Free Web without Internet censorship, and so should you!

What can I do against it?

If you happen to be affected by Internet censorship an you're still using your ISP's default DNS settings, we provide resources that can help you switch to a more trustworthy and most of the time even faster -DNS, thus regainig a Free Web without censorship! Read our +DNS, thus regaining a Free Web without censorship! Read our tutorial on how to gain back your freedom in the World Wide Web and circumvent DNS-blocking by ISPs!

More Information \ No newline at end of file diff --git a/start/src/index.js b/start/src/index.js index c19ebd2..6a3a324 100644 --- a/start/src/index.js +++ b/start/src/index.js @@ -20,7 +20,11 @@ function dnswatch_search() { // send api request var request = new XMLHttpRequest(); - request.open('POST', 'https://dns-watch.org/lookup', true); + request.open('POST', + window.location.hostname === '' + ? 'https://dns-watch.org/lookup' // send request to the official website when running the .html locally + : `https://${window.location.hostname}/lookup`, // send request to /lookup if not running locally + true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); request.onload = function() { @@ -166,7 +170,7 @@ function show_modal(type) { let msg; switch (type) { case 'search': - msg = 'dns-watch.org is a service that allows you to see how (mainly German) Internet Service Providers (ISPs) deal with Internet censorship. More Information
In order to test a website for availability, enter the domain into the search bar and press Enter.
Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to'; + msg = 'In order to test a website for availability, enter the domain into the search bar and press Enter.
Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to'; break; case 'reference': msg = 'In order to validate the DNS responses, we use references.
These references are from trustworthy DNS providers, such as Cloudflare or UncensoredDNS.
The responses of the DNS providers that should be tested (located in the bottom table) will be compared to the results from the references.' diff --git a/start/src/index.pug b/start/src/index.pug index cdc5b96..60c6a30 100644 --- a/start/src/index.pug +++ b/start/src/index.pug @@ -52,7 +52,7 @@ | If you happen to be affected by Internet censorship an you're still | using your ISP's default DNS settings, we provide resources that can | help you switch to a more trustworthy and most of the time even faster - | DNS, thus regainig a Free Web without censorship! Read our + | DNS, thus regaining a Free Web without censorship! Read our | tutorial on how to gain back your freedom in the | World Wide Web and circumvent DNS-blocking by ISPs! diff --git a/start/util/compile.sh b/start/util/compile.sh index 5de6046..6f93924 100755 --- a/start/util/compile.sh +++ b/start/util/compile.sh @@ -16,7 +16,7 @@ mv temp ../html/index.html echo "" >> ../html/index.html # compile sass -sass ../src/index.sass ../html/index.css +sassc ../src/index.sass ../html/index.css # move js cp ../src/*.js ../html diff --git a/start/util/jhtml-compile.sh b/start/util/jhtml-compile.sh index 4317790..8830e89 100755 --- a/start/util/jhtml-compile.sh +++ b/start/util/jhtml-compile.sh @@ -15,7 +15,7 @@ echo "*title(\"dnswatch\") mv temp ../index.php # compile sass -sass ../src/index.sass ../index.css --no-source-map +sassc ../src/index.sass ../index.css #--no-source-map echo '*stop()' | cat - ../index.css > temp mv temp ../index.css