Spaces:
Sleeping
Sleeping
File size: 3,712 Bytes
70e9963 cb8d80f 70e9963 63f5ec9 70e9963 cb8d80f 70e9963 cb8d80f 70e9963 cb8d80f 70e9963 31d7e21 70e9963 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Prediction URL Legitimate or Phishing</title>
</head>
<body>
<div id="Model1" class="Model bg-gradient-to-r from-blue-400 to-blue-700 text-gray-800">
<section class="flex flex-col justify-between item-center p-8 min-h-screen md:flex-row">
<main class="bg-white p-16 rounded-lg">
<h1 class="text-3xl font-bold mb-8">Test if your URL is Phishing or Legitimate</h1>
<form enctype="multipart/form-data" class="flex flex-col" id="upload_form">
<label for="url" class="mb-2">Write your URL</label>
<input type="text" name="url" placeholder="URL" required="required" class="p-4 bg-gray-100 rounded-md" />
<button type="submit" class="flex justify-center align-center mt-8 p-4 bg-gradient-to-r from-blue-400 to-blue-700 text-white rounded-md">
TEST URL<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right ml-4">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</button>
</form>
</main>
<section class="mt-8 h-full flex-auto rounded-lg md:mt-0 md:ml-8">
<div class="bg-white p-16 rounded-lg">
<h1 class="text-2xl mb-8">Your URL is:</h1>
<h2 class="text-5xl font-bold"><span id="label">Enter an URL</span></h2>
<div class="mt-8">
<p id="respUrl"></p>
</div>
</div>
</section>
</section>
</div>
<style>
.active {
background-color: rgb(45, 137, 241);
}
</style>
</body>
<script>
function openModel(evt, modelName) {
var i, x, tablinks;
x = document.getElementsByClassName("Model");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(modelName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<script>
$(document).ready(function () {
$("#upload_form").submit(function (event) {
event.preventDefault(); // Prevent the default form submission
// Get the form data
var formData = new FormData(this);
// Make the Ajax request
$.ajax({
type: "POST",
url: "https://binoubinks-adsp-finalprojectback.hf.space/predict",
data: formData,
processData: false,
contentType: false,
success: function (response) {
// Handle the response data
$('#respUrl').html("<strong>Url:</strong> " + response.url);
$('#label').html(response.label);
console.log(response);
},
error: function (error) {
console.error("Error:", error);
}
});
});
});
</script>
</body>
</html> |