Backend Website for Car Engineering and High-Quality Car Showcase
Browse filesOverview
This backend website provides an API to monitor various websites and serves as an engineering resource site dedicated to cars. It includes detailed explanations about cars, engineering concepts, and showcases high-quality car models.
Features
Website Monitoring API: Continuously monitors specified websites for updates or changes.
Engineering Content: Comprehensive articles and explanations about car mechanics, engineering principles, and automotive technology.
High-Quality Car Showcase: A gallery or section dedicated to showcasing high-resolution images and details of premium cars.
Technology Stack
Backend: Node.js with Express.js for backend API
Frontend: React.js for frontend UI
Database: MongoDB for flexible document storage
Monitoring: Node-cron for scheduled website monitoring jobs
API: RESTful endpoints for monitoring and content retrieval
Database Schema
Car
id: ObjectId
name: String
manufacturer: String
year: Number
description: String
specs: Object (e.g., engine, horsepower, torque)
images: Array of image URLs
EngineeringArticle
id: ObjectId
title: String
content: String (rich text or markdown)
images: Array of image URLs
createdAt: Date
MonitoredWebsite
id: ObjectId
url: String
lastChecked: Date
status: String (e.g., "up", "down", "changed")
changeLog: Array of change descriptions
API Endpoints
Monitor API
GET /api/monitor - List all monitored websites with status
POST /api/monitor - Add a new website to monitor (body: { url: string })
GET /api/monitor/:id - Get details and change log for a monitored website
Cars API
GET /api/cars - List all cars in showcase
GET /api/cars/:id - Get detailed info about a specific car
POST /api/cars - Add a new car to showcase (body: car data)
Engineering Articles API
GET /api/articles - List all engineering articles
GET /api/articles/:id - Get detailed article
POST /api/articles - Add a new engineering article
Backend Code Example (Express.js)
const express = require('express');
const mongoose = require('mongoose');
const cron = require('node-cron');
const app = express();
app.use(express.json());
// MongoDB connection
mongoose.connect('mongodb://localhost/carshowcase', { useNewUrlParser: true, useUnifiedTopology: true });
// Define schemas
const carSchema = new mongoose.Schema({
name: String,
manufacturer: String,
year: Number,
description: String,
specs: Object,
images: [String],
});
const Car = mongoose.model('Car', carSchema);
const monitoredWebsiteSchema = new mongoose.Schema({
url: String,
lastChecked: Date,
status: String,
changeLog: [String],
});
const MonitoredWebsite = mongoose.model('MonitoredWebsite', monitoredWebsiteSchema);
// API endpoints
app.get('/api/cars', async (req, res) => {
const cars = await Car.find();
res.json(cars);
});
app.post('/api/cars', async (req, res) => {
const car = new Car(req.body);
await car.save();
res.status(201).json(car);
});
app.get('/api/monitor', async (req, res) => {
const sites = await MonitoredWebsite.find();
res.json(sites);
});
app.post('/api/monitor', async (req, res) => {
const site = new MonitoredWebsite({ url: req.body.url, lastChecked: new Date(), status: 'unknown', changeLog: [] });
await site.save();
res.status(201).json(site);
});
// Scheduled monitoring job example
cron.schedule('*/10 * * * *', async () => {
const sites = await MonitoredWebsite.find();
sites.forEach(async (site) => {
// Here you would add logic to check the website status and detect changes
console.log(`Checking site: ${site.url}`);
// Update site status and changeLog accordingly
});
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
Next Steps
Implement detailed monitoring logic to detect website changes
Develop frontend React components for car showcase and engineering articles
Connect frontend with backend API
Add authentication and admin panel for content management
Would you like me to start writing the backend code files or create the frontend React components next?# Backend Website for Car Engineering and High-Quality Car Showcase
Overview
This backend website provides an API to monitor various websites and serves as an engineering resource site dedicated to cars. It includes detailed explanations about cars, engineering concepts, and showcases high-quality car models.
Features
Website Monitoring API: Continuously monitors specified websites for updates or changes.
Engineering Content: Comprehensive articles and explanations about car mechanics, engineering principles, and automotive technology.
High-Quality Car Showcase: A gallery or section dedicated to showcasing high-resolution images and details of premium cars.
Technology Stack
Backend: Node.js with Express.js for backend API
Frontend: React.js for frontend UI
Database: MongoDB for flexible document storage
Monitoring: Node-cron for scheduled website monitoring jobs
API: RESTful endpoints for monitoring and content retrieval
Database Schema
Car
id: ObjectId
name: String
manufacturer: String
year: Number
description: String
specs: Object (e.g., engine, horsepower, torque)
images: Array of image URLs
EngineeringArticle
id: ObjectId
title: String
content: String (rich text or markdown)
images: Array of image URLs
createdAt: Date
MonitoredWebsite
id: ObjectId
url: String
lastChecked: Date
status: String (e.g., "up", "down", "changed")
changeLog: Array of change descriptions
API Endpoints
Monitor API
GET /api/monitor - List all monitored websites with status
POST /api/monitor - Add a new website to monitor (body: { url: string })
GET /api/monitor/:id - Get details and change log for a monitored website
Cars API
GET /api/cars - List all cars in showcase
GET /api/cars/:id - Get detailed info about a specific car
POST /api/cars - Add a new car to showcase (body: car data)
Engineering Articles API
GET /api/articles - List all engineering articles
GET /api/articles/:id - Get detailed article
POST /api/articles - Add a new engineering article
Backend Code Example (Express.js)
const express = require('express');
const mongoose = require('mongoose');
const cron = require('node-cron');
const app = express();
app.use(express.json());
// MongoDB connection
mongoose.connect('mongodb://localhost/carshowcase', { useNewUrlParser: true, useUnifiedTopology: true });
// Define schemas
const carSchema = new mongoose.Schema({
name: String,
manufacturer: String,
year: Number,
description: String,
specs: Object,
images: [String],
});
const Car = mongoose.model('Car', carSchema);
const monitoredWebsiteSchema = new mongoose.Schema({
url: String,
lastChecked: Date,
status: String,
changeLog: [String],
});
const MonitoredWebsite = mongoose.model('MonitoredWebsite', monitoredWebsiteSchema);
// API endpoints
app.get('/api/cars', async (req, res) => {
const cars = await Car.find();
res.json(cars);
});
app.post('/api/cars', async (req, res) => {
const car = new Car(req.body);
await car.save();
res.status(201).json(car);
});
app.get('/api/monitor', async (req, res) => {
const sites = await MonitoredWebsite.find();
res.json(sites);
});
app.post('/api/monitor', async (req, res) => {
const site = new MonitoredWebsite({ url: req.body.url, lastChecked: new Date(), status: 'unknown', changeLog: [] });
await site.save();
res.status(201).json(site);
});
// Scheduled monitoring job example
cron.schedule('*/10 * * * *', async () => {
const sites = await MonitoredWebsite.find();
sites.forEach(async (site) => {
// Here you would add logic to check the website status and detect changes
console.log(`Checking site: ${site.url}`);
// Update site status and changeLog accordingly
});
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
Next Steps
Implement detailed monitoring logic to detect website changes
Develop frontend React components for car showcase and engineering articles
Connect frontend with backend API
Add authentication and admin panel for content management
Would you like me to start writing the backend code files or create the frontend React components next?# Backend Website for Car Engineering and High-Quality Car Showcase
Overview
This backend website provides an API to monitor various websites and serves as an engineering resource site dedicated to cars. It includes detailed explanations about cars, engineering concepts, and showcases high-quality car models.
Features
Website Monitoring API: Continuously monitors specified websites for updates or changes.
Engineering Content: Comprehensive articles and explanations about car mechanics, engineering principles, and automotive technology.
High-Quality Car Showcase: A gallery or section dedicated to showcasing high-resolution images and details of premium cars.
Technology Stack
Backend: Node.js with Express.js for backend API
Frontend: React.js for frontend UI
Database: MongoDB for flexible document storage
Monitoring: Node-cron for scheduled website monitoring jobs
API: RESTful endpoints for monitoring and content retrieval
Database Schema
Car
id: ObjectId
name: String
manufacturer: String
year: Number
description: String
specs: Object (e.g., engine, horsepower, torque)
images: Array of image URLs
EngineeringArticle
id: ObjectId
title: String
content: String (rich text or markdown)
images: Array of image URLs
createdAt: Date
MonitoredWebsite
id: ObjectId
url: String
lastChecked: Date
status: String (e.g., "up", "down", "changed")
changeLog: Array of change descriptions
API Endpoints
Monitor API
GET /api/monitor - List all monitored websites with status
POST /api/monitor - Add a new website to monitor (body: { url: string })
GET /api/monitor/:id - Get details and change log for a monitored website
Cars API
GET /api/cars - List all cars in showcase
GET /api/cars/:id - Get detailed info about a specific car
POST /api/cars - Add a new car to showcase (body: car data)
Engineering Articles API
GET /api/articles - Li
- README.md +8 -5
- components/footer.js +130 -0
- components/navbar.js +96 -0
- index.html +136 -19
- script.js +106 -0
- style.css +55 -18
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: TurboChrome AutoSpectacle 🚗💨
|
| 3 |
+
colorFrom: blue
|
| 4 |
+
colorTo: gray
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
|
@@ -0,0 +1,130 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomFooter extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
:host {
|
| 7 |
+
display: block;
|
| 8 |
+
background-color: #111827;
|
| 9 |
+
color: #f3f4f6;
|
| 10 |
+
padding: 3rem 1rem;
|
| 11 |
+
margin-top: 4rem;
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
.footer-container {
|
| 15 |
+
max-width: 1200px;
|
| 16 |
+
margin: 0 auto;
|
| 17 |
+
display: grid;
|
| 18 |
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| 19 |
+
gap: 2rem;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
.footer-section h3 {
|
| 23 |
+
font-size: 1.125rem;
|
| 24 |
+
font-weight: 600;
|
| 25 |
+
margin-bottom: 1rem;
|
| 26 |
+
color: white;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
.footer-links {
|
| 30 |
+
display: flex;
|
| 31 |
+
flex-direction: column;
|
| 32 |
+
gap: 0.75rem;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
.footer-link {
|
| 36 |
+
color: #9ca3af;
|
| 37 |
+
transition: color 0.2s;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.footer-link:hover {
|
| 41 |
+
color: #f87171;
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.social-links {
|
| 45 |
+
display: flex;
|
| 46 |
+
gap: 1rem;
|
| 47 |
+
margin-top: 1rem;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.social-link {
|
| 51 |
+
color: #9ca3af;
|
| 52 |
+
transition: color 0.2s;
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
.social-link:hover {
|
| 56 |
+
color: #f87171;
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
.copyright {
|
| 60 |
+
max-width: 1200px;
|
| 61 |
+
margin: 2rem auto 0;
|
| 62 |
+
padding-top: 2rem;
|
| 63 |
+
border-top: 1px solid #374151;
|
| 64 |
+
text-align: center;
|
| 65 |
+
color: #9ca3af;
|
| 66 |
+
font-size: 0.875rem;
|
| 67 |
+
}
|
| 68 |
+
</style>
|
| 69 |
+
<div class="footer-container">
|
| 70 |
+
<div class="footer-section">
|
| 71 |
+
<h3>TurboChrome</h3>
|
| 72 |
+
<p class="text-gray-400">The ultimate platform for car engineering and high-quality showcases.</p>
|
| 73 |
+
<div class="social-links">
|
| 74 |
+
<a href="#" class="social-link">
|
| 75 |
+
<i data-feather="twitter"></i>
|
| 76 |
+
</a>
|
| 77 |
+
<a href="#" class="social-link">
|
| 78 |
+
<i data-feather="instagram"></i>
|
| 79 |
+
</a>
|
| 80 |
+
<a href="#" class="social-link">
|
| 81 |
+
<i data-feather="github"></i>
|
| 82 |
+
</a>
|
| 83 |
+
<a href="#" class="social-link">
|
| 84 |
+
<i data-feather="linkedin"></i>
|
| 85 |
+
</a>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
|
| 89 |
+
<div class="footer-section">
|
| 90 |
+
<h3>Showcase</h3>
|
| 91 |
+
<div class="footer-links">
|
| 92 |
+
<a href="#" class="footer-link">Supercars</a>
|
| 93 |
+
<a href="#" class="footer-link">Electric Vehicles</a>
|
| 94 |
+
<a href="#" class="footer-link">Classic Cars</a>
|
| 95 |
+
<a href="#" class="footer-link">Concept Cars</a>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
|
| 99 |
+
<div class="footer-section">
|
| 100 |
+
<h3>Resources</h3>
|
| 101 |
+
<div class="footer-links">
|
| 102 |
+
<a href="#" class="footer-link">Engineering Guides</a>
|
| 103 |
+
<a href="#" class="footer-link">Technical Specs</a>
|
| 104 |
+
<a href="#" class="footer-link">Performance Data</a>
|
| 105 |
+
<a href="#" class="footer-link">API Documentation</a>
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
|
| 109 |
+
<div class="footer-section">
|
| 110 |
+
<h3>Company</h3>
|
| 111 |
+
<div class="footer-links">
|
| 112 |
+
<a href="#" class="footer-link">About Us</a>
|
| 113 |
+
<a href="#" class="footer-link">Contact</a>
|
| 114 |
+
<a href="#" class="footer-link">Privacy Policy</a>
|
| 115 |
+
<a href="#" class="footer-link">Terms of Service</a>
|
| 116 |
+
</div>
|
| 117 |
+
</div>
|
| 118 |
+
</div>
|
| 119 |
+
|
| 120 |
+
<div class="copyright">
|
| 121 |
+
© ${new Date().getFullYear()} TurboChrome AutoSpectacle. All rights reserved.
|
| 122 |
+
</div>
|
| 123 |
+
<script>
|
| 124 |
+
feather.replace();
|
| 125 |
+
</script>
|
| 126 |
+
`;
|
| 127 |
+
}
|
| 128 |
+
}
|
| 129 |
+
|
| 130 |
+
customElements.define('custom-footer', CustomFooter);
|
|
@@ -0,0 +1,96 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
:host {
|
| 7 |
+
display: block;
|
| 8 |
+
width: 100%;
|
| 9 |
+
position: sticky;
|
| 10 |
+
top: 0;
|
| 11 |
+
z-index: 50;
|
| 12 |
+
background-color: rgba(255, 255, 255, 0.95);
|
| 13 |
+
backdrop-filter: blur(5px);
|
| 14 |
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
.navbar-container {
|
| 18 |
+
max-width: 1200px;
|
| 19 |
+
margin: 0 auto;
|
| 20 |
+
padding: 1rem 2rem;
|
| 21 |
+
display: flex;
|
| 22 |
+
justify-content: space-between;
|
| 23 |
+
align-items: center;
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.logo {
|
| 27 |
+
font-size: 1.5rem;
|
| 28 |
+
font-weight: 700;
|
| 29 |
+
color: #dc2626;
|
| 30 |
+
display: flex;
|
| 31 |
+
align-items: center;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
.logo-icon {
|
| 35 |
+
margin-right: 0.5rem;
|
| 36 |
+
}
|
| 37 |
+
|
| 38 |
+
.nav-links {
|
| 39 |
+
display: flex;
|
| 40 |
+
align-items: center;
|
| 41 |
+
gap: 2rem;
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.nav-link {
|
| 45 |
+
color: #374151;
|
| 46 |
+
font-weight: 500;
|
| 47 |
+
transition: color 0.2s;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.nav-link:hover {
|
| 51 |
+
color: #dc2626;
|
| 52 |
+
}
|
| 53 |
+
|
| 54 |
+
.mobile-menu-btn {
|
| 55 |
+
display: none;
|
| 56 |
+
background: none;
|
| 57 |
+
border: none;
|
| 58 |
+
color: #374151;
|
| 59 |
+
cursor: pointer;
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
@media (max-width: 768px) {
|
| 63 |
+
.nav-links {
|
| 64 |
+
display: none;
|
| 65 |
+
}
|
| 66 |
+
|
| 67 |
+
.mobile-menu-btn {
|
| 68 |
+
display: block;
|
| 69 |
+
}
|
| 70 |
+
}
|
| 71 |
+
</style>
|
| 72 |
+
<nav class="navbar-container">
|
| 73 |
+
<a href="/" class="logo">
|
| 74 |
+
<i data-feather="activity" class="logo-icon"></i>
|
| 75 |
+
TurboChrome
|
| 76 |
+
</a>
|
| 77 |
+
|
| 78 |
+
<div class="nav-links">
|
| 79 |
+
<a href="#showcase" class="nav-link">Showcase</a>
|
| 80 |
+
<a href="#monitor" class="nav-link">Monitor</a>
|
| 81 |
+
<a href="#" class="nav-link">Engineering</a>
|
| 82 |
+
<a href="#" class="nav-link">About</a>
|
| 83 |
+
</div>
|
| 84 |
+
|
| 85 |
+
<button class="mobile-menu-btn">
|
| 86 |
+
<i data-feather="menu"></i>
|
| 87 |
+
</button>
|
| 88 |
+
</nav>
|
| 89 |
+
<script>
|
| 90 |
+
feather.replace();
|
| 91 |
+
</script>
|
| 92 |
+
`;
|
| 93 |
+
}
|
| 94 |
+
}
|
| 95 |
+
|
| 96 |
+
customElements.define('custom-navbar', CustomNavbar);
|
|
@@ -1,19 +1,136 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>TurboChrome AutoSpectacle</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="components/navbar.js"></script>
|
| 12 |
+
<script src="components/footer.js"></script>
|
| 13 |
+
</head>
|
| 14 |
+
<body class="bg-gray-100">
|
| 15 |
+
<custom-navbar></custom-navbar>
|
| 16 |
+
|
| 17 |
+
<main class="container mx-auto px-4 py-8">
|
| 18 |
+
<!-- Hero Section -->
|
| 19 |
+
<section class="hero-section bg-gradient-to-r from-gray-800 to-gray-900 text-white rounded-xl p-8 mb-12">
|
| 20 |
+
<div class="max-w-3xl mx-auto text-center">
|
| 21 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-4">TurboChrome AutoSpectacle</h1>
|
| 22 |
+
<p class="text-xl mb-8">Where engineering meets automotive excellence</p>
|
| 23 |
+
<div class="flex flex-wrap justify-center gap-4">
|
| 24 |
+
<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>
|
| 25 |
+
<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>
|
| 26 |
+
</div>
|
| 27 |
+
</div>
|
| 28 |
+
</section>
|
| 29 |
+
|
| 30 |
+
<!-- Car Showcase -->
|
| 31 |
+
<section id="showcase" class="mb-16">
|
| 32 |
+
<div class="flex justify-between items-center mb-6">
|
| 33 |
+
<h2 class="text-2xl font-bold">Premium Car Showcase</h2>
|
| 34 |
+
<a href="#" class="text-red-600 hover:text-red-700 font-semibold flex items-center">
|
| 35 |
+
View All
|
| 36 |
+
<i data-feather="chevron-right" class="ml-1"></i>
|
| 37 |
+
</a>
|
| 38 |
+
</div>
|
| 39 |
+
|
| 40 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 41 |
+
<!-- Car cards will be populated by JavaScript -->
|
| 42 |
+
</div>
|
| 43 |
+
</section>
|
| 44 |
+
|
| 45 |
+
<!-- Website Monitoring -->
|
| 46 |
+
<section id="monitor" class="mb-16 bg-white rounded-xl shadow-md p-6">
|
| 47 |
+
<h2 class="text-2xl font-bold mb-6">Website Monitoring</h2>
|
| 48 |
+
<div class="flex flex-col md:flex-row gap-6">
|
| 49 |
+
<div class="md:w-1/2">
|
| 50 |
+
<div class="bg-gray-50 rounded-lg p-4 mb-4">
|
| 51 |
+
<h3 class="font-semibold mb-2 flex items-center">
|
| 52 |
+
<i data-feather="globe" class="mr-2 text-red-600"></i>
|
| 53 |
+
Add Website to Monitor
|
| 54 |
+
</h3>
|
| 55 |
+
<form id="monitor-form" class="space-y-3">
|
| 56 |
+
<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">
|
| 57 |
+
<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>
|
| 58 |
+
</form>
|
| 59 |
+
</div>
|
| 60 |
+
|
| 61 |
+
<div class="bg-gray-50 rounded-lg p-4">
|
| 62 |
+
<h3 class="font-semibold mb-2 flex items-center">
|
| 63 |
+
<i data-feather="bar-chart-2" class="mr-2 text-red-600"></i>
|
| 64 |
+
Monitoring Stats
|
| 65 |
+
</h3>
|
| 66 |
+
<div class="grid grid-cols-2 gap-4">
|
| 67 |
+
<div class="bg-white p-3 rounded-lg shadow-sm">
|
| 68 |
+
<p class="text-sm text-gray-500">Monitored Sites</p>
|
| 69 |
+
<p class="text-2xl font-bold">12</p>
|
| 70 |
+
</div>
|
| 71 |
+
<div class="bg-white p-3 rounded-lg shadow-sm">
|
| 72 |
+
<p class="text-sm text-gray-500">Status Changes</p>
|
| 73 |
+
<p class="text-2xl font-bold">3</p>
|
| 74 |
+
</div>
|
| 75 |
+
</div>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
|
| 79 |
+
<div class="md:w-1/2">
|
| 80 |
+
<h3 class="font-semibold mb-2 flex items-center">
|
| 81 |
+
<i data-feather="list" class="mr-2 text-red-600"></i>
|
| 82 |
+
Monitored Websites
|
| 83 |
+
</h3>
|
| 84 |
+
<div class="bg-gray-50 rounded-lg overflow-hidden">
|
| 85 |
+
<div class="overflow-x-auto">
|
| 86 |
+
<table class="w-full">
|
| 87 |
+
<thead class="bg-gray-200">
|
| 88 |
+
<tr>
|
| 89 |
+
<th class="px-4 py-2 text-left">Website</th>
|
| 90 |
+
<th class="px-4 py-2 text-left">Status</th>
|
| 91 |
+
<th class="px-4 py-2 text-left">Last Check</th>
|
| 92 |
+
</tr>
|
| 93 |
+
</thead>
|
| 94 |
+
<tbody id="monitor-table">
|
| 95 |
+
<!-- Will be populated by JavaScript -->
|
| 96 |
+
</tbody>
|
| 97 |
+
</table>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
</div>
|
| 102 |
+
</section>
|
| 103 |
+
|
| 104 |
+
<!-- Engineering Resources -->
|
| 105 |
+
<section class="mb-16">
|
| 106 |
+
<h2 class="text-2xl font-bold mb-6">Engineering Resources</h2>
|
| 107 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 108 |
+
<article class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 109 |
+
<img src="http://static.photos/technology/640x360/1" alt="Engineering Article" class="w-full h-48 object-cover">
|
| 110 |
+
<div class="p-6">
|
| 111 |
+
<h3 class="font-bold text-xl mb-2">Understanding Engine Performance</h3>
|
| 112 |
+
<p class="text-gray-600 mb-4">Learn how different engine components work together to produce power efficiently.</p>
|
| 113 |
+
<a href="#" class="text-red-600 hover:text-red-700 font-semibold">Read More →</a>
|
| 114 |
+
</div>
|
| 115 |
+
</article>
|
| 116 |
+
<article class="bg-white rounded-xl shadow-md overflow-hidden">
|
| 117 |
+
<img src="http://static.photos/technology/640x360/2" alt="Engineering Article" class="w-full h-48 object-cover">
|
| 118 |
+
<div class="p-6">
|
| 119 |
+
<h3 class="font-bold text-xl mb-2">The Future of Electric Vehicles</h3>
|
| 120 |
+
<p class="text-gray-600 mb-4">Exploring the latest advancements in EV technology and what to expect in the coming years.</p>
|
| 121 |
+
<a href="#" class="text-red-600 hover:text-red-700 font-semibold">Read More →</a>
|
| 122 |
+
</div>
|
| 123 |
+
</article>
|
| 124 |
+
</div>
|
| 125 |
+
</section>
|
| 126 |
+
</main>
|
| 127 |
+
|
| 128 |
+
<custom-footer></custom-footer>
|
| 129 |
+
|
| 130 |
+
<script src="script.js"></script>
|
| 131 |
+
<script>
|
| 132 |
+
feather.replace();
|
| 133 |
+
</script>
|
| 134 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 135 |
+
</body>
|
| 136 |
+
</html>
|
|
@@ -0,0 +1,106 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 2 |
+
// Sample car data (would normally come from API)
|
| 3 |
+
const cars = [
|
| 4 |
+
{
|
| 5 |
+
id: 1,
|
| 6 |
+
name: "Ferrari SF90 Stradale",
|
| 7 |
+
description: "Hybrid supercar with 986 horsepower",
|
| 8 |
+
image: "http://static.photos/automotive/640x360/10",
|
| 9 |
+
specs: {
|
| 10 |
+
engine: "4.0L V8 + 3 electric motors",
|
| 11 |
+
horsepower: 986,
|
| 12 |
+
torque: "800 Nm",
|
| 13 |
+
topSpeed: "340 km/h"
|
| 14 |
+
}
|
| 15 |
+
},
|
| 16 |
+
{
|
| 17 |
+
id: 2,
|
| 18 |
+
name: "Porsche Taycan Turbo S",
|
| 19 |
+
description: "High-performance electric sedan",
|
| 20 |
+
image: "http://static.photos/automotive/640x360/11",
|
| 21 |
+
specs: {
|
| 22 |
+
engine: "Dual electric motors",
|
| 23 |
+
horsepower: 750,
|
| 24 |
+
torque: "1050 Nm",
|
| 25 |
+
topSpeed: "260 km/h"
|
| 26 |
+
}
|
| 27 |
+
},
|
| 28 |
+
{
|
| 29 |
+
id: 3,
|
| 30 |
+
name: "Lamborghini Huracán EVO",
|
| 31 |
+
description: "Naturally aspirated V10 supercar",
|
| 32 |
+
image: "http://static.photos/automotive/640x360/12",
|
| 33 |
+
specs: {
|
| 34 |
+
engine: "5.2L V10",
|
| 35 |
+
horsepower: 630,
|
| 36 |
+
torque: "600 Nm",
|
| 37 |
+
topSpeed: "325 km/h"
|
| 38 |
+
}
|
| 39 |
+
}
|
| 40 |
+
];
|
| 41 |
+
|
| 42 |
+
// Sample monitored websites data
|
| 43 |
+
const monitoredWebsites = [
|
| 44 |
+
{ url: "https://tesla.com", status: "up", lastChecked: "2023-06-15T10:30:00Z" },
|
| 45 |
+
{ url: "https://porsche.com", status: "up", lastChecked: "2023-06-15T10:35:00Z" },
|
| 46 |
+
{ url: "https://ferrari.com", status: "down", lastChecked: "2023-06-15T10:40:00Z" }
|
| 47 |
+
];
|
| 48 |
+
|
| 49 |
+
// Populate car showcase
|
| 50 |
+
const carShowcase = document.querySelector('#showcase .grid');
|
| 51 |
+
cars.forEach(car => {
|
| 52 |
+
const carCard = document.createElement('div');
|
| 53 |
+
carCard.className = 'bg-white rounded-xl shadow-md overflow-hidden card-hover';
|
| 54 |
+
carCard.innerHTML = `
|
| 55 |
+
<img src="${car.image}" alt="${car.name}" class="w-full h-48 object-cover">
|
| 56 |
+
<div class="p-6">
|
| 57 |
+
<h3 class="font-bold text-xl mb-2">${car.name}</h3>
|
| 58 |
+
<p class="text-gray-600 mb-4">${car.description}</p>
|
| 59 |
+
<div class="flex justify-between items-center">
|
| 60 |
+
<span class="text-sm text-gray-500">${car.specs.horsepower} HP</span>
|
| 61 |
+
<a href="#" class="text-red-600 hover:text-red-700 font-semibold">Details →</a>
|
| 62 |
+
</div>
|
| 63 |
+
</div>
|
| 64 |
+
`;
|
| 65 |
+
carShowcase.appendChild(carCard);
|
| 66 |
+
});
|
| 67 |
+
|
| 68 |
+
// Populate monitored websites table
|
| 69 |
+
const monitorTable = document.getElementById('monitor-table');
|
| 70 |
+
monitoredWebsites.forEach(site => {
|
| 71 |
+
const row = document.createElement('tr');
|
| 72 |
+
row.className = 'border-t hover:bg-gray-50';
|
| 73 |
+
|
| 74 |
+
const statusClass = site.status === 'up' ? 'status-up' :
|
| 75 |
+
site.status === 'down' ? 'status-down' : 'status-pending';
|
| 76 |
+
|
| 77 |
+
row.innerHTML = `
|
| 78 |
+
<td class="px-4 py-3">${site.url}</td>
|
| 79 |
+
<td class="px-4 py-3"><span class="${statusClass}">${site.status}</span></td>
|
| 80 |
+
<td class="px-4 py-3">${new Date(site.lastChecked).toLocaleString()}</td>
|
| 81 |
+
`;
|
| 82 |
+
monitorTable.appendChild(row);
|
| 83 |
+
});
|
| 84 |
+
|
| 85 |
+
// Form submission for adding new website to monitor
|
| 86 |
+
const monitorForm = document.getElementById('monitor-form');
|
| 87 |
+
monitorForm.addEventListener('submit', function(e) {
|
| 88 |
+
e.preventDefault();
|
| 89 |
+
const urlInput = this.querySelector('input[type="url"]');
|
| 90 |
+
const url = urlInput.value.trim();
|
| 91 |
+
|
| 92 |
+
if (url) {
|
| 93 |
+
// In a real app, this would call your API
|
| 94 |
+
alert(`Starting to monitor: ${url}\n(Would call API in real implementation)`);
|
| 95 |
+
urlInput.value = '';
|
| 96 |
+
}
|
| 97 |
+
});
|
| 98 |
+
|
| 99 |
+
// Responsive adjustments
|
| 100 |
+
function handleResize() {
|
| 101 |
+
// Could add responsive behaviors here
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
+
window.addEventListener('resize', handleResize);
|
| 105 |
+
handleResize();
|
| 106 |
+
});
|
|
@@ -1,28 +1,65 @@
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
font-size: 15px;
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.card
|
| 27 |
-
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 2 |
+
|
| 3 |
body {
|
| 4 |
+
font-family: 'Inter', sans-serif;
|
| 5 |
+
}
|
| 6 |
+
|
| 7 |
+
.hero-section {
|
| 8 |
+
background-image: url('http://static.photos/automotive/1200x630/1');
|
| 9 |
+
background-size: cover;
|
| 10 |
+
background-position: center;
|
| 11 |
+
background-blend-mode: overlay;
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
/* Custom scrollbar */
|
| 15 |
+
::-webkit-scrollbar {
|
| 16 |
+
width: 8px;
|
| 17 |
+
height: 8px;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
::-webkit-scrollbar-track {
|
| 21 |
+
background: #f1f1f1;
|
| 22 |
}
|
| 23 |
|
| 24 |
+
::-webkit-scrollbar-thumb {
|
| 25 |
+
background: #dc2626;
|
| 26 |
+
border-radius: 4px;
|
| 27 |
}
|
| 28 |
|
| 29 |
+
::-webkit-scrollbar-thumb:hover {
|
| 30 |
+
background: #b91c1c;
|
|
|
|
|
|
|
|
|
|
| 31 |
}
|
| 32 |
|
| 33 |
+
/* Animation for cards */
|
| 34 |
+
.card-hover {
|
| 35 |
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
|
|
|
|
|
|
|
| 36 |
}
|
| 37 |
|
| 38 |
+
.card-hover:hover {
|
| 39 |
+
transform: translateY(-5px);
|
| 40 |
+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
| 41 |
}
|
| 42 |
+
|
| 43 |
+
/* Status badges */
|
| 44 |
+
.status-badge {
|
| 45 |
+
display: inline-block;
|
| 46 |
+
padding: 0.25rem 0.5rem;
|
| 47 |
+
border-radius: 0.25rem;
|
| 48 |
+
font-size: 0.75rem;
|
| 49 |
+
font-weight: 600;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
.status-up {
|
| 53 |
+
background-color: #d1fae5;
|
| 54 |
+
color: #065f46;
|
| 55 |
+
}
|
| 56 |
+
|
| 57 |
+
.status-down {
|
| 58 |
+
background-color: #fee2e2;
|
| 59 |
+
color: #b91c1c;
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
.status-pending {
|
| 63 |
+
background-color: #fef3c7;
|
| 64 |
+
color: #92400e;
|
| 65 |
+
}
|