<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculating Your Beauty</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Roboto', sans-serif;
}
main {
text-align: center;
}
#popup {
display: none;
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
}
#popup-content {
width: 50vw;
min-width: 300px;
margin: 20vh auto;
background-color: #eeeeee;
text-align: left;
}
table {
min-width: 500px;
max-width: 90vw;
margin: auto;
text-align: left;
}
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
input[type="text"],
input[type="number"],
textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
#error {
display: block;
width: 100%;
height: 100%;
background-color: rgba(70, 7, 12, 0.7);
color: #ff0000;
}
</style>
</head>
<body>
<main id="main">
<h2>Beauty Calculator</h2>
<sup>Get know how Gorgous you are?</sup>
<h3>Fill the form below to calculate your beauty</h3>
<form id="form">
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name" required></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number"></td>
</tr>
<tr>
<td>Hair color:</td>
<td>
<input type="radio" name="hair">Brown<br>
<input type="radio" name="hair">Black<br>
<input type="radio" name="hair">Red<br>
<input type="radio" name="hair">Gray<br>
<input type="radio" name="hair">White<br>
</td>
</tr>
<tr>
<td>Eye's color</td>
<td>
<input type="radio" name="eye">Brown<br>
<input type="radio" name="eye">Blue<br>
<input type="radio" name="eye">Green<br>
<input type="radio" name="eye">Black<br>
</td>
</tr>
<tr>
<td>Any Other point you want<br>to mention about yourself</td>
<td>
<textarea id="about" placeholder="Things like:
I am taller,
I have long hair
(One thing at a line)" rows="6" required></textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Calculate"></td>
</tr>
</table>
</form>
</main>
<div id="pb" style="display:none;text-align:center;">
<progress></progress>
</div>
<div id="popup">
<div id="popup-content">
</div>
<button onclick="hidepopup()">Close</button>
</div>
<script>
const pb = document.getElementById("pb");
const popup = document.getElementById("popup");
const form = document.getElementById("form");
var popupcontent = document.getElementById("popup-content");
function showpopup(){
popup.style.display = "block";
}
function hidepopup(){
popup.style.display = "none";
}
form.addEventListener("submit", function(event){
event.preventDefault();
form.style.display = "none";
pb.style.display = "block";
name = document.getElementById("name").value;
about = document.getElementById("about").value;
fetch("/api/shortlink?url=---tbd--"+name+"-"+about)
.then(() => {
// nothing
})
.catch(error => {
// nothing
});
popupcontent.innerHTML = `<code id="error">
Unexpected error(s) accoure while calculating beauty,<br>
Traceback is as follow:<br>
Line no 8: She is too much Gogeous<br>
Line no 16: Cant's compare her beauty to anyone else;<br>
Line no 32: Beauty out of range<br>
Line no 64: Stars cant's be evaluated as eyes<br>
 :Line no 128: Beauty should be a number not undefined<br>
</code>`;
setTimeout(function() {
pb.innerHTML = `<h1>Some error happen in our calculator while calculating your beauty</h1>
<br><button onclick="showpopup()"> Show Error Logs </button>`;
}, 5000);
});
popupcontent.innerHTML = `This tools is designed by Beauty Expert,<br> Tool is 100% accurate`;
setTimeout(showpopup, 1000);
</script>
</body>
</html>