Finish making the Webpage user-friendly
This commit is contained in:
Taevas
parent
29fef21cd1
commit
0bf5ad0f6d
3 changed files with 121 additions and 62 deletions
|
|
@ -6,6 +6,7 @@
|
|||
body {
|
||||
background-color: #112034;
|
||||
color: white;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#presentation {
|
||||
|
|
@ -32,50 +33,103 @@ label {
|
|||
color: black;
|
||||
}
|
||||
|
||||
input[type="button"] {
|
||||
#btn {
|
||||
padding: 40px;
|
||||
margin: 10px;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
#btn {
|
||||
font-size: 4.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
#finder, #status {
|
||||
border: solid 1px;
|
||||
border-collapse: collapse;
|
||||
width: 80vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#finder {
|
||||
background-color: #00000075;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#status {
|
||||
background-color: #030715a3;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#finder .row {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
#status {
|
||||
background-color: #030715a3;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#status > * {
|
||||
margin: 20px
|
||||
}
|
||||
|
||||
#progress {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#progress > * {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#log_checking {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#list {
|
||||
flex: auto;
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
height: 50vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: black;
|
||||
background-color: #0000006e;
|
||||
border: solid 1px;
|
||||
}
|
||||
|
||||
ul {
|
||||
#actual_list {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#list a {
|
||||
color: white;
|
||||
}
|
||||
#list a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* https://stackoverflow.com/a/23635565 */
|
||||
@-webkit-keyframes borderBlink {
|
||||
from, to {
|
||||
border-color: transparent
|
||||
}
|
||||
50% {
|
||||
border-color: white
|
||||
}
|
||||
}
|
||||
@keyframes borderBlink {
|
||||
from, to {
|
||||
border-color: transparent
|
||||
}
|
||||
50% {
|
||||
border-color: white
|
||||
}
|
||||
}
|
||||
.in_progress {
|
||||
border-left: 5px solid;
|
||||
-webkit-animation: borderBlink 2s step-end infinite;
|
||||
animation: borderBlink 2s step-end infinite;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,15 +28,15 @@
|
|||
<form class="container">
|
||||
<div class="row">
|
||||
<div class="col col-lg-3 col-12 form-floating">
|
||||
<input class="form-control" type="number" id="times" value="2000" placeholder="">
|
||||
<input class="form-control" type="number" id="times" value="1000" placeholder="">
|
||||
<label>Number of URLs to check</label>
|
||||
</div>
|
||||
<div class="col col-md col-12 form-floating">
|
||||
<input class="form-control" placeholder="" type="number" id="min" value="2" placeholder="">
|
||||
<input class="form-control" placeholder="" type="number" id="min" value="4" placeholder="">
|
||||
<label>Min domain length (excl. TLD)</label>
|
||||
</div>
|
||||
<div class="col col-md col-12 form-floating">
|
||||
<input class="form-control" placeholder="" type="number" id="max" value="15" placeholder="">
|
||||
<input class="form-control" placeholder="" type="number" id="max" value="6" placeholder="">
|
||||
<label>Max domain length (excl. TLD)</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
</div>
|
||||
<div class="col col-lg col-md-9 col-12 form-floating">
|
||||
<input class="form-control" placeholder="" type="text" id="domains"
|
||||
value="com, org, net, tk, cn, de, ru, uk, nl, ca, au, in, ir, tv, live, gov, edu" placeholder="">
|
||||
value="com, org, net, fr, de, xyz, cn, de, ua, ru, nl, in, tv, live" placeholder="">
|
||||
<label>TLDs to check</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,17 +57,20 @@
|
|||
<label>Chances out of 100 for a URL to have two TLDs</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="button" id="btn" onclick="findWebsites()" value="Find websites!">
|
||||
<input type="button" id="btn" value="Find websites!">
|
||||
</form>
|
||||
</div>
|
||||
<div id="status" class="row">
|
||||
<div id="progress" class="col">
|
||||
<p>STATUS: STOPPED</p>
|
||||
<p>COUNT:</p>
|
||||
<p>CHECKING:</p>
|
||||
<div id="status" class="row" style="display: none;">
|
||||
<div id="progress" class="col col-sm-12">
|
||||
<p id="log_start"></p>
|
||||
<p id="log_length"></p>
|
||||
<p id="log_protocols"></p>
|
||||
<p id="log_tlds"></p>
|
||||
<p id="log_count"></p>
|
||||
<p id="log_checking"></p>
|
||||
</div>
|
||||
<div id="list" class="col">
|
||||
<ul>
|
||||
<ul id="actual_list">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,36 @@
|
|||
$(function() {
|
||||
$("#btn").click(findWebsites)
|
||||
})
|
||||
|
||||
function findWebsites() {
|
||||
|
||||
async function main_loop() {
|
||||
for (let i = 0; i < times; i++) {
|
||||
count.innerHTML = `COUNT: ${i+1}/${times}`
|
||||
const url = url_generator()
|
||||
url_show.innerHTML = `CHECKING: ${url}`
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {mode: "no-cors"})
|
||||
let li = document.createElement("LI")
|
||||
let a = document.createElement("A")
|
||||
a.innerHTML = url
|
||||
a.href = url
|
||||
li.appendChild(a)
|
||||
list.appendChild(li)
|
||||
audio.play()
|
||||
}
|
||||
catch (e) {} // No server for this URL
|
||||
}
|
||||
$("#actual_list").html("")
|
||||
$("#log_start").html(`Started at ${new Date().toLocaleTimeString()}`)
|
||||
$("#log_length").html(`Length of domains is ≥ ${min} and ≤ ${max}`)
|
||||
$("#log_protocols").html(`Protocols are ${String(protocols).replace(/,/g, ", ")}`)
|
||||
$("#log_tlds").html(`TLDs are ${String(domains.map((d) => "."+d)).replace(/,/g, ", ")}`)
|
||||
$("#status").slideDown()
|
||||
$("#finder").slideUp()
|
||||
$("#progress").addClass("in_progress")
|
||||
|
||||
console.log('\nFinished at ' + String(new Date().getHours()) + 'h' + String(new Date().getMinutes()) + 'm')
|
||||
status.innerHTML = "STATUS: STOPPED"
|
||||
for (let i = 0; i < times; i++) {
|
||||
const url = url_generator()
|
||||
$("#log_count").html(`${i+1}/${times}`)
|
||||
$("#log_checking").html(`${url}`)
|
||||
|
||||
const controller = new AbortController()
|
||||
const signal = controller.signal
|
||||
setTimeout(() => controller.abort(), 8000)
|
||||
await fetch(url, {mode: "no-cors", signal}).then((_response) => {
|
||||
let html = `<li>${new Date().toLocaleTimeString()}: <a href=${url} target="_blank" rel="noopener noreferrer">${url}</a></li>`
|
||||
$(html).hide().appendTo($("#actual_list")).slideDown()
|
||||
audio.play()
|
||||
}).catch((e) => {})
|
||||
}
|
||||
$("#finder").slideDown()
|
||||
$("#progress").removeClass("in_progress")
|
||||
|
||||
console.log("\nFinished at " + String(new Date().toLocaleTimeString()))
|
||||
document.getElementById("btn").disabled = false
|
||||
}
|
||||
|
||||
|
|
@ -30,35 +40,27 @@ function findWebsites() {
|
|||
const characters = "abcdefghijklmnopqrstuvwxyz0123456789"
|
||||
for (let i = 0; i < url_length; i++) {result += characters.charAt(Math.floor(Math.random() * characters.length))}
|
||||
result += `.${domains[Math.floor(Math.random() * domains.length)]}`
|
||||
if (Math.floor(Math.random() * (100 - 1) + 1) <= second) result += domains[Math.floor(Math.random() * domains.length)]
|
||||
if (Math.floor(Math.random() * (100 - 1) + 1) <= second) result += `.${domains[Math.floor(Math.random() * domains.length)]}`
|
||||
return result
|
||||
}
|
||||
|
||||
const audio = new Audio("found.mp3")
|
||||
|
||||
const times = document.getElementById("times").value ? Math.round(Number(document.getElementById("times").value)) : 2000
|
||||
const protocols = document.getElementById("protocols").value ? document.getElementById("protocols").value.split(", ") : ['https']
|
||||
const domains = document.getElementById("domains").value ? document.getElementById("domains").value.split(", ") : ["com", "org", "net", "tk", "cn", "de", "ru", "uk", "nl", "ca", "au", "in", "ir", "tv", "live", "gov", "edu"]
|
||||
const second = document.getElementById("second").value ? Math.round(Number(document.getElementById("second").value)) : 0
|
||||
const min = document.getElementById("min").value ? Math.round(Number(document.getElementById("min").value)) : 2
|
||||
const max = document.getElementById("max").value ? Math.round(Number(document.getElementById("max").value)) : 15
|
||||
const times = $("#times").val() ? Math.round(Number($("#times").val())) : 2000
|
||||
const protocols = $("#protocols").val() ? $("#protocols").val().split(", ") : ["https"]
|
||||
const domains = $("#domains").val() ? $("#domains").val().split(", ") : ["com", "org", "net", "tk", "cn", "de", "ru", "uk", "nl", "ca", "au", "in", "ir", "tv", "live", "gov", "edu"]
|
||||
const second = $("#second").val() ? Math.round(Number($("#second").val())) : 0
|
||||
const min = $("#min").val() ? Math.round(Number($("#min").val())) : 2
|
||||
const max = $("#max").val() ? Math.round(Number($("#max").val())) : 15
|
||||
|
||||
const list = document.getElementById("list").getElementsByTagName("UL")[0]
|
||||
const status = document.getElementsByTagName("P")[0]
|
||||
const count = document.getElementsByTagName("P")[1]
|
||||
const url_show = document.getElementsByTagName("P")[2]
|
||||
console.log("Started at", String(new Date().toLocaleTimeString()))
|
||||
console.log("Number of URLs being checked:", times)
|
||||
console.log("TLDs used in URLs:", domains)
|
||||
console.log("How many URLs out of 100 will feature two domains:", second)
|
||||
console.log("Application protocols used by URLs:", protocols)
|
||||
console.log("Minimum length of URLs:", min)
|
||||
console.log("Maximum length of URLs:", max)
|
||||
|
||||
console.log('Started at', String(new Date().getHours()) + 'h' + String(new Date().getMinutes()) + 'm\n')
|
||||
console.log('Number of URLs being checked:', times)
|
||||
console.log('Domains used in URLs:', domains)
|
||||
console.log('How many URLs out of 100 will feature two domains:', second)
|
||||
console.log('Application protocols used by URLs:', protocols)
|
||||
console.log('Minimum length of URLs:', min)
|
||||
console.log('Maximum length of URLs:', max)
|
||||
|
||||
|
||||
status.innerHTML = "STATUS: ACTIVE"
|
||||
document.getElementById("btn").disabled = true
|
||||
|
||||
main_loop()
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue