Webleb - HTML UI Elements - Verificador de vírus

HTML

CSS

<!DOCTYPE html>

<html>

<head>

<title>Virus Scanner</title>

<style>

body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }

#results { margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }

.malicious { color: red; }

.clean { color: green; }

</style>

</head>

<body>

<h1>Virus Scanner using VirusTotal</h1>

<div>

</div>

<div>

</div>

<h3>Scan Results</h3>

</div>

// Replace with your actual VirusTotal API key

const API_KEY = 'YOUR_VIRUSTOTAL_API_KEY';

async function scanFile() {

const fileInput = document.getElementById('fileInput');

const resultsDiv = document.getElementById('results');

const scanDetails = document.getElementById('scanDetails');

if (fileInput.files.length === 0) {

alert('Please select a file first');

return;

}

const file = fileInput.files[0];

scanDetails.innerHTML = '<p>Scanning file... Please wait.</p>';

resultsDiv.style.display = 'block';

try {

// Get upload URL first

const uploadUrlResponse = await fetch(`https://www.virustotal.com/api/v3/files/upload_url`, {

headers: {

'x-apikey': API_KEY

}

});

const uploadUrlData = await uploadUrlResponse.json();

const uploadUrl = uploadUrlData.data;

// Upload the file

const formData = new FormData();

formData.append('file', file);

const uploadResponse = await fetch(uploadUrl, {

method: 'POST',

body: formData,

headers: {

'x-apikey': API_KEY

}

});

const uploadResult = await uploadResponse.json();

const analysisId = uploadResult.data.id;

// Get analysis results

await pollAnalysisResults(analysisId, scanDetails);

} catch (error) {

scanDetails.innerHTML = `<p class="error">Error: ${error.message}</p>`;

console.error(error);

}

async function scanUrl() {

const urlInput = document.getElementById('urlInput');

const resultsDiv = document.getElementById('results');

const scanDetails = document.getElementById('scanDetails');

if (!urlInput.value) {

alert('Please enter a URL first');

return;

}

scanDetails.innerHTML = '<p>Scanning URL... Please wait.</p>';

resultsDiv.style.display = 'block';

try {

// Submit URL for analysis

const submitResponse = await fetch('https://www.virustotal.com/api/v3/urls', {

method: 'POST',

headers: {

'x-apikey': API_KEY,

'Content-Type': 'application/x-www-form-urlencoded'

body: `url=${encodeURIComponent(urlInput.value)}`

});

const submitResult = await submitResponse.json();

const analysisId = submitResult.data.id;

// Get analysis results

await pollAnalysisResults(analysisId, scanDetails);

} catch (error) {

scanDetails.innerHTML = `<p class="error">Error: ${error.message}</p>`;

console.error(error);

}

async function pollAnalysisResults(analysisId, scanDetails) {

try {

let analysisComplete = false;

let attempts = 0;

const maxAttempts = 10; // Limit polling attempts

while (!analysisComplete && attempts < maxAttempts) {

attempts++;

const analysisResponse = await fetch(`https://www.virustotal.com/api/v3/analyses/${analysisId}`, {

headers: {

'x-apikey': API_KEY

}

});

const analysisData = await analysisResponse.json();

const status = analysisData.data.attributes.status;

if (status === 'completed') {

analysisComplete = true;

displayResults(analysisData, scanDetails);

} else {

// Wait 5 seconds before polling again

await new Promise(resolve => setTimeout(resolve, 5000));

scanDetails.innerHTML += '<p>Still processing... (attempt ' + attempts + ')</p>';

}

if (!analysisComplete) {

scanDetails.innerHTML += '<p class="error">Analysis timed out. Please check back later.</p>';

}

} catch (error) {

scanDetails.innerHTML = `<p class="error">Error: ${error.message}</p>`;

console.error(error);

}

function displayResults(analysisData, scanDetails) {

const stats = analysisData.data.attributes.stats;

const results = analysisData.data.attributes.results || {};

let html = `

<p><strong>Scan Date:</strong> ${new Date(analysisData.data.attributes.date * 1000).toLocaleString()}</p>

<p><strong>Status:</strong> ${analysisData.data.attributes.status}</p>

<p class="${stats.malicious > 0 ? 'malicious' : 'clean'}">

<strong>Detection Ratio:</strong> ${stats.malicious} / ${stats.malicious + stats.undetected + stats.harmless}

</p>

<p><strong>Vendor Results:</strong></p>

<ul>

for (const [vendor, result] of Object.entries(results)) {

html += `<li>${vendor}: ${result.category} ${result.result || ''}</li>`;

}

html += `</ul>`;

if (stats.malicious > 0) {

html += `<p class="malicious">WARNING: This item was flagged as malicious by ${stats.malicious} security vendors.</p>`;

} else {

html += `<p class="clean">No security vendors flagged this item as malicious.</p>`;

}

scanDetails.innerHTML = html;

}

</script>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<html>

<head>

<title>Virus Scanner</title>

<style>

body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }

#results { margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }

.malicious { color: red; }

.clean { color: green; }

</style>

</head>

<body>

<h1>Virus Scanner using VirusTotal</h1>

<div>

</div>

<div>

</div>

<h3>Scan Results</h3>

</div>

// Replace with your actual VirusTotal API key

const API_KEY = 'YOUR_VIRUSTOTAL_API_KEY';

async function scanFile() {

const fileInput = document.getElementById('fileInput');

const resultsDiv = document.getElementById('results');

const scanDetails = document.getElementById('scanDetails');

if (fileInput.files.length === 0) {

alert('Please select a file first');

return;

}

const file = fileInput.files[0];

scanDetails.innerHTML = '<p>Scanning file... Please wait.</p>';

resultsDiv.style.display = 'block';

try {

// Get upload URL first

const uploadUrlResponse = await fetch(`https://www.virustotal.com/api/v3/files/upload_url`, {

headers: {

'x-apikey': API_KEY

}

});

const uploadUrlData = await uploadUrlResponse.json();

const uploadUrl = uploadUrlData.data;

// Upload the file

const formData = new FormData();

formData.append('file', file);

const uploadResponse = await fetch(uploadUrl, {

method: 'POST',

body: formData,

headers: {

'x-apikey': API_KEY

}

});

const uploadResult = await uploadResponse.json();

const analysisId = uploadResult.data.id;

// Get analysis results

await pollAnalysisResults(analysisId, scanDetails);

} catch (error) {

scanDetails.innerHTML = `<p class="error">Error: ${error.message}</p>`;

console.error(error);

}

async function scanUrl() {

const urlInput = document.getElementById('urlInput');

const resultsDiv = document.getElementById('results');

const scanDetails = document.getElementById('scanDetails');

if (!urlInput.value) {

alert('Please enter a URL first');

return;

}

scanDetails.innerHTML = '<p>Scanning URL... Please wait.</p>';

resultsDiv.style.display = 'block';

try {

// Submit URL for analysis

const submitResponse = await fetch('https://www.virustotal.com/api/v3/urls', {

method: 'POST',

headers: {

'x-apikey': API_KEY,

'Content-Type': 'application/x-www-form-urlencoded'

body: `url=${encodeURIComponent(urlInput.value)}`

});

const submitResult = await submitResponse.json();

const analysisId = submitResult.data.id;

// Get analysis results

await pollAnalysisResults(analysisId, scanDetails);

} catch (error) {

scanDetails.innerHTML = `<p class="error">Error: ${error.message}</p>`;

console.error(error);

}

async function pollAnalysisResults(analysisId, scanDetails) {

try {

let analysisComplete = false;

let attempts = 0;

const maxAttempts = 10; // Limit polling attempts

while (!analysisComplete && attempts < maxAttempts) {

attempts++;

const analysisResponse = await fetch(`https://www.virustotal.com/api/v3/analyses/${analysisId}`, {

headers: {

'x-apikey': API_KEY

}

});

const analysisData = await analysisResponse.json();

const status = analysisData.data.attributes.status;

if (status === 'completed') {

analysisComplete = true;

displayResults(analysisData, scanDetails);

} else {

// Wait 5 seconds before polling again

await new Promise(resolve => setTimeout(resolve, 5000));

scanDetails.innerHTML += '<p>Still processing... (attempt ' + attempts + ')</p>';

}

if (!analysisComplete) {

scanDetails.innerHTML += '<p class="error">Analysis timed out. Please check back later.</p>';

}

} catch (error) {

scanDetails.innerHTML = `<p class="error">Error: ${error.message}</p>`;

console.error(error);

}

function displayResults(analysisData, scanDetails) {

const stats = analysisData.data.attributes.stats;

const results = analysisData.data.attributes.results || {};

let html = `

<p><strong>Scan Date:</strong> ${new Date(analysisData.data.attributes.date * 1000).toLocaleString()}</p>

<p><strong>Status:</strong> ${analysisData.data.attributes.status}</p>

<p class="${stats.malicious > 0 ? 'malicious' : 'clean'}">

<strong>Detection Ratio:</strong> ${stats.malicious} / ${stats.malicious + stats.undetected + stats.harmless}

</p>

<p><strong>Vendor Results:</strong></p>

<ul>

for (const [vendor, result] of Object.entries(results)) {

html += `<li>${vendor}: ${result.category} ${result.result || ''}</li>`;

}

html += `</ul>`;

if (stats.malicious > 0) {

html += `<p class="malicious">WARNING: This item was flagged as malicious by ${stats.malicious} security vendors.</p>`;

} else {

html += `<p class="clean">No security vendors flagged this item as malicious.</p>`;

}

scanDetails.innerHTML = html;

}

</script>

</body>

</html>