File size: 4,057 Bytes
c2c876f |
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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
document.addEventListener('DOMContentLoaded', function() {
// Sample car data (would normally come from API)
const cars = [
{
id: 1,
name: "Ferrari SF90 Stradale",
description: "Hybrid supercar with 986 horsepower",
image: "http://static.photos/automotive/640x360/10",
specs: {
engine: "4.0L V8 + 3 electric motors",
horsepower: 986,
torque: "800 Nm",
topSpeed: "340 km/h"
}
},
{
id: 2,
name: "Porsche Taycan Turbo S",
description: "High-performance electric sedan",
image: "http://static.photos/automotive/640x360/11",
specs: {
engine: "Dual electric motors",
horsepower: 750,
torque: "1050 Nm",
topSpeed: "260 km/h"
}
},
{
id: 3,
name: "Lamborghini Huracán EVO",
description: "Naturally aspirated V10 supercar",
image: "http://static.photos/automotive/640x360/12",
specs: {
engine: "5.2L V10",
horsepower: 630,
torque: "600 Nm",
topSpeed: "325 km/h"
}
}
];
// Sample monitored websites data
const monitoredWebsites = [
{ url: "https://tesla.com", status: "up", lastChecked: "2023-06-15T10:30:00Z" },
{ url: "https://porsche.com", status: "up", lastChecked: "2023-06-15T10:35:00Z" },
{ url: "https://ferrari.com", status: "down", lastChecked: "2023-06-15T10:40:00Z" }
];
// Populate car showcase
const carShowcase = document.querySelector('#showcase .grid');
cars.forEach(car => {
const carCard = document.createElement('div');
carCard.className = 'bg-white rounded-xl shadow-md overflow-hidden card-hover';
carCard.innerHTML = `
<img src="${car.image}" alt="${car.name}" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">${car.name}</h3>
<p class="text-gray-600 mb-4">${car.description}</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500">${car.specs.horsepower} HP</span>
<a href="#" class="text-red-600 hover:text-red-700 font-semibold">Details →</a>
</div>
</div>
`;
carShowcase.appendChild(carCard);
});
// Populate monitored websites table
const monitorTable = document.getElementById('monitor-table');
monitoredWebsites.forEach(site => {
const row = document.createElement('tr');
row.className = 'border-t hover:bg-gray-50';
const statusClass = site.status === 'up' ? 'status-up' :
site.status === 'down' ? 'status-down' : 'status-pending';
row.innerHTML = `
<td class="px-4 py-3">${site.url}</td>
<td class="px-4 py-3"><span class="${statusClass}">${site.status}</span></td>
<td class="px-4 py-3">${new Date(site.lastChecked).toLocaleString()}</td>
`;
monitorTable.appendChild(row);
});
// Form submission for adding new website to monitor
const monitorForm = document.getElementById('monitor-form');
monitorForm.addEventListener('submit', function(e) {
e.preventDefault();
const urlInput = this.querySelector('input[type="url"]');
const url = urlInput.value.trim();
if (url) {
// In a real app, this would call your API
alert(`Starting to monitor: ${url}\n(Would call API in real implementation)`);
urlInput.value = '';
}
});
// Responsive adjustments
function handleResize() {
// Could add responsive behaviors here
}
window.addEventListener('resize', handleResize);
handleResize();
}); |