File size: 7,224 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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TurboChrome AutoSpectacle</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-100">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section class="hero-section bg-gradient-to-r from-gray-800 to-gray-900 text-white rounded-xl p-8 mb-12">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4">TurboChrome AutoSpectacle</h1>
<p class="text-xl mb-8">Where engineering meets automotive excellence</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#showcase" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-semibold transition-colors">Explore Cars</a>
<a href="#monitor" class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors">Monitor Websites</a>
</div>
</div>
</section>
<!-- Car Showcase -->
<section id="showcase" class="mb-16">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Premium Car Showcase</h2>
<a href="#" class="text-red-600 hover:text-red-700 font-semibold flex items-center">
View All
<i data-feather="chevron-right" class="ml-1"></i>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Car cards will be populated by JavaScript -->
</div>
</section>
<!-- Website Monitoring -->
<section id="monitor" class="mb-16 bg-white rounded-xl shadow-md p-6">
<h2 class="text-2xl font-bold mb-6">Website Monitoring</h2>
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/2">
<div class="bg-gray-50 rounded-lg p-4 mb-4">
<h3 class="font-semibold mb-2 flex items-center">
<i data-feather="globe" class="mr-2 text-red-600"></i>
Add Website to Monitor
</h3>
<form id="monitor-form" class="space-y-3">
<input type="url" placeholder="https://example.com" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent">
<button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors">Start Monitoring</button>
</form>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h3 class="font-semibold mb-2 flex items-center">
<i data-feather="bar-chart-2" class="mr-2 text-red-600"></i>
Monitoring Stats
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white p-3 rounded-lg shadow-sm">
<p class="text-sm text-gray-500">Monitored Sites</p>
<p class="text-2xl font-bold">12</p>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm">
<p class="text-sm text-gray-500">Status Changes</p>
<p class="text-2xl font-bold">3</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2">
<h3 class="font-semibold mb-2 flex items-center">
<i data-feather="list" class="mr-2 text-red-600"></i>
Monitored Websites
</h3>
<div class="bg-gray-50 rounded-lg overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-200">
<tr>
<th class="px-4 py-2 text-left">Website</th>
<th class="px-4 py-2 text-left">Status</th>
<th class="px-4 py-2 text-left">Last Check</th>
</tr>
</thead>
<tbody id="monitor-table">
<!-- Will be populated by JavaScript -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- Engineering Resources -->
<section class="mb-16">
<h2 class="text-2xl font-bold mb-6">Engineering Resources</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<article class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="http://static.photos/technology/640x360/1" alt="Engineering Article" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">Understanding Engine Performance</h3>
<p class="text-gray-600 mb-4">Learn how different engine components work together to produce power efficiently.</p>
<a href="#" class="text-red-600 hover:text-red-700 font-semibold">Read More →</a>
</div>
</article>
<article class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="http://static.photos/technology/640x360/2" alt="Engineering Article" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="font-bold text-xl mb-2">The Future of Electric Vehicles</h3>
<p class="text-gray-600 mb-4">Exploring the latest advancements in EV technology and what to expect in the coming years.</p>
<a href="#" class="text-red-600 hover:text-red-700 font-semibold">Read More →</a>
</div>
</article>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |