Start redesigning the Webpage
This commit is contained in:
Taevas
parent
d06196ac48
commit
29fef21cd1
8 changed files with 160 additions and 103 deletions
38
Webpage/README.md
Normal file
38
Webpage/README.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# Website-Finder: Javascript
|
||||
|
||||
While this is called Javascript, it also makes use of HTML (and CSS, somewhat)
|
||||
|
||||
## HOW TO RUN
|
||||
|
||||
It is already being run by [GitHub Pages](https://tttaevas.github.io/Website-Finder/Javascript/index.html), but you may run it yourself simply by opening [index.html](./index.html) in your web browser
|
||||
|
||||
Do note that using arguments and launching the search is done through the HTML, so you cannot use the cli/terminal to use arguments, and opening the file will not instantly trigger the search
|
||||
|
||||
```sh
|
||||
# You should be able to double-click the file or drag the file to the web browser, but if you wanna be fancy
|
||||
|
||||
# Linux
|
||||
$ xdg-open index.html
|
||||
|
||||
# Windows 10
|
||||
$ explorer index.html
|
||||
|
||||
# macOS
|
||||
$ open index.html
|
||||
```
|
||||
|
||||
## REGARDING REPORTS
|
||||
|
||||
Your web browser should be unable to create files on your computer, so unlike other scripts, no report in json is made
|
||||
|
||||
Instead, a report is created in real time within the HTML, while the logging is done by the browser in its development tools
|
||||
|
||||
## REGARDING ARGUMENTS
|
||||
|
||||
The GitHub Pages version cannot use HTTP due to [Mixed Content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content)
|
||||
|
||||
The default arguments may not match the ones specified in [defaults.json](../defaults.json), as they have to be independent from each other
|
||||
|
||||
## OTHER STUFF
|
||||
|
||||
More details are available on [the readme in the root folder](../README.md)
|
||||
BIN
Webpage/found.mp3
Normal file
BIN
Webpage/found.mp3
Normal file
Binary file not shown.
81
Webpage/index.css
Normal file
81
Webpage/index.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
* {
|
||||
text-align: center;
|
||||
font-family: 'Gugi', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #112034;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#presentation {
|
||||
background-color: #080833;
|
||||
border-bottom: 1px solid #888;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#presentation p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#presentation a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#presentation a:hover {
|
||||
color: greenyellow;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
color: black;
|
||||
}
|
||||
|
||||
input[type="button"] {
|
||||
padding: 40px;
|
||||
margin: 10px;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#finder .row {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
#list {
|
||||
flex: auto;
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: black;
|
||||
border: solid 1px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
76
Webpage/index.html
Normal file
76
Webpage/index.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Website-Finder</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="https://fonts.cdnfonts.com/css/gugi" rel="stylesheet">
|
||||
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
<script type="text/javascript" src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="presentation">
|
||||
<h1>Website-Finder</h1>
|
||||
<p>Also available in:</p>
|
||||
<nav class="nav nav-pills nav-fill">
|
||||
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://github.com/TTTaevas/Website-Finder/tree/master/C%23">C#</a>
|
||||
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://github.com/TTTaevas/Website-Finder/tree/master/Crystal">Crystal</a>
|
||||
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://github.com/TTTaevas/Website-Finder/tree/master/Go">Go</a>
|
||||
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://github.com/TTTaevas/Website-Finder/tree/master/Node.js">Node.js</a>
|
||||
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://github.com/TTTaevas/Website-Finder/tree/master/Python">Python</a>
|
||||
<a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://github.com/TTTaevas/Website-Finder/tree/master/Ruby">Ruby</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="finder">
|
||||
<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="">
|
||||
<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="">
|
||||
<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="">
|
||||
<label>Max domain length (excl. TLD)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-lg col-md-3 col-12 form-floating">
|
||||
<input class="form-control" placeholder="" type="text" id="protocols" value="https" placeholder="">
|
||||
<label>Application protocols</label>
|
||||
</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="">
|
||||
<label>TLDs to check</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-lg-9 col-12 form-floating" style="margin-left: auto; margin-right: auto;">
|
||||
<input class="form-control" placeholder="" type="number" id="second" value="0" placeholder="">
|
||||
<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!">
|
||||
</form>
|
||||
</div>
|
||||
<div id="status" class="row">
|
||||
<div id="progress" class="col">
|
||||
<p>STATUS: STOPPED</p>
|
||||
<p>COUNT:</p>
|
||||
<p>CHECKING:</p>
|
||||
</div>
|
||||
<div id="list" class="col">
|
||||
<ul>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
Webpage/index.js
Normal file
64
Webpage/index.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
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
|
||||
}
|
||||
|
||||
console.log('\nFinished at ' + String(new Date().getHours()) + 'h' + String(new Date().getMinutes()) + 'm')
|
||||
status.innerHTML = "STATUS: STOPPED"
|
||||
document.getElementById("btn").disabled = false
|
||||
}
|
||||
|
||||
function url_generator() {
|
||||
let result = protocols[Math.round(Math.random() * (protocols.length - 1))] + "://"
|
||||
const url_length = Math.floor(Math.random() * (max - min) + min)
|
||||
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)]
|
||||
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 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().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