Spaces:

arkleinberg
/

tos

Running

App Files Files Community

arkleinberg commited on May 10

Commit

fc2fbc5

verified ·

1 Parent(s): 8377c1a

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +943 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tos
-emoji: 📊
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tos
+emoji: 🐳
+colorFrom: pink
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,943 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Santo Domingo Port Management System</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        #viewport-3d {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .overlay {
+            position: absolute;
+            background: rgba(15, 23, 42, 0.85);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+            color: white;
+            z-index: 100;
+            border: 1px solid rgba(56, 189, 248, 0.3);
+        }
+        .side-right {
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            padding: 15px 10px;
+        }
+        .top-right {
+            right: 20px;
+            top: 20px;
+            padding: 12px 20px;
+        }
+        .bottom {
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 40%;
+            min-width: 400px;
+        }
+        .avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+            object-fit: cover;
+            border: 2px solid #38bdf8;
+        }
+        #chat-messages {
+            height: 200px;
+            overflow-y: auto;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .chat-message {
+            margin-bottom: 10px;
+            padding: 8px 12px;
+            border-radius: 8px;
+            max-width: 80%;
+        }
+        .user-message {
+            background: rgba(56, 189, 248, 0.2);
+            margin-left: auto;
+            border-top-right-radius: 0;
+        }
+        .ai-message {
+            background: rgba(30, 41, 59, 0.8);
+            margin-right: auto;
+            border-top-left-radius: 0;
+        }
+        .menu-btn {
+            width: 50px;
+            height: 50px;
+            margin: 10px 0;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        .menu-btn:hover {
+            background: rgba(56, 189, 248, 0.3);
+            transform: translateY(-3px);
+        }
+        .menu-btn.active {
+            background: rgba(56, 189, 248, 0.5);
+        }
+        .menu-btn::after {
+            content: attr(title);
+            position: absolute;
+            left: -150px;
+            background: rgba(15, 23, 42, 0.9);
+            padding: 5px 10px;
+            border-radius: 5px;
+            opacity: 0;
+            transition: opacity 0.3s;
+            pointer-events: none;
+            width: 140px;
+            text-align: right;
+        }
+        .menu-btn:hover::after {
+            opacity: 1;
+        }
+        #minimap {
+            width: 220px;
+            height: 220px;
+            overflow: hidden;
+            border: 2px solid #38bdf8;
+        }
+        #minimap img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        #context-menu {
+            display: none;
+            width: 300px;
+            padding: 15px;
+        }
+        .context-item {
+            padding: 8px 12px;
+            border-radius: 6px;
+            margin-bottom: 5px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .context-item:hover {
+            background: rgba(56, 189, 248, 0.3);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(56, 189, 248, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
+            }
+        }
+        .status-indicator {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-right: 8px;
+        }
+        .status-open {
+            background-color: #10b981;
+        }
+        .status-closed {
+            background-color: #ef4444;
+        }
+        .status-warning {
+            background-color: #f59e0b;
+        }
+        .progress-bar {
+            height: 8px;
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            margin-top: 5px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background-color: #38bdf8;
+            border-radius: 4px;
+            transition: width 0.3s ease;
+        }
+        .vessel-marker {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background-color: #38bdf8;
+            border-radius: 50%;
+            border: 2px solid white;
+            transform: translate(-50%, -50%);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+        /* Minimap position indicators */
+        .minimap-indicator {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            background-color: #38bdf8;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .camera-indicator {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #ef4444;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .camera-direction {
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-top: 12px solid #ef4444;
+            transform: translate(-50%, -50%) rotate(var(--rotation));
+        }
+    </style>
+</head>
+<body class="bg-slate-900 text-white overflow-hidden">
+    <!-- 3D Viewport Container -->
+    <div id="viewport-3d"></div>
+    <!-- Minimap -->
+    <div id="minimap" class="overlay top-right">
+        <img src="https://maps.googleapis.com/maps/api/staticmap?center=18.4719,-69.8923&zoom=15&size=400x400&maptype=satellite&key=YOUR_API_KEY" alt="Santo Domingo Port Map">
+        <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 px-2 py-1 rounded text-xs">
+            <span class="text-blue-300">Live View</span>
+        </div>
+        <!-- Vessel markers will be added here by JS -->
+    </div>
+    <!-- Main Menu -->
+    <nav id="main-menu" class="overlay side-right">
+        <ul>
+            <li>
+                <button id="btn-berth" class="menu-btn pulse" title="Gestion des postes à quai">
+                    <i class="fas fa-anchor text-2xl text-blue-300"></i>
+                </button>
+            </li>
+            <li>
+                <button id="btn-yard" class="menu-btn" title="Gestion du yard">
+                    <i class="fas fa-boxes text-2xl text-blue-300"></i>
+                </button>
+            </li>
+            <li>
+                <button id="btn-gate" class="menu-btn" title="Gestion des accès">
+                    <i class="fas fa-truck-moving text-2xl text-blue-300"></i>
+                </button>
+            </li>
+            <li>
+                <button id="btn-schedule" class="menu-btn" title="Planification équipements/personnel">
+                    <i class="fas fa-calendar-alt text-2xl text-blue-300"></i>
+                </button>
+            </li>
+            <li>
+                <button id="btn-billing" class="menu-btn" title="Facturation & rapports">
+                    <i class="fas fa-file-invoice-dollar text-2xl text-blue-300"></i>
+                </button>
+            </li>
+        </ul>
+    </nav>
+    <!-- AI Chat Panel -->
+    <div id="chat-panel" class="overlay bottom">
+        <div id="chat-header" class="flex items-center justify-between px-4 py-2 border-b border-slate-700">
+            <h3 class="font-semibold text-blue-300 flex items-center">
+                <img src="https://via.placeholder.com/24/38bdf8/ffffff?text=M2H" alt="M2H Majestic" class="mr-2 rounded">
+                M2H Majestic Assistant
+            </h3>
+            <button id="minimize-chat" class="text-slate-400 hover:text-white">
+                <i class="fas fa-minus"></i>
+            </button>
+        </div>
+        <div id="chat-messages">
+            <div class="chat-message ai-message">
+                <p>Bonjour! Je suis votre assistant M2H Majestic pour la gestion du port de Santo Domingo. Comment puis-je vous aider aujourd'hui?</p>
+                <p class="text-xs text-slate-400 mt-1">Maintenant</p>
+            </div>
+            <div class="chat-message ai-message">
+                <p>Je peux vous fournir des informations sur les navires en approche, l'état des quais, la capacité du yard et plus encore.</p>
+                <p class="text-xs text-slate-400 mt-1">Maintenant</p>
+            </div>
+        </div>
+        <div id="chat-input" class="flex p-3">
+            <input type="text" placeholder="Demandez des informations sur les navires, les quais..."
+                   class="flex-1 bg-slate-800 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+            <button id="send-btn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition">
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
+    </div>
+    <!-- User Info -->
+    <div id="user-info" class="overlay top-right flex items-center">
+        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="avatar">
+        <div>
+            <p class="font-medium">Jean Dupont</p>
+            <p class="text-xs text-blue-300">Yield Manager</p>
+        </div>
+        <button class="ml-4 text-slate-400 hover:text-white">
+            <i class="fas fa-cog"></i>
+        </button>
+    </div>
+    <!-- Context Menu (hidden by default) -->
+    <div id="context-menu" class="overlay">
+        <h3 class="font-semibold mb-3 text-blue-300 border-b border-slate-700 pb-2 flex items-center">
+            <i class="fas fa-info-circle mr-2"></i>
+            <span id="context-title">Quai 1 - Terminal Santo Domingo</span>
+        </h3>
+        <div class="mb-3">
+            <div class="flex items-center">
+                <span class="status-indicator status-open"></span>
+                <span>Statut: <strong>Occupé</strong></span>
+            </div>
+            <div class="mt-1">
+                <span>Navire: <strong>MSC Caribe</strong> (Porte-conteneurs)</span>
+            </div>
+            <div class="mt-1">
+                <span>ETA: <strong>14:30</strong> (dans 2h15)</span>
+            </div>
+        </div>
+        <div class="mb-3">
+            <div class="flex justify-between text-sm">
+                <span>Progression déchargement:</span>
+                <span>65%</span>
+            </div>
+            <div class="progress-bar">
+                <div class="progress-fill" style="width: 65%"></div>
+            </div>
+        </div>
+        <div class="context-item flex items-center">
+            <i class="fas fa-info-circle mr-3 text-blue-300"></i>
+            <span>Voir les détails complets</span>
+        </div>
+        <div class="context-item flex items-center">
+            <i class="fas fa-calendar-check mr-3 text-blue-300"></i>
+            <span>Planifier l'accostage</span>
+        </div>
+        <div class="context-item flex items-center">
+            <i class="fas fa-truck-loading mr-3 text-blue-300"></i>
+            <span>Assigner des grues</span>
+        </div>
+        <div class="context-item flex items-center">
+            <i class="fas fa-file-invoice mr-3 text-blue-300"></i>
+            <span>Générer un rapport</span>
+        </div>
+    </div>
+    <!-- Notification Toast -->
+    <div id="notification" class="fixed top-5 left-1/2 transform -translate-x-1/2 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg hidden flex items-center">
+        <i class="fas fa-check-circle mr-2"></i>
+        <span>Berth allocation updated successfully!</span>
+    </div>
+    <script>
+        // Initialize Three.js scene
+        let scene, camera, renderer, controls;
+        let portObjects = {};
+        let selectedObject = null;
+        function initThreeJS() {
+            // Create scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x1e3c72);
+            scene.fog = new THREE.FogExp2(0x1e3c72, 0.001);
+            // Create camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 150, 300);
+            // Create renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            document.getElementById('viewport-3d').appendChild(renderer.domElement);
+            // Add controls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            controls.minDistance = 50;
+            controls.maxDistance = 500;
+            controls.maxPolarAngle = Math.PI * 0.9;
+            // Add lights
+            const ambientLight = new THREE.AmbientLight(0x404040);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(100, 300, 100);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 2048;
+            directionalLight.shadow.mapSize.height = 2048;
+            scene.add(directionalLight);
+            // Add water
+            const waterGeometry = new THREE.PlaneGeometry(1000, 1000);
+            const waterMaterial = new THREE.MeshStandardMaterial({
+                color: 0x1e88e5,
+                roughness: 0.1,
+                metalness: 0.5
+            });
+            const water = new THREE.Mesh(waterGeometry, waterMaterial);
+            water.rotation.x = -Math.PI / 2;
+            water.position.y = -5;
+            scene.add(water);
+            // Add ground
+            const groundGeometry = new THREE.PlaneGeometry(1000, 1000);
+            const groundMaterial = new THREE.MeshStandardMaterial({
+                color: 0x4b5563,
+                roughness: 0.8
+            });
+            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+            ground.rotation.x = -Math.PI / 2;
+            ground.position.y = -5;
+            ground.receiveShadow = true;
+            scene.add(ground);
+            // Create port infrastructure
+            createPortInfrastructure();
+            // Handle window resize
+            window.addEventListener('resize', onWindowResize);
+            // Start animation loop
+            animate();
+        }
+        function createPortInfrastructure() {
+            // Create terminals (Santo Domingo, Don Diego, Sans Souci)
+            createTerminal('Santo Domingo', -200, 0, 0, 300, 200, [
+                { id: 1, length: 150, width: 30, occupied: true },
+                { id: 2, length: 180, width: 30, occupied: false },
+                { id: 3, length: 160, width: 30, occupied: true },
+                { id: 4, length: 140, width: 30, occupied: false },
+                { id: 5, length: 170, width: 30, occupied: true }
+            ]);
+            createTerminal('Don Diego', 200, 0, 0, 250, 150, [
+                { id: 6, length: 120, width: 25, occupied: false },
+                { id: 7, length: 130, width: 25, occupied: true },
+                { id: 8, length: 140, width: 25, occupied: false }
+            ]);
+            createTerminal('Sans Souci', 0, 0, -200, 250, 250, [
+                { id: 9, length: 250, width: 35, occupied: true }
+            ]);
+            // Create storage areas
+            createStorageArea('Vehicle Storage', -100, 0, 150, 200, 150, 7000);
+            createStorageArea('Warehouse A', -300, 0, 50, 100, 80);
+            createStorageArea('Warehouse B', -350, 0, -50, 100, 80);
+            // Create gates
+            createGate('Main Gate', -400, 0, 0);
+            createGate('Truck Gate', -450, 0, 100);
+            createGate('Secondary Gate', -450, 0, -100);
+        }
+        function createTerminal(name, x, y, z, width, depth, berths) {
+            // Create terminal base
+            const terminalGeometry = new THREE.BoxGeometry(width, 5, depth);
+            const terminalMaterial = new THREE.MeshStandardMaterial({
+                color: 0x6b7280,
+                roughness: 0.7
+            });
+            const terminal = new THREE.Mesh(terminalGeometry, terminalMaterial);
+            terminal.position.set(x, y - 2.5, z);
+            terminal.receiveShadow = true;
+            terminal.userData = { type: 'terminal', name: name };
+            scene.add(terminal);
+            portObjects[`terminal_${name}`] = terminal;
+            // Create berths
+            berths.forEach((berth, index) => {
+                const berthX = x + (index - (berths.length - 1) / 2) * (width / berths.length);
+                const berthZ = z + depth / 2;
+                const berthGeometry = new THREE.BoxGeometry(berth.length, 10, berth.width);
+                const berthMaterial = new THREE.MeshStandardMaterial({
+                    color: berth.occupied ? 0xef4444 : 0x10b981,
+                    roughness: 0.6
+                });
+                const berthMesh = new THREE.Mesh(berthGeometry, berthMaterial);
+                berthMesh.position.set(berthX, y, berthZ);
+                berthMesh.userData = {
+                    type: 'berth',
+                    id: berth.id,
+                    terminal: name,
+                    occupied: berth.occupied,
+                    vessel: berth.occupied ? `Vessel ${Math.floor(Math.random() * 1000)}` : null
+                };
+                scene.add(berthMesh);
+                portObjects[`berth_${name}_${berth.id}`] = berthMesh;
+                // Add vessel if occupied
+                if (berth.occupied) {
+                    const vesselGeometry = new THREE.BoxGeometry(berth.length * 0.8, 20, berth.width * 2);
+                    const vesselMaterial = new THREE.MeshStandardMaterial({
+                        color: 0x3b82f6,
+                        roughness: 0.5
+                    });
+                    const vessel = new THREE.Mesh(vesselGeometry, vesselMaterial);
+                    vessel.position.set(berthX, y + 15, berthZ + berth.width);
+                    vessel.userData = { type: 'vessel', berth: berth.id };
+                    scene.add(vessel);
+                    portObjects[`vessel_${name}_${berth.id}`] = vessel;
+                }
+            });
+            // Add terminal building
+            const buildingGeometry = new THREE.BoxGeometry(width * 0.6, 30, depth * 0.3);
+            const buildingMaterial = new THREE.MeshStandardMaterial({
+                color: 0x9ca3af,
+                roughness: 0.8
+            });
+            const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
+            building.position.set(x, y + 15, z - depth * 0.35);
+            building.castShadow = true;
+            scene.add(building);
+        }
+        function createStorageArea(name, x, y, z, width, depth, capacity) {
+            const areaGeometry = new THREE.BoxGeometry(width, 5, depth);
+            const areaMaterial = new THREE.MeshStandardMaterial({
+                color: 0x4b5563,
+                roughness: 0.8
+            });
+            const area = new THREE.Mesh(areaGeometry, areaMaterial);
+            area.position.set(x, y - 2.5, z);
+            area.userData = { type: 'storage', name: name, capacity: capacity };
+            scene.add(area);
+            portObjects[`storage_${name}`] = area;
+            // Add containers if it's a container yard
+            if (name.includes('Vehicle')) {
+                for (let i = 0; i < 20; i++) {
+                    const containerX = x + (Math.random() - 0.5) * width * 0.8;
+                    const containerZ = z + (Math.random() - 0.5) * depth * 0.8;
+                    const containerGeometry = new THREE.BoxGeometry(5, 3, 2);
+                    const containerMaterial = new THREE.MeshStandardMaterial({
+                        color: 0x3b82f6,
+                        roughness: 0.7
+                    });
+                    const container = new THREE.Mesh(containerGeometry, containerMaterial);
+                    container.position.set(containerX, y + 1.5, containerZ);
+                    container.rotation.y = Math.random() * Math.PI;
+                    scene.add(container);
+                }
+            }
+        }
+        function createGate(name, x, y, z) {
+            const gateGeometry = new THREE.BoxGeometry(10, 20, 5);
+            const gateMaterial = new THREE.MeshStandardMaterial({
+                color: 0xf59e0b,
+                roughness: 0.6
+            });
+            const gate = new THREE.Mesh(gateGeometry, gateMaterial);
+            gate.position.set(x, y + 10, z);
+            gate.userData = { type: 'gate', name: name, status: Math.random() > 0.5 ? 'open' : 'closed' };
+            scene.add(gate);
+            portObjects[`gate_${name}`] = gate;
+            // Add road
+            const roadGeometry = new THREE.PlaneGeometry(30, 100);
+            const roadMaterial = new THREE.MeshStandardMaterial({
+                color: 0x6b7280,
+                roughness: 0.9
+            });
+            const road = new THREE.Mesh(roadGeometry, roadMaterial);
+            road.rotation.x = -Math.PI / 2;
+            road.position.set(x, y, z);
+            scene.add(road);
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            renderer.render(scene, camera);
+            // Update minimap indicators
+            updateMinimap();
+        }
+        function updateMinimap() {
+            // Clear existing indicators
+            document.querySelectorAll('.vessel-marker, .minimap-indicator, .camera-indicator, .camera-direction').forEach(el => el.remove());
+            // Add vessel markers
+            Object.keys(portObjects).forEach(key => {
+                const obj = portObjects[key];
+                if (obj.userData.type === 'vessel' || obj.userData.type === 'gate') {
+                    const position = obj.position.clone().project(camera);
+                    // Convert normalized device coordinates to minimap coordinates
+                    const x = ((position.x * 0.5 + 0.5) * 220) - 110;
+                    const y = ((-position.y * 0.5 + 0.5) * 220) - 110;
+                    if (x >= 0 && x <= 220 && y >= 0 && y <= 220) {
+                        const marker = document.createElement('div');
+                        marker.className = obj.userData.type === 'vessel' ? 'vessel-marker' : 'minimap-indicator';
+                        marker.style.left = `${x}px`;
+                        marker.style.top = `${y}px`;
+                        document.getElementById('minimap').appendChild(marker);
+                    }
+                }
+            });
+            // Add camera indicator
+            const cameraPosition = camera.position.clone().project(camera);
+            const camX = ((cameraPosition.x * 0.5 + 0.5) * 220) - 110;
+            const camY = ((-cameraPosition.y * 0.5 + 0.5) * 220) - 110;
+            if (camX >= 0 && camX <= 220 && camY >= 0 && camY <= 220) {
+                const camMarker = document.createElement('div');
+                camMarker.className = 'camera-indicator';
+                camMarker.style.left = `${camX}px`;
+                camMarker.style.top = `${camY}px`;
+                document.getElementById('minimap').appendChild(camMarker);
+                // Add camera direction indicator
+                const direction = document.createElement('div');
+                direction.className = 'camera-direction';
+                direction.style.left = `${camX}px`;
+                direction.style.top = `${camY}px`;
+                // Calculate rotation based on camera direction
+                const target = new THREE.Vector3(0, 0, -1);
+                target.applyQuaternion(camera.quaternion);
+                const angle = Math.atan2(target.x, target.z);
+                direction.style.setProperty('--rotation', `${angle}rad`);
+                document.getElementById('minimap').appendChild(direction);
+            }
+        }
+        // Initialize Three.js when DOM is loaded
+        document.addEventListener('DOMContentLoaded', () => {
+            initThreeJS();
+            // Set up raycasting for object selection
+            const raycaster = new THREE.Raycaster();
+            const mouse = new THREE.Vector2();
+            function onMouseClick(event) {
+                // Calculate mouse position in normalized device coordinates
+                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+                // Update the raycaster
+                raycaster.setFromCamera(mouse, camera);
+                // Calculate objects intersecting the ray
+                const intersects = raycaster.intersectObjects(scene.children);
+                if (intersects.length > 0) {
+                    const object = intersects[0].object;
+                    // Check if it's a port object we care about
+                    if (object.userData && (object.userData.type === 'berth' || object.userData.type === 'gate')) {
+                        selectedObject = object;
+                        showContextMenu(object, event.clientX, event.clientY);
+                        // Move camera to focus on the object
+                        moveCameraToObject(object);
+                    }
+                } else {
+                    // Clicked on empty space, hide context menu
+                    document.getElementById('context-menu').style.display = 'none';
+                }
+            }
+            function moveCameraToObject(object) {
+                // Calculate target position for camera
+                const targetPosition = object.position.clone();
+                targetPosition.y += 50; // Elevate camera
+                targetPosition.z -= 100; // Move camera back
+                // Animate camera movement
+                const duration = 1000; // ms
+                const startPosition = camera.position.clone();
+                const startTime = Date.now();
+                function animateCamera() {
+                    const elapsed = Date.now() - startTime;
+                    const progress = Math.min(elapsed / duration, 1);
+                    camera.position.lerpVectors(startPosition, targetPosition, progress);
+                    if (progress < 1) {
+                        requestAnimationFrame(animateCamera);
+                    } else {
+                        // Camera arrived, update controls target
+                        controls.target.copy(object.position);
+                    }
+                }
+                animateCamera();
+            }
+            function showContextMenu(object, x, y) {
+                const contextMenu = document.getElementById('context-menu');
+                const title = document.getElementById('context-title');
+                if (object.userData.type === 'berth') {
+                    title.innerHTML = `<i class="fas fa-anchor mr-2"></i>Quai ${object.userData.id} - Terminal ${object.userData.terminal}`;
+                    // Update status indicator
+                    const statusIndicator = contextMenu.querySelector('.status-indicator');
+                    statusIndicator.className = 'status-indicator ' +
+                        (object.userData.occupied ? 'status-open' : 'status-closed');
+                    // Update status text
+                    contextMenu.querySelector('.status-indicator').nextElementSibling.innerHTML =
+                        `Statut: <strong>${object.userData.occupied ? 'Occupé' : 'Libre'}</strong>`;
+                    // Update vessel info if occupied
+                    if (object.userData.occupied) {
+                        contextMenu.querySelector('.mt-1 > span').innerHTML =
+                            `Navire: <strong>${object.userData.vessel}</strong> (Porte-conteneurs)`;
+                    } else {
+                        contextMenu.querySelector('.mt-1 > span').innerHTML =
+                            `Navire: <strong>Aucun</strong>`;
+                    }
+                    // Random ETA for demo
+                    const hours = Math.floor(Math.random() * 24);
+                    const minutes = Math.floor(Math.random() * 60);
+                    const etaTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+                    contextMenu.querySelectorAll('.mt-1')[1].innerHTML =
+                        `ETA: <strong>${etaTime}</strong> (dans ${Math.floor(Math.random() * 6) + 1}h${Math.floor(Math.random() * 60)})`;
+                    // Random progress for demo
+                    const progress = object.userData.occupied ? Math.floor(Math.random() * 100) : 0;
+                    contextMenu.querySelector('.progress-fill').style.width = `${progress}%`;
+                    contextMenu.querySelectorAll('.text-sm span')[1].textContent = `${progress}%`;
+                } else if (object.userData.type === 'gate') {
+                    title.innerHTML = `<i class="fas fa-truck-moving mr-2"></i>${object.userData.name}`;
+                    // Update status indicator
+                    const statusIndicator = contextMenu.querySelector('.status-indicator');
+                    statusIndicator.className = 'status-indicator ' +
+                        (object.userData.status === 'open' ? 'status-open' : 'status-closed');
+                    // Update status text
+                    contextMenu.querySelector('.status-indicator').nextElementSibling.innerHTML =
+                        `Statut: <strong>${object.userData.status === 'open' ? 'Ouvert' : 'Fermé'}</strong>`;
+                    // Update other info
+                    contextMenu.querySelector('.mt-1 > span').innerHTML =
+                        `Trafic: <strong>${Math.floor(Math.random() * 100)} camions/h</strong>`;
+                    contextMenu.querySelectorAll('.mt-1')[1].innerHTML =
+                        `Prochain: <strong>Camion ${Math.floor(Math.random() * 1000)}</strong>`;
+                    // For gates, we'll show queue progress instead of loading
+                    const queue = Math.floor(Math.random() * 100);
+                    contextMenu.querySelector('.progress-fill').style.width = `${queue}%`;
+                    contextMenu.querySelectorAll('.text-sm span')[1].textContent = `${queue}%`;
+                    contextMenu.querySelectorAll('.text-sm span')[0].textContent = 'File d\'attente:';
+                }
+                // Position and show the context menu
+                contextMenu.style.left = `${x}px`;
+                contextMenu.style.top = `${y}px`;
+                contextMenu.style.display = 'block';
+            }
+            // Add click event listener
+            window.addEventListener('click', onMouseClick);
+            // Menu button interactions
+            const menuButtons = document.querySelectorAll('#main-menu .menu-btn');
+            menuButtons.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    menuButtons.forEach(b => b.classList.remove('active'));
+                    this.classList.add('active');
+                    // Show notification
+                    const notification = document.getElementById('notification');
+                    notification.textContent = `${this.getAttribute('title')} panel opened`;
+                    notification.classList.remove('hidden');
+                    notification.classList.remove('bg-green-600', 'bg-red-600', 'bg-blue-600');
+                    // Change color based on which button was clicked
+                    if (this.id === 'btn-billing' || this.id === 'btn-schedule') {
+                        notification.classList.add('bg-blue-600');
+                    } else if (this.id === 'btn-gate') {
+                        notification.classList.add('bg-yellow-600');
+                    } else {
+                        notification.classList.add('bg-green-600');
+                    }
+                    setTimeout(() => {
+                        notification.classList.add('hidden');
+                    }, 3000);
+                });
+            });
+            // Simulate chat interaction
+            document.getElementById('send-btn').addEventListener('click', sendMessage);
+            document.querySelector('#chat-input input').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') sendMessage();
+            });
+            function sendMessage() {
+                const input = document.querySelector('#chat-input input');
+                const message = input.value.trim();
+                if (message) {
+                    // Add user message
+                    const chatContainer = document.getElementById('chat-messages');
+                    const userMsg = document.createElement('div');
+                    userMsg.className = 'chat-message user-message';
+                    userMsg.innerHTML = `
+                        <p>${message}</p>
+                        <p class="text-xs text-slate-400 mt-1">Maintenant</p>
+                    `;
+                    chatContainer.appendChild(userMsg);
+                    // Clear input
+                    input.value = '';
+                    // Scroll to bottom
+                    chatContainer.scrollTop = chatContainer.scrollHeight;
+                    // Simulate AI response after a delay
+                    setTimeout(() => {
+                        const responses = [
+                            "J'ai vérifié le système. Il y a 3 postes à quai disponibles qui peuvent accueillir ce navire.",
+                            "Le yard a actuellement une capacité restante de 45% dans la Zone C.",
+                            "La porte 2 connaît des retards en raison d'un trafic accru. Envisagez de rediriger vers la porte 3.",
+                            "J'ai programmé 2 grues pour le navire MSC Oscar, comme demandé.",
+                            "Le rapport de facturation pour le Q3 a été généré et envoyé à votre email."
+                        ];
+                        const aiMsg = document.createElement('div');
+                        aiMsg.className = 'chat-message ai-message';
+                        aiMsg.innerHTML = `
+                            <p>${responses[Math.floor(Math.random() * responses.length)]}</p>
+                            <p class="text-xs text-slate-400 mt-1">Maintenant</p>
+                        `;
+                        chatContainer.appendChild(aiMsg);
+                        chatContainer.scrollTop = chatContainer.scrollHeight;
+                    }, 1000 + Math.random() * 2000);
+                }
+            }
+            // Minimize chat
+            document.getElementById('minimize-chat').addEventListener('click', function() {
+                const chatPanel = document.getElementById('chat-panel');
+                const messages = document.getElementById('chat-messages');
+                const input = document.getElementById('chat-input');
+                if (messages.style.display !== 'none') {
+                    messages.style.display = 'none';
+                    input.style.display = 'none';
+                    this.innerHTML = '<i class="fas fa-plus"></i>';
+                    chatPanel.style.transform = 'translateX(-50%) translateY(calc(100% - 40px))';
+                } else {
+                    messages.style.display = 'block';
+                    input.style.display = 'flex';
+                    this.innerHTML = '<i class="fas fa-minus"></i>';
+                    chatPanel.style.transform = 'translateX(-50%)';
+                }
+            });
+            // Simulate initial notification
+            setTimeout(() => {
+                const notification = document.getElementById('notification');
+                notification.textContent = 'Navire MSC Lucy ETA mis à jour à 14:30';
+                notification.classList.remove('hidden');
+                setTimeout(() => {
+                    notification.classList.add('hidden');
+                }, 3000);
+            }, 1500);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=arkleinberg/tos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ <body> <!-- Conteneur principal pour la scène 3D Three.js --> <div id="viewport-3d"></div> <!-- Mini-carte 2D en superposition --> <div id="minimap" class="overlay top-right"> <!-- Par exemple une image ou un canvas pour la carte --> <img src="minicarte-port.png" alt="Mini-carte du port"/> </div> <!-- Menu principal vertical (icônes) --> <nav id="main-menu" class="overlay side-right"> <ul> <li><button id="btn-berth" title="Berth Management"><i class="icon-anchor"></i></button></li> <li><button id="btn-yard" title="Yard Management"><i class="icon-yard"></i></button></li> <li><button id="btn-gate" title="Gate Management"><i class="icon-gate"></i></button></li> <li><button id="btn-schedule" title="Equipment & Staff Scheduling"><i class="icon-crane"></i></button></li> <li><button id="btn-billing" title="Billing & Reporting"><i class="icon-report"></i></button></li> </ul> </nav> <!-- Panneau de chat IA --> <div id="chat-panel" class="overlay bottom"> <div id="chat-messages"></div> <div id="chat-input"> <input type="text" placeholder="Entrez votre question..."/> <button id="send-btn">Envoyer</button> </div> </div> <!-- Info utilisateur en haut à droite --> <div id="user-info" class="overlay top-right"> <img src="avatar.png" alt="Avatar" class="avatar"/> <span class="username">Jean Dupont – Yield Manager</span> </div> <!-- Menu contextuel (exemple, caché par défaut) --> <div id="context-menu" class="overlay info-panel" style="display:none;"></div> <!-- Inclusion du script Three.js et des scripts applicatifs --> <script src="three.min.js"></script> <script src="app.js"></script> </body>
2	+ Interface 3D en temps réel du terminal portuaire de Santo Domingo Modélisation 3D interactive du port L’application web utilise Three.js pour afficher une représentation 3D en temps réel du port de Santo Domingo. Tous les éléments clés du terminal sont modélisés : les quais (postes d’accostage), les zones de fret (aire de conteneurs, parc à véhicules), les gates d’entrée/sortie camions, ainsi que les infrastructures visibles (bâtiments du terminal, entrepôts, clôtures, etc.). Par exemple, on inclut les huit postes à quai répertoriés dans le Port Handbook : le terminal Santo Domingo comprend les docks 1 à 5 sansouci.com.do dédiés au fret (conteneurs, cargo roulier, ferry), tandis que le terminal Don Diego accueille les navires de croisière sur les quais n°6, 7 et 8 sansouci.com.do . Le terminal Sans Souci possède quant à lui un grand quai de 250 mètres pour les paquebots et les navires véhicules sansouci.com.do . Ces différentes jetées sont modélisées aux bonnes échelles (longueur, largeur, tirant d’eau) d’après les données du Port Handbook. On représente également les espaces logistiques : par exemple la zone de stockage de véhicules (~99 500 m² pour 7 000 véhicules) à l’arrière du terminal Sans Souci sansouci.com.do , ainsi que les entrepôts de stockage (le terminal Santo Domingo en compte deux pour les marchandises d’import/export sansouci.com.do ). Chaque entité portuaire (quai, yard, entrepôt, gate…) est un objet 3D distinct dans la scène, ce qui permettra des interactions utilisateur spécifiques. Techniquement, la scène Three.js comportera un sol (terrain du port) et l’eau de la rivière, avec éventuellement des textures réalistes. Les quais peuvent être modélisés par des formes extrudées ou des primitives (boîtes allongées) placées aux emplacements exacts du plan portuaire. Des modèles simplifiés de bâtiments (terminal passagers, bureaux de douane, etc.) sont ajoutés pour coller à la réalité du site. On peut utiliser les données de la carte du port sansouci.com.do sansouci.com.do pour positionner correctement chaque élément. L’usage de lights (Three.js) aide à repérer les zones (éclairage des quais la nuit, etc.) et améliore le réalisme visuel. L’interface 3D est interactive : l’utilisateur peut zoomer, pivoter la caméra autour du port et voir l’ensemble des installations en un coup d’œil. L’affichage 3D occupe tout l’arrière-plan de la page web (un <canvas> WebGL géré par Three.js), offrant une vue globale du terminal en temps réel. Navigation et changement de perspective par clic L’utilisateur peut interagir directement avec la scène 3D. En particulier, il est possible de cliquer sur un gate ou un quai pour changer de perspective ou s’y déplacer. Par exemple, cliquer sur le modèle 3D d’une gate (barrière d’entrée) fera automatiquement déplacer la caméra vers cette zone, offrant une vue détaillée de l’entrée du terminal. De même, cliquer sur un quai ou un poste à quai centrerait la caméra sur ce poste, comme si l’on “zoomait” sur le navire amarré. Cette navigation ciblée aide l’utilisateur à rapidement focaliser sur une zone précise du port. Pour implémenter cela, on utilise le raycasting de Three.js : chaque objet 3D cliquable (gates, quais…) est détectable via un rayon lancé depuis le pointeur de la souris. Lorsqu’un clic est détecté sur un objet, une fonction de rappel va animer le déplacement de la caméra vers une nouvelle position (par ex. une position prédéfinie offrant la meilleure vue de cet objet). On peut utiliser une transition fluide (interpolation) pour déplacer la caméra, afin de garder l’interface agréable. Par exemple, cliquer sur la gate d’entrée camion pourrait déplacer la caméra à une vue à hauteur d’homme devant le portail, alors que cliquer sur le quai n°7 du terminal Don Diego ferait passer en vue du dessus du poste 7 où un paquebot est amarré. L’utilisateur peut ensuite reprendre le contrôle manuel (via orbit controls, déplacement libre) pour inspecter autour de ce point de vue. Cette interaction de navigation par clic rend l’interface fluide et intuitive : le personnel peut instantanément “sauter” d’une zone du terminal à une autre en fonction des besoins opérationnels (par ex. vérifier l’état d’un gate, puis visualiser un quai où un navire est en opération). Mini-carte 2D en vue du dessus En haut à droite de l’écran, un encart affiche une mini-carte 2D du port (vue du dessus). Cette mini-carte offre une représentation schématique du terminal vu du ciel, permettant de se repérer facilement parmi les installations. Elle peut être construite soit à partir d’une image satellite ou d’un plan du port (par exemple en utilisant la carte officielle “Port Map” du Port Handbook), soit générée dynamiquement (par ex. via une mini-scène Orthographic de Three.js ou un canvas 2D). L’aperçu 2D met en évidence les différents quais et zones du port sous forme simplifiée. Chaque quai peut être dessiné comme un segment, chaque entrepôt comme un rectangle, etc., avec des annotations ou numéros (1–8, Sans Souci, Don Diego…) pour plus de clarté. La position actuelle de la caméra 3D ou de l’élément sélectionné peut également être indiquée sur la mini-carte (par un petit triangle ou un curseur directionnel). Ainsi, si l’utilisateur navigue le port en 3D, il voit sur la mini-carte où se situe son champ de vision. La mini-carte aide à la navigation globale : en un coup d’œil on voit l’ensemble du port. On peut même rendre la mini-carte interactive – par exemple en permettant de cliquer sur un emplacement de la carte 2D pour téléporter la caméra 3D à cet endroit. Toutefois, son rôle principal est informatif. Visuellement, ce panneau 2D sera semi-transparent ou encadré, situé en haut à droite sans couvrir excessivement la vue 3D principale. Il est suffisamment détaillé pour distinguer les terminaux (Don Diego vs Santo Domingo vs Sans Souci) et les infrastructures majeures (routes d’accès, zone de stockage de véhicules, etc.), mais reste simple pour ne pas surcharger l’interface. Menus contextuels par gate/quai (informations en temps réel) Chaque gate (et par extension, chaque poste à quai) dispose d’un menu contextuel déroulant affichant les informations opérationnelles en temps réel. Lorsque l’utilisateur clique sur l’un de ces éléments (ou sur un bouton dédié), un petit panneau s’affiche à l’écran, contenant les détails tels que : Statut actuel – par exemple Ouvert/fermé pour une gate routière, ou Occupé/libre pour un quai (s’il y a un navire à quai ou non). Navire en approche / en opération – le nom du navire assigné à ce quai/gate, avec éventuellement son type (porte-conteneurs, croisière, ferry, etc.) et son identifiant (IMO ou appel). Pour un quai, ce serait le navire attendu ou en cours d’escale; pour une gate camions, ce pourrait être le prochain camion attendu ou simplement le volume de trafic entrant. ETA/Heure estimée d’arrivée – par exemple, l’heure d’arrivée prévue du navire à ce poste d’accostage, ou l’ETA de la prochaine rotation de camions à cette gate. Progression des opérations – un indicateur (texte ou barre de progression) montrant l’avancement du déchargement/chargement. Pour un navire cargo, on pourrait indiquer “Déchargement à 50%” avec une barre visuelle. Pour une gate, on pourrait indiquer le pourcentage de camions traités par rapport à la file prévue. Ce menu contextuel apparaîtra de manière fluide (par exemple en fondu ou en déroulant sous le curseur). L’utilisateur peut le refermer facilement pour retourner à la vue globale. En termes d’implémentation HTML/CSS, il s’agit d’un <div> stylé en panneau flottant, positionné soit à côté de l’élément cliqué (p. ex. fixé près du curseur sur la vue 3D), soit dans une zone fixe de l’écran réservée aux infos détaillées. Chaque menu contextuel aura un style cohérent (fond semi-transparent sombre pour survoler la 3D, texte contrasté lisible, éventuellement code couleur indiquant le statut – vert si ouvert/libre, rouge si fermé/occupé, etc.). Ces menus sont mis à jour en temps réel via les données du TOS (Terminal Operating System). Par exemple, si l’ETA d’un navire change ou si le déchargement passe à 80%, le panneau se mettra à jour automatiquement (grâce à du JavaScript recevant des événements, WebSockets ou appels périodiques). L’utilisateur peut donc cliquer à tout moment sur un quai pour avoir des informations à jour sur les opérations en cours sur ce poste. Panneau de chat IA (M2H Majestic) En bas de l’écran, un panneau de chat intègre un assistant intelligent nommé M2H Majestic. Ce chatbot IA permet aux utilisateurs de formuler des requêtes en langage naturel et d’obtenir des réponses ou de l’aide concernant les opérations portuaires. L’interface de chat se présente généralement sous forme d’une barre ou d’une fenêtre rectangulaire occupant la largeur inférieure de la page. Le panneau de chat affiche l’historique des échanges : les questions de l’utilisateur et les réponses de l’assistant M2H. Par exemple, un utilisateur pourrait taper « Quel est le prochain navire attendu au quai 5 et à quelle heure ? », et M2H Majestic répondrait en utilisant les données du système (« Le prochain navire au quai 5 est le MSC Caribe, ETA 14h30, actuellement 65% déchargé. »). L’assistant peut aider pour des tâches comme rechercher une information, expliquer une fonctionnalité du TOS, ou même effectuer des actions simples via des commandes (s’il est connecté à l’API du TOS). Visuellement, le panneau comporte une zone de texte pour saisir les questions, et des bulles de conversation pour les messages. On peut mettre l’avatar ou le logo de M2H Majestic à gauche des réponses pour bien distinguer qui parle. Ce chat étant en permanence affiché en bas (mais éventuellement rétractable), il n’obstrue pas la vue principale. L’utilisateur peut le minimiser en un petit onglet s’il a besoin de tout l’écran pour la 3D, puis le rouvrir en cas de besoin. Du point de vue technique, ce composant chat est réalisé en HTML/CSS/JS classique, éventuellement avec une bibliothèque UI pour chat. Il écoute les requêtes utilisateur et envoie ces requêtes à un service d’IA. Pour la maquette on peut simuler les réponses. L’important est qu’il soit accessible rapidement pour apporter une aide contextuelle, améliorant la fluidité de l’expérience utilisateur (au lieu d’aller chercher dans des menus complexes, on peut simplement poser la question à l’IA). Menu principal vertical (icônes TOS) Sur le côté droit de l’écran, un menu principal vertical présente sous forme d’icônes les grandes fonctions du système TOS. Ce menu est une barre latérale minimaliste contenant uniquement des boutons icônes (sans texte visible pour gagner de l’espace horizontal). Chaque icône représente l’une des fonctionnalités suivantes : Berth Management – gestion des postes à quai (icône suggérée : une ancre symbolisant l’amarrage ou un quai). Yard Management – gestion du yard/stockage (icône : un conteneur ou une empile de caisses). Gate Management – gestion des accès camions (icône : une barrière de sécurité ou un portail). Equipment & Staff Scheduling – planification des équipements et du personnel (icône : un chariot élévateur, une grue ou un pictogramme d’ouvriers/horloge). Billing & Reporting – facturation et rapports (icône : un document avec un graphique ou un symbole $). Chaque bouton est affiché sous forme d’icône monochrome épurée. Lorsqu’on survole une icône avec la souris, une infobulle (tooltip) apparaît, indiquant le nom complet de la fonctionnalité (traduite en français si besoin, ex. “Gestion des postes à quai” pour Berth Management, etc.). Cela permet aux utilisateurs de comprendre la signification de chaque icône sans occuper l’écran en permanence avec du texte. Le menu vertical est fixe à droite, centré verticalement, pour être facilement accessible peu importe le scroll ou le panorama de la 3D. En termes d’implémentation, ce menu est un élément <nav> ou <ul> stylé en position fixe sur la droite. Les icônes peuvent être des images SVG ou des polices d’icônes (FontAwesome ou autres) pour une bonne qualité d’affichage. On utilise des styles CSS pour agrandir légèrement l’icône au survol ou la surligner, améliorant l’affordance. Un clic sur une de ces icônes peut naviguer vers un écran ou une superposition spécifique correspondant au module choisi (par ex. cliquer “Berth Management” pourrait ouvrir un tableau détaillé des navires à quai, etc.). En l’absence de texte visible, les info-bulles sur survol sont essentielles pour la convivialité. Ce design tout en icônes assure une interface aérée : le regard de l’utilisateur reste focalisé sur la 3D, sans distraction, et le menu est disponible à tout moment pour accéder aux modules TOS. Barre utilisateur (avatar et rôle) en haut à droite Enfin, dans le coin supérieur droit de l’écran, l’interface affiche une petite barre utilisateur comprenant l’avatar de l’utilisateur connecté, son nom et son rôle. Par exemple, on y verra une photo de profil ou une icône générique suivie du texte « Nom d’utilisateur – Yield Manager ». Le rôle “Yield Manager” indique la fonction actuelle de l’utilisateur dans le système. Cette barre donne un contexte sur qui est connecté et ses permissions, ce qui est important dans un environnement multi-utilisateurs (par exemple, un Yield Manager n’aura pas les mêmes options qu’un Administrateur ou un Opérateur de quai). Ce composant se présente comme un simple texte à droite de la barre de navigation supérieure, ou dans un coin, aligné à droite au même niveau que le titre de l’application éventuellement. On peut l’illustrer par un petit avatar rond (40px par exemple) suivi du nom. Si on clique sur cette zone, un petit menu déroulant pourrait apparaître avec des actions utilisateur (Profil, Paramètres, Déconnexion), bien que cela ne soit pas explicitement demandé, c’est une pratique courante pour les barres utilisateurs. Visuellement, l’avatar peut être une image fournie par l’utilisateur ou un pictogramme par défaut (silhouette). Le nom et le rôle seront en texte clair. On peut styliser le rôle en italique ou en plus petite taille à côté du nom si on souhaite une présentation soignée, par ex. Jean Dupont – Yield Manager. Ce repère constant en haut de l’interface participe à la fluidité de l’expérience en rappelant le contexte (utile notamment si l’application permet de changer de rôle ou de se rendre compte sous quelle identité on opère). Architecture HTML/JS/CSS de la page Pour réaliser cette interface, on organise le code en séparant clairement la structure HTML, la mise en forme CSS et la logique JavaScript (incluant Three.js). Ci-dessous une structure HTML possible pour la page : html Copier Modifier <body> <!-- Conteneur principal pour la scène 3D Three.js --> <div id="viewport-3d"></div> <!-- Mini-carte 2D en superposition --> <div id="minimap" class="overlay top-right"> <!-- Par exemple une image ou un canvas pour la carte --> <img src="minicarte-port.png" alt="Mini-carte du port"/> </div> <!-- Menu principal vertical (icônes) --> <nav id="main-menu" class="overlay side-right"> <ul> <li><button id="btn-berth" title="Berth Management"><i class="icon-anchor"></i></button></li> <li><button id="btn-yard" title="Yard Management"><i class="icon-yard"></i></button></li> <li><button id="btn-gate" title="Gate Management"><i class="icon-gate"></i></button></li> <li><button id="btn-schedule" title="Equipment & Staff Scheduling"><i class="icon-crane"></i></button></li> <li><button id="btn-billing" title="Billing & Reporting"><i class="icon-report"></i></button></li> </ul> </nav> <!-- Panneau de chat IA --> <div id="chat-panel" class="overlay bottom"> <div id="chat-messages"></div> <div id="chat-input"> <input type="text" placeholder="Entrez votre question..."/> <button id="send-btn">Envoyer</button> </div> </div> <!-- Info utilisateur en haut à droite --> <div id="user-info" class="overlay top-right"> <img src="avatar.png" alt="Avatar" class="avatar"/> <span class="username">Jean Dupont – Yield Manager</span> </div> <!-- Menu contextuel (exemple, caché par défaut) --> <div id="context-menu" class="overlay info-panel" style="display:none;"></div> <!-- Inclusion du script Three.js et des scripts applicatifs --> <script src="three.min.js"></script> <script src="app.js"></script> </body> Dans cet extrait: La <div id="viewport-3d"> sert de conteneur au canevas WebGL Three.js (on peut soit insérer directement un <canvas> dedans, soit laisser Three.js l’ajouter). Il occupe toute la fenêtre en arrière-plan. Les éléments avec classe overlay sont en position absolue par-dessus la vue 3D. Par exemple, #minimap.overlay.top-right sera positionné en haut à droite (via CSS, ex: position:absolute; top:10px; right:10px;). Le menu vertical #main-menu.overlay.side-right est positionné à droite centré verticalement (par ex. top:50%; right:0; transform:translateY(-50%);). Il contient des <button> avec des icônes et utilise l’attribut title pour les info-bulles (ou alternativement un <span class="tooltip"> visible au survol via CSS). Le panneau de chat #chat-panel.overlay.bottom est fixé en bas (bottom:0; left:0; right:0; height:...). Il est éventuellement semi-transparent avec un fond sombre. Il contient une zone de messages et un champ de saisie. La section utilisateur #user-info.overlay.top-right est également absolue en haut à droite, mais avec un décalage pour ne pas chevaucher la mini-carte (on peut la mettre dans la même zone top-right mais plus en bas, ou légèrement à gauche de la mini-carte). Elle montre un <img> d’avatar et le nom dans un <span>. Le #context-menu.overlay.info-panel est un panneau générique pour afficher les infos contextuelles des gates/quais. Au clic sur un objet, on peu peupler ce div en JS avec le contenu approprié (statut, navire, ETA, etc.) et le positionner soit près de l’objet cliqué, ou dans un coin de l’écran. Il est caché par défaut (display:none) et affiché quand nécessaire. La feuille de style CSS va gérer la mise en page de ces éléments overlay. On utilisera un système de calques avec position:absolute ou fixed pour que les overlays restent en place lors des mouvements de caméra 3D. Une attention particulière est donnée à la responsivité et à la lisibilité : par exemple, la mini-carte et le chat auront un fond légèrement translucide pour bien se détacher de la 3D sans la masquer complètement. Les polices utilisées seront sobres et lisibles (typique des interfaces industrielles). On peut définir des couleurs thématiques pour le système (par ex. la couleur de Sans Souci – le logo Sansouci est bleu/vert – pour souligner certains éléments). Les icônes du menu peuvent être insérées via une police d’icônes ou des images SVG, stylées en CSS (taille, couleur au survol, etc.). Les info-bulles (tooltips) peuvent être réalisées en CSS pur (:hover sur le bouton pour faire apparaître un pseudo-élément contenant le texte) ou via un petit script JS. Le script JavaScript (fichier app.js par exemple) initialise la scène Three.js et gère les interactions : Création de la scène (THREE.Scene()), de la caméra (probablement une caméra perspective placée de façon à voir l’ensemble du port initialement) et du renderer WebGL attaché au conteneur viewport-3d. On ajoute des lumières (directionnelle pour le soleil, ambiante pour les ombres douces, etc.). Chargement ou création des objets 3D du port : on peut modeler les quais d’après les dimensions (par ex. PierGeometry = new THREE.BoxGeometry(longueur, hauteur, largeur)). Si disponible, on pourrait importer un modèle 3D existant (au format glTF/OBJ) du port, mais ici on peut aussi générer géométriquement ou via des primitives. On place chaque quai aux coordonnées appropriées. Idem pour les zones de stockage (de grands plans horizontaux texturés), les bâtiments (boîtes représentant les entrepôts, terminal passagers, etc.), et les objets plus fins comme les grilles des gates (simples rectangles fins). Mise en place des contrôles de caméra (par ex. OrbitControls de Three.js pour permettre le zoom/dézoom, rotation orbitale, etc.). On limite éventuellement les angles pour rester au-dessus du sol. Implémentation du cliquage d’objets : on utilise THREE.Raycaster. À chaque clic (mousedown) sur le canvas, on calcule l’intersection avec les objets de la scène. Si un objet d’intérêt est touché (on peut tagger les objets avec un nom ou un identifiant, ex: object.userData = { type: 'gate', id: 'Gate1' }), alors on exécute la fonction associée (par ex. onObjectClick(object)). Si c’est une gate ou un quai : on affiche le menu contextuel correspondant. Le script va remplir le <div id="context-menu"> avec le contenu HTML (par exemple : <h3>Quai 5</h3><p>Status: Occupé</p><p>Navire: MSC Caribe (ETA 14h30)</p><p>Progression déchargement: 65%</p>). Ensuite, on positionne ce div. On peut choisir de le placer, disons, en haut à gauche de l’écran ou dans un panneau latéral. Ou plus sophistiqué : projeter la position 3D de l’objet en 2D à l’écran (vector = object.position.project(camera)) et positionner le div à vector.x, vector.y. Cependant, comme on a déjà la mini-carte, il pourrait être acceptable que le menu contextuel apparaisse de façon fixe pour ne pas courir après la position. À voir selon ergonomie. On utilise des styles CSS pour le faire apparaître en douceur. En parallèle, le clic peut aussi déclencher la navigation de la caméra (comme décrit plus haut). Par exemple, le script anime la caméra vers object.position avec un certain offset (pour ne pas entrer dans l’objet). Cela peut se faire via gsap ou tween.js ou manuellement en interpolant dans la boucle de rendu. Durant ce déplacement, l’interface reste interactive. Gestion du chat : le script JS récupère l’input utilisateur dans #chat-input lorsqu’on appuie sur Envoyer. Il affiche immédiatement la question dans la zone #chat-messages, l’envoie au backend IA (dans notre cas M2H Majestic). La réponse reçue (simulée ou réelle) est ensuite ajoutée sous forme de nouveau message dans #chat-messages. On peut ajouter un léger délai typique d’un chatbot pour le réalisme. Le panneau de chat pourrait être scrollable si l’historique dépasse la taille. Mise à jour en temps réel : on présume que le TOS envoie des mises à jour (via WebSocket ou polling AJAX) sur l’état des quais, etc. Le script JS écoute ces événements (par exemple, réception d’un objet JSON { event: "updateProgress", berth: 5, progress: 80% }) et va mettre à jour l’UI en conséquence. Si le menu contextuel du quai 5 est ouvert, il mettra à jour le champ progression. Si l’utilisateur n’a pas ouvert le menu, peut-être que l’icône du quai 5 dans la 3D pourrait changer de couleur ou clignoter pour signaler un changement (ce serait un bonus de design, non explicitement demandé). De même, la mini-carte 2D pourrait montrer des indicateurs (par ex. un point vert/rouge sur chaque quai pour libre/occupé). Enfin, on s’assure que le rendement est bon : Three.js permet de rendre des milliers de polygones sans problème, et on n’a ici qu’un port relativement simple (quelques grandes formes). On active requestAnimationFrame pour animer la scène en continu (60 FPS), ou on peut rendre au coup par coup si on veut économiser des ressources quand rien ne change (mais comme il peut y avoir du mouvement – par ex. on pourrait animer de petits éléments ou le déplacement d’un navire approchant – on préfère un rendu continu). Ressources graphiques nécessaires Pour réaliser l’interface telle que conçue, quelques fichiers graphiques seront nécessaires : Une image de fond de carte 2D du port pour la mini-carte. Idéalement un plan schématique ou une vue satellite du port de Santo Domingo (par exemple extrait du Port Handbook ou d’une source cartographique). Cette image sera utilisée dans #minimap. Les icônes pour le menu principal : on peut utiliser des fichiers SVG appropriés (une ancre, un conteneur, une barrière, une grue, un document, etc.) ou recourir à une librairie d’icônes. L’important est d’avoir des pictogrammes clairs et compréhensibles, en style monochrome. Si disponibles, on intègre ces fichiers (par exemple anchor.svg, container.svg, etc.). Un fichier image pour l’avatar utilisateur (sauf si on génère un avatar par CSS). On peut prévoir un avatar par défaut (avatar.png) que l’utilisateur pourra éventuellement personnaliser. Éventuellement des textures pour la 3D : par exemple, une texture d’eau pour la surface de la rivière, une texture d’asphalte ou de béton pour le sol du terminal, une texture de conteneurs empilés pour habiller la zone de fret. Three.js pourrait utiliser ces images pour un rendu plus réaliste. Ce n’est pas strictement nécessaire (on peut aussi utiliser des couleurs unies dans un premier temps), mais souhaitable pour le réalisme visuel d’un outil professionnel en temps réel. Le logo ou un icône pour M2H Majestic si on souhaite le mettre dans le chat (par exemple un petit logo “Majestic” à côté des réponses de l’IA). En résumé, cette interface web propose une expérience immersive et fonctionnelle pour la gestion du port de Santo Domingo. La combinaison d’une visualisation 3D interactive du terminal (avec ses quais et équipements tels que décrits dans le Port Handbook) sansouci.com.do sansouci.com.do , de panneaux d’information contextuels et d’outils (mini-carte, chat IA, menus icônifiés), permet aux opérateurs du port (Yield Manager et autres) de surveiller et piloter les opérations portuaires de façon fluide, en temps réel, et de manière très intuitive. Chaque composant de l’UI est pensé pour minimiser la charge cognitive et maximiser la réactivité : l’information importante est accessible en un clic sur la zone concernée, et l’utilisateur dispose d’une vue d’ensemble toujours à jour pour prendre rapidement les décisions ou actions nécessaires. Les principes d’ergonomie et de performance sont respectés, ce qui fait de cette interface un outil adapté à un environnement critique comme un terminal portuaire en activité. Sources : Le Port Handbook – Puerto Santo Domingo a fourni les détails d’implantation du terminal (répartition et dimensions des quais, infrastructures de stockage) utilisés pour la modélisation sansouci.com.do sansouci.com.do sansouci.com.do sansouci.com.do . Les concepts de conception d’interface s’inspirent des pratiques courantes en systèmes d’exploitation portuaires (TOS) et des guidelines d’ergonomie pour les applications 3D et temps réel.