Webleb - Extraits de Code

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Iconly Fleet | Logistics Dashboard</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

display: ['Outfit', 'sans-serif'],

colors: {

brand: {

50: '#f0fdfa',

100: '#ccfbf1',

500: '#14b8a6', // Teal

600: '#0d9488',

900: '#134e4a',

surface: '#f4f5f7',

glass: 'rgba(255, 255, 255, 0.65)',

}

</script>

<style>

/* Base & Resets */

body {

background-color: #e5e7eb;

background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);

background-attachment: fixed;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

margin: 0;

overflow-x: hidden;

font-family: 'Inter', sans-serif;

/* Light theme background override to match reference image closely */

background: #f0f2f5;

}

/* Hide Scrollbar */

::-webkit-scrollbar {

width: 0px;

background: transparent;

}

/* App Container */

#app-container {

width: 100%;

max-width: 414px; /* iPhone Max width approx */

height: 100vh;

max-height: 896px;

background: linear-gradient(145deg, #ffffff 0%, #f3f4f6 100%);

position: relative;

overflow: hidden;

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 8px rgba(255,255,255,0.5);

}

@media (min-width: 480px) {

#app-container {

height: 90vh;

border-radius: 2.5rem;

margin: 2rem 0;

}

/* Glassmorphism Utilities */

.glass-panel {

background: rgba(255, 255, 255, 0.7);

backdrop-filter: blur(20px);

-webkit-backdrop-filter: blur(20px);

border: 1px solid rgba(255, 255, 255, 0.8);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}

.glass-button {

background: rgba(255, 255, 255, 0.8);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.9);

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

transition: all 0.3s ease;

}

.glass-button:hover, .glass-button:active {

background: rgba(255, 255, 255, 1);

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

}

/* Floating Badges */

.floating-badge {

animation: float 4s ease-in-out infinite;

}

.floating-badge.delayed {

animation-delay: 2s;

}

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-8px); }

100% { transform: translateY(0px); }

}

/* 3D Carousel Setup */

.carousel-container {

position: relative;

width: 100%;

height: 220px;

perspective: 1000px;

transform-style: preserve-3d;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

margin-top: 1rem;

cursor: grab;

}

.carousel-container:active {

cursor: grabbing;

}

.carousel-item {

position: absolute;

width: 280px;

height: 160px;

border-radius: 1.5rem;

transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;

will-change: transform, opacity;

background: transparent;

display: flex;

align-items: center;

justify-content: center;

}

.carousel-item img {

width: 100%;

height: 100%;

object-fit: contain;

filter: drop-shadow(0 20px 20px rgba(0,0,0,0.15));

pointer-events: none; /* Prevent drag issues */

transition: transform 0.3s ease;

}

.carousel-item.active img {

transform: scale(1.1);

}

/* Carousel States */

.carousel-item.prev {

transform: translateX(-65%) scale(0.75) rotateY(15deg) translateZ(-100px);

opacity: 0.4;

z-index: 1;

}

.carousel-item.active {

transform: translateX(0) scale(1) rotateY(0deg) translateZ(0);

opacity: 1;

z-index: 10;

}

.carousel-item.next {

transform: translateX(65%) scale(0.75) rotateY(-15deg) translateZ(-100px);

opacity: 0.4;

z-index: 1;

}

.carousel-item.hidden {

transform: translateX(0) scale(0.5) translateZ(-200px);

opacity: 0;

z-index: 0;

pointer-events: none;

}

/* Progress Bar Animation */

.progress-track {

background: #e2e8f0;

border-radius: 999px;

height: 6px;

overflow: hidden;

width: 100%;

}

.progress-fill {

background: #111827; /* Dark almost black like image */

height: 100%;

border-radius: 999px;

width: 0%;

transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);

}

/* Map Tweaks */

.leaflet-control-zoom { display: none !important; }

.leaflet-control-attribution { display: none !important; }

#map {

border-radius: 1rem;

z-index: 1;

}

.custom-map-marker {

background-color: #14b8a6;

border: 2px solid white;

border-radius: 50%;

box-shadow: 0 0 10px rgba(20, 184, 166, 0.5);

animation: pulse 2s infinite;

}

@keyframes pulse {

0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.7); }

70% { box-shadow: 0 0 0 10px rgba(20, 184, 166, 0); }

100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }

}

/* Bottom Nav Styling */

.nav-item {

transition: all 0.2s ease;

}

.nav-item.active {

color: #111827;

font-weight: 600;

}

.nav-item.active i {

color: #111827;

/* If using phosphor, need to adjust weight via classes in JS, but color is enough here */

}

.add-btn-wrapper {

position: relative;

top: -15px;

}

.add-btn {

background: white;

color: #111827;

border-radius: 50%;

width: 56px;

height: 56px;

display: flex;

align-items: center;

justify-content: center;

box-shadow: 0 10px 25px rgba(0,0,0,0.1);

transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

border: 1px solid #f3f4f6;

}

.add-btn:hover {

transform: scale(1.05);

}

/* Social Panel (Desktop specific) */

.social-panel {

position: fixed;

left: 2rem;

bottom: 2rem;

display: flex;

flex-direction: column;

gap: 1rem;

}

@media (max-width: 1024px) {

.social-panel { display: none; }

}

.social-icon {

width: 44px;

height: 44px;

border-radius: 50%;

background: white;

display: flex;

align-items: center;

justify-content: center;

color: #4b5563;

box-shadow: 0 4px 15px rgba(0,0,0,0.05);

transition: all 0.3s ease;

text-decoration: none;

}

.social-icon:hover {

transform: translateY(-3px) scale(1.1);

color: #111827;

box-shadow: 0 8px 25px rgba(0,0,0,0.1);

}

/* Shimmer loading effect */

.skeleton {

background: #eee;

background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);

border-radius: 5px;

background-size: 200% 100%;

animation: 1.5s shine linear infinite;

}

@keyframes shine {

to { background-position-x: -200%; }

}

/* Background decorative elements */

.bg-blob {

position: absolute;

filter: blur(80px);

z-index: 0;

opacity: 0.6;

border-radius: 50%;

}

</style>

</head>

</div>

</div>

<div>

<p class="text-xs text-gray-500 font-medium">Good Morning, Jennifer</p>

<h1 class="text-lg font-display font-semibold text-gray-900 leading-tight">Today Activity</h1>

</div>

</button>

</header>

<span id="driver-name" class="text-[10px] font-semibold text-gray-800 leading-none">Alex Joshan</span>

<span class="text-[9px] text-teal-500 font-medium mt-0.5">Active</span>

</div>

</svg>

</div>

</div>

<div>

</div>

<p class="text-xs text-gray-500 mt-1">Fuel/ Energy</p>

</div>

<div>

<p class="text-[11px] text-gray-500 mb-1" id="start-time">Started Feb 16, 2:34 PM</p>

</div>

<p class="text-[11px] font-medium text-gray-600 pb-1">In Progress</p>

</div>

</div>

<i class="ph ph-cube text-lg"></i> Inventory

</button>

<i class="ph ph-map-trifold text-lg"></i> Map

</button>

</div>

</div>

</button>

<span class="text-[10px]">Inbox</span>

</button>

</button>

</div>

<span class="text-[10px]">Bookmark</span>

</button>

<span class="text-[10px]">Dashboard</span>

</button>

</nav>

Swipe for More <i class="ph ph-arrow-right"></i>

</div>

// --- 1. MOCK API DATA ---

// Simulating data fetched from a fleet management backend

const fleetData = [

{

id: 'TRK-001',

type: 'Electric Semi',

image: 'https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?q=80&w=800&auto=format&fit=crop', // White semi truck

energy: 2.44,

batteryPct: 40,

progress: 70,

startTime: 'Started Feb 16, 2:34 PM',

driver: {

avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',

status: 'Active'

location: { lat: 40.7128, lng: -74.0060 } // NY

{

id: 'VAN-042',

type: 'Delivery Van',

image: 'https://images.unsplash.com/photo-1552554743-ce05b8bc07be?q=80&w=800&auto=format&fit=crop', // Van

energy: 1.85,

batteryPct: 82,

progress: 45,

startTime: 'Started Feb 16, 9:15 AM',

driver: {

avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',

status: 'Active'

location: { lat: 34.0522, lng: -118.2437 } // LA

{

id: 'TRK-008',

type: 'Heavy Cargo',

image: 'https://images.unsplash.com/photo-1616423640778-28d1b53229bd?q=80&w=800&auto=format&fit=crop', // Blue truck

energy: 5.12,

batteryPct: 25,

progress: 92,

startTime: 'Started Feb 15, 6:00 AM',

driver: {

avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',

status: 'Resting'

location: { lat: 41.8781, lng: -87.6298 } // Chicago

{

id: 'TRK-015',

type: 'Electric Fleet',

image: 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=800&auto=format&fit=crop', // Fleet

energy: 3.05,

batteryPct: 60,

progress: 10,

startTime: 'Started Feb 16, 4:00 PM',

driver: {

avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',

status: 'Active'

location: { lat: 29.7604, lng: -95.3698 } // Houston

}

];

// --- 2. STATE & DOM ELEMENTS ---

let currentIndex = 0;

let map = null;

let mapMarker = null;

const DOM = {

carousel: document.getElementById('carousel'),

driverName: document.getElementById('driver-name'),

driverAvatar: document.getElementById('driver-avatar'),

batteryText: document.getElementById('battery-text'),

batteryRing: document.getElementById('battery-ring'),

energyCounter: document.getElementById('energy-counter'),

progressText: document.getElementById('progress-text'),

progressBar: document.getElementById('progress-bar'),

startTime: document.getElementById('start-time'),

mapContainer: document.getElementById('map'),

mapSkeleton: document.getElementById('map-skeleton'),

badges: document.querySelectorAll('.floating-badge')

};

// --- 3. INITIALIZATION ---

async function initApp() {

// Simulate API loading delay for realism

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

buildCarousel();

initMap();

updateUI(0, true);

}

// --- 4. CAROUSEL LOGIC (3D & Touch) ---

function buildCarousel() {

fleetData.forEach((vehicle, index) => {

const item = document.createElement('div');

item.className = 'carousel-item';

// Using images formatted cleanly as placeholders for actual 3D renders

const img = document.createElement('img');

img.src = vehicle.image;

// Add a subtle mask/fade to edges to make rectangular images look more like integrated assets

img.style.WebkitMaskImage = 'linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)';

img.style.maskImage = 'linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)';

item.appendChild(img);

DOM.carousel.appendChild(item);

});

updateCarouselClasses();

setupCarouselGestures();

}

function updateCarouselClasses() {

const items = document.querySelectorAll('.carousel-item');

items.forEach((item, index) => {

item.className = 'carousel-item hidden'; // Reset

if (index === currentIndex) {

item.className = 'carousel-item active';

} else if (index === getPrevIndex()) {

item.className = 'carousel-item prev';

} else if (index === getNextIndex()) {

item.className = 'carousel-item next';

}

});

}

function getPrevIndex() {

return (currentIndex - 1 + fleetData.length) % fleetData.length;

}

function getNextIndex() {

return (currentIndex + 1) % fleetData.length;

}

function goToNext() {

currentIndex = getNextIndex();

updateUI(currentIndex);

}

function goToPrev() {

currentIndex = getPrevIndex();

updateUI(currentIndex);

}

// Touch/Drag Gestures

function setupCarouselGestures() {

let startX = 0;

let currentX = 0;

let isDragging = false;

const handleStart = (e) => {

isDragging = true;

startX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;

};

const handleMove = (e) => {

if (!isDragging) return;

currentX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;

};

const handleEnd = () => {

if (!isDragging) return;

isDragging = false;

const diff = startX - currentX;

// Threshold for swipe

if (Math.abs(diff) > 50) {

if (diff > 0) goToNext();

else goToPrev();

}

};

DOM.carousel.addEventListener('touchstart', handleStart, {passive: true});

DOM.carousel.addEventListener('touchmove', handleMove, {passive: true});

DOM.carousel.addEventListener('touchend', handleEnd);

DOM.carousel.addEventListener('mousedown', handleStart);

window.addEventListener('mousemove', handleMove); // Window to catch fast drags

window.addEventListener('mouseup', handleEnd);

}

// --- 5. UI UPDATES & ANIMATIONS ---

function updateUI(index, isInit = false) {

const data = fleetData[index];

updateCarouselClasses();

// Fade out badges briefly during transition

if (!isInit) {

DOM.badges.forEach(b => b.style.opacity = '0');

}

setTimeout(() => {

// Update Text Data

DOM.driverName.textContent = data.driver.name;

DOM.driverAvatar.src = data.driver.avatar;

DOM.batteryText.textContent = `${data.batteryPct}%`;

DOM.startTime.textContent = data.startTime;

// SVG Ring animation

const circumference = 100; // approximation based on dasharray

const offset = circumference - (data.batteryPct / 100) * circumference;

DOM.batteryRing.style.strokeDasharray = `${data.batteryPct}, 100`;

// Animate Counters & Bars

animateValue(DOM.energyCounter, parseFloat(DOM.energyCounter.textContent), data.energy, 1000);

animateValue(DOM.progressText, parseInt(DOM.progressText.textContent), data.progress, 1000, true);

DOM.progressBar.style.width = `${data.progress}%`;

// Update Map

updateMapLocation(data.location.lat, data.location.lng);

// Fade badges back in

DOM.badges.forEach(b => b.style.opacity = '1');

}, isInit ? 0 : 300); // Delay matches CSS transition of carousel roughly

}

// Number counter animation utility

function animateValue(obj, start, end, duration, isPercent = false) {

let startTimestamp = null;

const step = (timestamp) => {

if (!startTimestamp) startTimestamp = timestamp;

const progress = Math.min((timestamp - startTimestamp) / duration, 1);

// Ease out cubic

const easeOut = 1 - Math.pow(1 - progress, 3);

const currentVal = start + (end - start) * easeOut;

obj.innerHTML = isPercent ? Math.floor(currentVal) + '%' : currentVal.toFixed(2);

if (progress < 1) {

window.requestAnimationFrame(step);

}

};

window.requestAnimationFrame(step);

}

// --- 6. MAPBOX/LEAFLET INTEGRATION ---

// Using Leaflet with standard tiles to simulate the map functionality seamlessly without API key hurdles

function initMap() {

// Default center

map = L.map('map', {

zoomControl: false,

attributionControl: false,

dragging: false, // Static preview feel

scrollWheelZoom: false,

doubleClickZoom: false

}).setView([fleetData[0].location.lat, fleetData[0].location.lng], 12);

// Use a light, clean tile layer to match UI

L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {

maxZoom: 19

}).addTo(map);

// Custom HTML Marker using Tailwind classes defined in CSS

const customIcon = L.divIcon({

className: '',

html: '<div class="custom-map-marker w-4 h-4"></div>',

iconSize: [16, 16],

iconAnchor: [8, 8]

});

mapMarker = L.marker([fleetData[0].location.lat, fleetData[0].location.lng], {icon: customIcon}).addTo(map);

// Reveal map after load

setTimeout(() => {

DOM.mapSkeleton.classList.remove('skeleton');

DOM.mapContainer.style.opacity = '1';

// Trigger resize to fix leaflet rendering inside dynamic container

map.invalidateSize();

}, 500);

}

function updateMapLocation(lat, lng) {

if (map && mapMarker) {

map.flyTo([lat, lng], 13, {

animate: true,

duration: 1.5

});

mapMarker.setLatLng([lat, lng]);

}

// --- 7. BOTTOM NAV LOGIC ---

const navItems = document.querySelectorAll('.nav-item');

navItems.forEach(item => {

item.addEventListener('click', function() {

// Remove active from all

navItems.forEach(nav => {

nav.classList.remove('active', 'text-gray-900');

nav.classList.add('text-gray-400');

// Change filled icon to outline

const icon = nav.querySelector('i');

if(icon.classList.contains('ph-fill')) {

icon.className = icon.className.replace('ph-fill', 'ph');

}

});

// Add active to clicked

this.classList.remove('text-gray-400');

this.classList.add('active', 'text-gray-900');

// Change outline to filled

const icon = this.querySelector('i');

if(icon.classList.contains('ph')) {

icon.className = icon.className.replace('ph ', 'ph-fill ');

}

});

// Run

window.addEventListener('DOMContentLoaded', initApp);

</script>

</body>

</html>

Preview

Open Advanced Editor Full Screen

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Iconly Fleet | Logistics Dashboard</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

display: ['Outfit', 'sans-serif'],

colors: {

brand: {

50: '#f0fdfa',

100: '#ccfbf1',

500: '#14b8a6', // Teal

600: '#0d9488',

900: '#134e4a',

surface: '#f4f5f7',

glass: 'rgba(255, 255, 255, 0.65)',

}

</script>

<style>

/* Base & Resets */

body {

background-color: #e5e7eb;

background-attachment: fixed;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

margin: 0;

overflow-x: hidden;

font-family: 'Inter', sans-serif;

/* Light theme background override to match reference image closely */

background: #f0f2f5;

}

/* Hide Scrollbar */

::-webkit-scrollbar {

width: 0px;

background: transparent;

}

/* App Container */

#app-container {

width: 100%;

max-width: 414px; /* iPhone Max width approx */

height: 100vh;

max-height: 896px;

background: linear-gradient(145deg, #ffffff 0%, #f3f4f6 100%);

position: relative;

overflow: hidden;

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 8px rgba(255,255,255,0.5);

}

@media (min-width: 480px) {

#app-container {

height: 90vh;

border-radius: 2.5rem;

margin: 2rem 0;

}

/* Glassmorphism Utilities */

.glass-panel {

background: rgba(255, 255, 255, 0.7);

backdrop-filter: blur(20px);

-webkit-backdrop-filter: blur(20px);

border: 1px solid rgba(255, 255, 255, 0.8);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}

.glass-button {

background: rgba(255, 255, 255, 0.8);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.9);

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

transition: all 0.3s ease;

}

.glass-button:hover, .glass-button:active {

background: rgba(255, 255, 255, 1);

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

}

/* Floating Badges */

.floating-badge {

animation: float 4s ease-in-out infinite;

}

.floating-badge.delayed {

animation-delay: 2s;

}

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-8px); }

100% { transform: translateY(0px); }

}

/* 3D Carousel Setup */

.carousel-container {

position: relative;

width: 100%;

height: 220px;

perspective: 1000px;

transform-style: preserve-3d;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

margin-top: 1rem;

cursor: grab;

}

.carousel-container:active {

cursor: grabbing;

}

.carousel-item {

position: absolute;

width: 280px;

height: 160px;

border-radius: 1.5rem;

transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;

will-change: transform, opacity;

background: transparent;

display: flex;

align-items: center;

justify-content: center;

}

.carousel-item img {

width: 100%;

height: 100%;

object-fit: contain;

filter: drop-shadow(0 20px 20px rgba(0,0,0,0.15));

pointer-events: none; /* Prevent drag issues */

transition: transform 0.3s ease;

}

.carousel-item.active img {

transform: scale(1.1);

}

/* Carousel States */

.carousel-item.prev {

transform: translateX(-65%) scale(0.75) rotateY(15deg) translateZ(-100px);

opacity: 0.4;

z-index: 1;

}

.carousel-item.active {

transform: translateX(0) scale(1) rotateY(0deg) translateZ(0);

opacity: 1;

z-index: 10;

}

.carousel-item.next {

transform: translateX(65%) scale(0.75) rotateY(-15deg) translateZ(-100px);

opacity: 0.4;

z-index: 1;

}

.carousel-item.hidden {

transform: translateX(0) scale(0.5) translateZ(-200px);

opacity: 0;

z-index: 0;

pointer-events: none;

}

/* Progress Bar Animation */

.progress-track {

background: #e2e8f0;

border-radius: 999px;

height: 6px;

overflow: hidden;

width: 100%;

}

.progress-fill {

background: #111827; /* Dark almost black like image */

height: 100%;

border-radius: 999px;

width: 0%;

transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);

}

/* Map Tweaks */

.leaflet-control-zoom { display: none !important; }

.leaflet-control-attribution { display: none !important; }

#map {

border-radius: 1rem;

z-index: 1;

}

.custom-map-marker {

background-color: #14b8a6;

border: 2px solid white;

border-radius: 50%;

box-shadow: 0 0 10px rgba(20, 184, 166, 0.5);

animation: pulse 2s infinite;

}

@keyframes pulse {

0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.7); }

70% { box-shadow: 0 0 0 10px rgba(20, 184, 166, 0); }

100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }

}

/* Bottom Nav Styling */

.nav-item {

transition: all 0.2s ease;

}

.nav-item.active {

color: #111827;

font-weight: 600;

}

.nav-item.active i {

color: #111827;

/* If using phosphor, need to adjust weight via classes in JS, but color is enough here */

}

.add-btn-wrapper {

position: relative;

top: -15px;

}

.add-btn {

background: white;

color: #111827;

border-radius: 50%;

width: 56px;

height: 56px;

display: flex;

align-items: center;

justify-content: center;

box-shadow: 0 10px 25px rgba(0,0,0,0.1);

transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

border: 1px solid #f3f4f6;

}

.add-btn:hover {

transform: scale(1.05);

}

/* Social Panel (Desktop specific) */

.social-panel {

position: fixed;

left: 2rem;

bottom: 2rem;

display: flex;

flex-direction: column;

gap: 1rem;

}

@media (max-width: 1024px) {

.social-panel { display: none; }

}

.social-icon {

width: 44px;

height: 44px;

border-radius: 50%;

background: white;

display: flex;

align-items: center;

justify-content: center;

color: #4b5563;

box-shadow: 0 4px 15px rgba(0,0,0,0.05);

transition: all 0.3s ease;

text-decoration: none;

}

.social-icon:hover {

transform: translateY(-3px) scale(1.1);

color: #111827;

box-shadow: 0 8px 25px rgba(0,0,0,0.1);

}

/* Shimmer loading effect */

.skeleton {

background: #eee;

background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);

border-radius: 5px;

background-size: 200% 100%;

animation: 1.5s shine linear infinite;

}

@keyframes shine {

to { background-position-x: -200%; }

}

/* Background decorative elements */

.bg-blob {

position: absolute;

filter: blur(80px);

z-index: 0;

opacity: 0.6;

border-radius: 50%;

}

</style>

</head>

</div>

</div>

<div>

<p class="text-xs text-gray-500 font-medium">Good Morning, Jennifer</p>

<h1 class="text-lg font-display font-semibold text-gray-900 leading-tight">Today Activity</h1>

</div>

</button>

</header>

<span id="driver-name" class="text-[10px] font-semibold text-gray-800 leading-none">Alex Joshan</span>

<span class="text-[9px] text-teal-500 font-medium mt-0.5">Active</span>

</div>

</svg>

</div>

</div>

<div>

</div>

<p class="text-xs text-gray-500 mt-1">Fuel/ Energy</p>

</div>

<div>

<p class="text-[11px] text-gray-500 mb-1" id="start-time">Started Feb 16, 2:34 PM</p>

</div>

<p class="text-[11px] font-medium text-gray-600 pb-1">In Progress</p>

</div>

</div>

<i class="ph ph-cube text-lg"></i> Inventory

</button>

<i class="ph ph-map-trifold text-lg"></i> Map

</button>

</div>

</div>

</button>

<span class="text-[10px]">Inbox</span>

</button>

</button>

</div>

<span class="text-[10px]">Bookmark</span>

</button>

<span class="text-[10px]">Dashboard</span>

</button>

</nav>

Swipe for More <i class="ph ph-arrow-right"></i>

</div>

// --- 1. MOCK API DATA ---

// Simulating data fetched from a fleet management backend

const fleetData = [

{

id: 'TRK-001',

type: 'Electric Semi',

image: 'https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?q=80&w=800&auto=format&fit=crop', // White semi truck

energy: 2.44,

batteryPct: 40,

progress: 70,

startTime: 'Started Feb 16, 2:34 PM',

driver: {

avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',

status: 'Active'

location: { lat: 40.7128, lng: -74.0060 } // NY

{

id: 'VAN-042',

type: 'Delivery Van',

image: 'https://images.unsplash.com/photo-1552554743-ce05b8bc07be?q=80&w=800&auto=format&fit=crop', // Van

energy: 1.85,

batteryPct: 82,

progress: 45,

startTime: 'Started Feb 16, 9:15 AM',

driver: {

avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',

status: 'Active'

location: { lat: 34.0522, lng: -118.2437 } // LA

{

id: 'TRK-008',

type: 'Heavy Cargo',

image: 'https://images.unsplash.com/photo-1616423640778-28d1b53229bd?q=80&w=800&auto=format&fit=crop', // Blue truck

energy: 5.12,

batteryPct: 25,

progress: 92,

startTime: 'Started Feb 15, 6:00 AM',

driver: {

avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',

status: 'Resting'

location: { lat: 41.8781, lng: -87.6298 } // Chicago

{

id: 'TRK-015',

type: 'Electric Fleet',

image: 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=800&auto=format&fit=crop', // Fleet

energy: 3.05,

batteryPct: 60,

progress: 10,

startTime: 'Started Feb 16, 4:00 PM',

driver: {

avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',

status: 'Active'

location: { lat: 29.7604, lng: -95.3698 } // Houston

}

];

// --- 2. STATE & DOM ELEMENTS ---

let currentIndex = 0;

let map = null;

let mapMarker = null;

const DOM = {

carousel: document.getElementById('carousel'),

driverName: document.getElementById('driver-name'),

driverAvatar: document.getElementById('driver-avatar'),

batteryText: document.getElementById('battery-text'),

batteryRing: document.getElementById('battery-ring'),

energyCounter: document.getElementById('energy-counter'),

progressText: document.getElementById('progress-text'),

progressBar: document.getElementById('progress-bar'),

startTime: document.getElementById('start-time'),

mapContainer: document.getElementById('map'),

mapSkeleton: document.getElementById('map-skeleton'),

badges: document.querySelectorAll('.floating-badge')

};

// --- 3. INITIALIZATION ---

async function initApp() {

// Simulate API loading delay for realism

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

buildCarousel();

initMap();

updateUI(0, true);

}

// --- 4. CAROUSEL LOGIC (3D & Touch) ---

function buildCarousel() {

fleetData.forEach((vehicle, index) => {

const item = document.createElement('div');

item.className = 'carousel-item';

// Using images formatted cleanly as placeholders for actual 3D renders

const img = document.createElement('img');

img.src = vehicle.image;

// Add a subtle mask/fade to edges to make rectangular images look more like integrated assets

img.style.WebkitMaskImage = 'linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)';

img.style.maskImage = 'linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)';

item.appendChild(img);

DOM.carousel.appendChild(item);

});

updateCarouselClasses();

setupCarouselGestures();

}

function updateCarouselClasses() {

const items = document.querySelectorAll('.carousel-item');

items.forEach((item, index) => {

item.className = 'carousel-item hidden'; // Reset

if (index === currentIndex) {

item.className = 'carousel-item active';

} else if (index === getPrevIndex()) {

item.className = 'carousel-item prev';

} else if (index === getNextIndex()) {

item.className = 'carousel-item next';

}

});

}

function getPrevIndex() {

return (currentIndex - 1 + fleetData.length) % fleetData.length;

}

function getNextIndex() {

return (currentIndex + 1) % fleetData.length;

}

function goToNext() {

currentIndex = getNextIndex();

updateUI(currentIndex);

}

function goToPrev() {

currentIndex = getPrevIndex();

updateUI(currentIndex);

}

// Touch/Drag Gestures

function setupCarouselGestures() {

let startX = 0;

let currentX = 0;

let isDragging = false;

const handleStart = (e) => {

isDragging = true;

startX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;

};

const handleMove = (e) => {

if (!isDragging) return;

currentX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;

};

const handleEnd = () => {

if (!isDragging) return;

isDragging = false;

const diff = startX - currentX;

// Threshold for swipe

if (Math.abs(diff) > 50) {

if (diff > 0) goToNext();

else goToPrev();

}

};

DOM.carousel.addEventListener('touchstart', handleStart, {passive: true});

DOM.carousel.addEventListener('touchmove', handleMove, {passive: true});

DOM.carousel.addEventListener('touchend', handleEnd);

DOM.carousel.addEventListener('mousedown', handleStart);

window.addEventListener('mousemove', handleMove); // Window to catch fast drags

window.addEventListener('mouseup', handleEnd);

}

// --- 5. UI UPDATES & ANIMATIONS ---

function updateUI(index, isInit = false) {

const data = fleetData[index];

updateCarouselClasses();

// Fade out badges briefly during transition

if (!isInit) {

DOM.badges.forEach(b => b.style.opacity = '0');

}

setTimeout(() => {

// Update Text Data

DOM.driverName.textContent = data.driver.name;

DOM.driverAvatar.src = data.driver.avatar;

DOM.batteryText.textContent = `${data.batteryPct}%`;

DOM.startTime.textContent = data.startTime;

// SVG Ring animation

const circumference = 100; // approximation based on dasharray

const offset = circumference - (data.batteryPct / 100) * circumference;

DOM.batteryRing.style.strokeDasharray = `${data.batteryPct}, 100`;

// Animate Counters & Bars

animateValue(DOM.energyCounter, parseFloat(DOM.energyCounter.textContent), data.energy, 1000);

animateValue(DOM.progressText, parseInt(DOM.progressText.textContent), data.progress, 1000, true);

DOM.progressBar.style.width = `${data.progress}%`;

// Update Map

updateMapLocation(data.location.lat, data.location.lng);

// Fade badges back in

DOM.badges.forEach(b => b.style.opacity = '1');

}, isInit ? 0 : 300); // Delay matches CSS transition of carousel roughly

}

// Number counter animation utility

function animateValue(obj, start, end, duration, isPercent = false) {

let startTimestamp = null;

const step = (timestamp) => {

if (!startTimestamp) startTimestamp = timestamp;

const progress = Math.min((timestamp - startTimestamp) / duration, 1);

// Ease out cubic

const easeOut = 1 - Math.pow(1 - progress, 3);

const currentVal = start + (end - start) * easeOut;

obj.innerHTML = isPercent ? Math.floor(currentVal) + '%' : currentVal.toFixed(2);

if (progress < 1) {

window.requestAnimationFrame(step);

}

};

window.requestAnimationFrame(step);

}

// --- 6. MAPBOX/LEAFLET INTEGRATION ---

// Using Leaflet with standard tiles to simulate the map functionality seamlessly without API key hurdles

function initMap() {

// Default center

map = L.map('map', {

zoomControl: false,

attributionControl: false,

dragging: false, // Static preview feel

scrollWheelZoom: false,

doubleClickZoom: false

}).setView([fleetData[0].location.lat, fleetData[0].location.lng], 12);

// Use a light, clean tile layer to match UI

L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {

maxZoom: 19

}).addTo(map);

// Custom HTML Marker using Tailwind classes defined in CSS

const customIcon = L.divIcon({

className: '',

html: '<div class="custom-map-marker w-4 h-4"></div>',

iconSize: [16, 16],

iconAnchor: [8, 8]

});

mapMarker = L.marker([fleetData[0].location.lat, fleetData[0].location.lng], {icon: customIcon}).addTo(map);

// Reveal map after load

setTimeout(() => {

DOM.mapSkeleton.classList.remove('skeleton');

DOM.mapContainer.style.opacity = '1';

// Trigger resize to fix leaflet rendering inside dynamic container

map.invalidateSize();

}, 500);

}

function updateMapLocation(lat, lng) {

if (map && mapMarker) {

map.flyTo([lat, lng], 13, {

animate: true,

duration: 1.5

});

mapMarker.setLatLng([lat, lng]);

}

// --- 7. BOTTOM NAV LOGIC ---

const navItems = document.querySelectorAll('.nav-item');

navItems.forEach(item => {

item.addEventListener('click', function() {

// Remove active from all

navItems.forEach(nav => {

nav.classList.remove('active', 'text-gray-900');

nav.classList.add('text-gray-400');

// Change filled icon to outline

const icon = nav.querySelector('i');

if(icon.classList.contains('ph-fill')) {

icon.className = icon.className.replace('ph-fill', 'ph');

}

});

// Add active to clicked

this.classList.remove('text-gray-400');

this.classList.add('active', 'text-gray-900');

// Change outline to filled

const icon = this.querySelector('i');

if(icon.classList.contains('ph')) {

icon.className = icon.className.replace('ph ', 'ph-fill ');

}

});

// Run

window.addEventListener('DOMContentLoaded', initApp);

</script>

</body>

</html>

Preview

Validating your code, please wait...