* img {
border-radius:900px
}
/* Estilos base */
body {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
}
/* Animaciones y estados para botones */
.btn-primary {
transition: all 0.2s ease-in-out;
}
.btn-primary:hover {
background-color: rgb(126, 34, 206) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(126, 34, 206, 0.25);
}
.btn-primary:active {
background-color: rgb(107, 33, 168) !important;
transform: translateY(0);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-icon {
transition: all 0.2s ease-in-out;
width: 40px;
height: 40px;
}
.btn-icon:hover {
background-color: rgb(237, 233, 254);
color: rgb(126, 34, 206) !important;
}
.btn-icon:active {
transform: scale(0.95);
background-color: rgb(237, 233, 254);
}
.nav-item {
transition: all 0.2s ease-in-out;
}
.nav-item:hover {
transform: translateY(-2px);
color: rgb(126, 34, 206) !important;
}
.nav-item:active {
transform: translateY(0);
color: rgb(107, 33, 168) !important;
}
.material-icons {
font-size: 24px;
}
const { useState } = React;
function App() {
const [activeTab, setActiveTab] = useState('home');
const statsOverview = {
availability: { label: 'Disponibilidad', value: '05', subvalue: '8' },
performance: { label: 'Rendimiento', value: '148', icon: 'refresh' }
};
const vehicleList = [
{
name: 'Tesla Model 3',
time: '08:00 - 16:00',
value: '19,525',
img: 'https://i.ibb.co/ZGrVsBh/c0c86221-9eb6-4640-89db-ac9b02d2e756-2.png'
},
{
name: 'BMW i4',
time: '09:30 - 18:00',
value: '61,393',
img: 'https://i.ibb.co/FBTSC3s/c0c86221-9eb6-4640-89db-ac9b02d2e756-3.png'
},
{
name: 'Mercedes EQC',
time: '07:00 - 15:30',
value: '43,293',
img: 'https://i.ibb.co/tZ4pVR9/eb8c5851-80da-4130-bf91-6cefa340f857-1.png'
},
{
name: 'Audi e-tron',
time: '10:00 - 19:00',
value: '39,153',
img: 'https://i.ibb.co/9G0YnyG/eb8c5851-80da-4130-bf91-6cefa340f857-2.png'
}
];
return (
<div className="min-h-screen bg-gradient-to-br from-purple-600 to-purple-400 p-6">
<div className="max-w-md mx-auto space-y-6 flexme">
{/* Primera pantalla */}
<div className="bg-white rounded-3xl p-6 shadow-xl">
<div className="flex justify-between items-center px-1 h-11 bg-white rounded-t-3xl">
<span className="text-black text-sm font-medium">9:34</span>
<div className="flex items-center space-x-2">
<span className="material-icons text-black text-sm">signal_cellular_alt</span>
<span className="material-icons text-black text-sm">wifi</span>
<span className="material-icons text-black text-sm">battery_full</span>
</div>
</div>
<div className="flex justify-between items-center mb-6">
<div className="flex items-center gap-4">
<button className="btn-icon p-2 rounded-full">
<span className="material-icons text-gray-600">menu</span>
</button>
<h1 className="text-xl">Fleet Manager</h1>
</div>
<button className="btn-icon p-2 rounded-full">
<span className="material-icons text-gray-600">schedule</span>
</button>
</div>
<h2 className="text-2xl font-bold mb-2">Flota Eléctrica</h2>
<p className="text-gray-600 mb-6">Estado actual</p>
<div className="grid grid-cols-2 gap-4 mb-8">
<div className="bg-gray-50 rounded-xl p-4">
<p className="text-gray-500 text-sm">Vehículos Activos</p>
<div className="flex items-end justify-between">
<span className="text-3xl font-bold">{statsOverview.availability.value}</span>
<span className="text-xl text-gray-400">/{statsOverview.availability.subvalue}</span>
</div>
</div>
<div className="bg-gray-50 rounded-xl p-4">
<p className="text-gray-500 text-sm">Eficiencia</p>
<div className="flex items-center justify-between">
<span className="text-3xl font-bold">{statsOverview.performance.value}%</span>
<span className="material-icons text-purple-600">refresh</span>
</div>
</div>
</div>
<h3 className="text-xl font-semibold mb-4">Vehículos en Ruta</h3>
<div className="space-y-4 mb-6">
{vehicleList.map((vehicle, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex items-center gap-3">
<img src={vehicle.img} alt={vehicle.name} className="w-12 h-12 rounded-lg object-cover"/>
<div>
<p className="font-medium">{vehicle.name}</p>
<p className="text-sm text-gray-500">{vehicle.time}</p>
</div>
</div>
<p className="font-semibold">${vehicle.value}</p>
</div>
))}
</div>
<button className="btn-primary w-full bg-purple-600 text-white py-3 rounded-xl font-semibold">
Ver Detalles
</button>
</div>
{/* Segunda pantalla */}
<div className="bg-white rounded-3xl p-6 shadow-xl">
<div className="flex justify-between items-center px-1 h-11 bg-white rounded-t-3xl">
<span className="text-black text-sm font-medium">9:34</span>
<div className="flex items-center space-x-2">
<span className="material-icons text-black text-sm">signal_cellular_alt</span>
<span className="material-icons text-black text-sm">wifi</span>
<span className="material-icons text-black text-sm">battery_full</span>
</div>
</div>
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-4">
<button className="btn-icon p-2 rounded-full">
<span className="material-icons text-gray-600">arrow_back</span>
</button>
<h2 className="text-xl">Detalles del Vehículo</h2>
</div>
<button className="btn-icon p-2 rounded-full">
<span className="material-icons text-gray-600">more_vert</span>
</button>
</div>
<div className="bg-purple-50 rounded-3xl p-8 mb-6 flex items-center justify-center">
<img
src="https://i.ibb.co/9G0YnyG/eb8c5851-80da-4130-bf91-6cefa340f857-2.png"
alt="Vehículo seleccionado"
className="w-64 h-64 object-contain"
/>
</div>
<h3 className="text-2xl font-bold mb-6">Tesla Model 3 Performance</h3>
<div className="space-y-4 mb-6">
<div className="flex items-center gap-3">
<div className="bg-purple-600 p-2 rounded-lg">
<span className="material-icons text-white">electric_car</span>
</div>
<div>
<p className="text-sm text-gray-500">Autonomía</p>
<p className="font-medium">507 km</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className="bg-purple-600 p-2 rounded-lg">
<span className="material-icons text-white">location_on</span>
</div>
<div>
<p className="text-sm text-gray-500">Ubicación actual</p>
<p className="font-medium">Centro de la ciudad</p>
</div>
</div>
</div>
<button className="btn-primary w-full bg-purple-600 text-white py-3 rounded-xl font-semibold mb-6">
Reservar Vehículo
</button>
<div className="flex justify-between px-6">
{['home', 'favorite', 'dashboard', 'person', 'settings'].map((icon) => (
<button
key={icon}
className={`nav-item flex flex-col items-center ${
activeTab === icon ? 'text-purple-600' : 'text-gray-400'
}`}
onClick={() => setActiveTab(icon)}
>
<span className="material-icons">{icon}</span>
<span className="text-xs mt-1">
{icon.charAt(0).toUpperCase() + icon.slice(1)}
</span>
</button>
))}
</div>
</div>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
View Compiled