Spaces:
Running
Running
| <html lang="pt"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GeoMining Angola-Congo - Plataforma de Análise Geológica</title> | |
| <!-- Leaflet CSS --> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <!-- Font Awesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-dark: #1a1f2e; | |
| --primary-blue: #2563eb; | |
| --secondary-gold: #f59e0b; | |
| --accent-green: #10b981; | |
| --accent-red: #ef4444; | |
| --bg-light: #f8fafc; | |
| --text-dark: #1e293b; | |
| --text-light: #64748b; | |
| --border-color: #e2e8f0; | |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| color: var(--text-dark); | |
| } | |
| /* Header */ | |
| .header { | |
| background: rgba(26, 31, 46, 0.95); | |
| backdrop-filter: blur(10px); | |
| padding: 1rem 2rem; | |
| box-shadow: var(--shadow-lg); | |
| position: relative; | |
| z-index: 1000; | |
| } | |
| .header-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| color: white; | |
| } | |
| .logo i { | |
| font-size: 2rem; | |
| color: var(--secondary-gold); | |
| } | |
| .logo h1 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .logo span { | |
| font-size: 0.875rem; | |
| color: var(--text-light); | |
| margin-top: 0.25rem; | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .header-link { | |
| color: var(--text-light); | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| transition: color 0.3s; | |
| } | |
| .header-link:hover { | |
| color: white; | |
| } | |
| /* Main Container */ | |
| .main-container { | |
| max-width: 1400px; | |
| margin: 2rem auto; | |
| padding: 0 1rem; | |
| display: grid; | |
| grid-template-columns: 320px 1fr; | |
| gap: 1.5rem; | |
| min-height: calc(100vh - 120px); | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| background: white; | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow-lg); | |
| max-height: calc(100vh - 160px); | |
| overflow-y: auto; | |
| } | |
| .sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .sidebar::-webkit-scrollbar-track { | |
| background: var(--bg-light); | |
| border-radius: 3px; | |
| } | |
| .sidebar::-webkit-scrollbar-thumb { | |
| background: var(--primary-blue); | |
| border-radius: 3px; | |
| } | |
| .section { | |
| margin-bottom: 2rem; | |
| } | |
| .section-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-dark); | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .section-title i { | |
| color: var(--primary-blue); | |
| } | |
| /* Mineral Selector */ | |
| .mineral-selector { | |
| display: grid; | |
| gap: 0.75rem; | |
| } | |
| .mineral-card { | |
| padding: 1rem; | |
| border: 2px solid var(--border-color); | |
| border-radius: 0.75rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .mineral-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 0; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1)); | |
| transition: width 0.3s; | |
| } | |
| .mineral-card:hover::before { | |
| width: 100%; | |
| } | |
| .mineral-card:hover { | |
| border-color: var(--primary-blue); | |
| transform: translateX(4px); | |
| } | |
| .mineral-card.active { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border-color: transparent; | |
| } | |
| .mineral-card.active .mineral-name, | |
| .mineral-card.active .mineral-desc { | |
| color: white; | |
| } | |
| .mineral-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .mineral-icon { | |
| font-size: 1.5rem; | |
| } | |
| .mineral-name { | |
| font-weight: 600; | |
| color: var(--text-dark); | |
| } | |
| .mineral-desc { | |
| font-size: 0.875rem; | |
| color: var(--text-light); | |
| } | |
| /* Layers Control */ | |
| .layer-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0.75rem; | |
| background: var(--bg-light); | |
| border-radius: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| transition: all 0.3s; | |
| } | |
| .layer-item:hover { | |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); | |
| } | |
| .layer-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .layer-icon { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| } | |
| .layer-name { | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| } | |
| /* Toggle Switch */ | |
| .toggle-switch { | |
| position: relative; | |
| width: 44px; | |
| height: 24px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #ccc; | |
| transition: 0.4s; | |
| border-radius: 24px; | |
| } | |
| .toggle-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 18px; | |
| width: 18px; | |
| left: 3px; | |
| bottom: 3px; | |
| background-color: white; | |
| transition: 0.4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .toggle-slider { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| input:checked + .toggle-slider:before { | |
| transform: translateX(20px); | |
| } | |
| /* Analysis Tools */ | |
| .tool-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 0.75rem; | |
| } | |
| .tool-btn { | |
| padding: 0.75rem; | |
| background: white; | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.5rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-size: 0.875rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .tool-btn:hover { | |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .tool-btn i { | |
| font-size: 1.25rem; | |
| color: var(--primary-blue); | |
| } | |
| /* Content Area */ | |
| .content-area { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| /* Map Container */ | |
| .map-container { | |
| background: white; | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| position: relative; | |
| flex: 1; | |
| min-height: 500px; | |
| } | |
| #map { | |
| width: 100%; | |
| height: 100%; | |
| min-height: 500px; | |
| } | |
| /* Map Controls */ | |
| .map-controls { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .map-control-btn { | |
| background: white; | |
| border: none; | |
| padding: 0.75rem; | |
| border-radius: 0.5rem; | |
| cursor: pointer; | |
| box-shadow: var(--shadow-md); | |
| transition: all 0.3s; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .map-control-btn:hover { | |
| background: var(--primary-blue); | |
| color: white; | |
| transform: scale(1.1); | |
| } | |
| /* Stats Cards */ | |
| .stats-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .stat-card { | |
| background: white; | |
| padding: 1.25rem; | |
| border-radius: 0.75rem; | |
| box-shadow: var(--shadow-md); | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .stat-label { | |
| font-size: 0.875rem; | |
| color: var(--text-light); | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-value { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .stat-change { | |
| font-size: 0.75rem; | |
| margin-top: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| } | |
| .stat-change.positive { | |
| color: var(--accent-green); | |
| } | |
| .stat-change.negative { | |
| color: var(--accent-red); | |
| } | |
| /* Potential Index */ | |
| .potential-container { | |
| background: white; | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .potential-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .potential-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| .potential-value { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 0.5rem; | |
| } | |
| .potential-number { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .potential-scale { | |
| font-size: 0.875rem; | |
| color: var(--text-light); | |
| } | |
| .potential-factors { | |
| display: grid; | |
| gap: 1rem; | |
| } | |
| .factor-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .factor-label { | |
| flex: 1; | |
| font-size: 0.875rem; | |
| color: var(--text-dark); | |
| } | |
| .factor-bar { | |
| flex: 2; | |
| height: 8px; | |
| background: var(--bg-light); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .factor-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); | |
| border-radius: 4px; | |
| transition: width 1s ease-out; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .factor-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); | |
| animation: shimmer 2s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .factor-value { | |
| min-width: 50px; | |
| text-align: right; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--primary-blue); | |
| } | |
| /* Export Modal */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(5px); | |
| z-index: 2000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: white; | |
| border-radius: 1rem; | |
| padding: 2rem; | |
| max-width: 500px; | |
| width: 90%; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| animation: slideUp 0.3s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translateY(50px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| color: var(--text-light); | |
| cursor: pointer; | |
| transition: color 0.3s; | |
| } | |
| .modal-close:hover { | |
| color: var(--text-dark); | |
| } | |
| .export-options { | |
| display: grid; | |
| gap: 1rem; | |
| } | |
| .export-option { | |
| padding: 1rem; | |
| border: 2px solid var(--border-color); | |
| border-radius: 0.75rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .export-option:hover { | |
| border-color: var(--primary-blue); | |
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05)); | |
| } | |
| .export-icon { | |
| font-size: 1.5rem; | |
| color: var(--primary-blue); | |
| } | |
| .export-info { | |
| flex: 1; | |
| } | |
| .export-title { | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| } | |
| .export-desc { | |
| font-size: 0.875rem; | |
| color: var(--text-light); | |
| } | |
| /* Action Buttons */ | |
| .action-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| } | |
| .btn { | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: 0.5rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-size: 0.875rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .btn-secondary { | |
| background: white; | |
| color: var(--text-dark); | |
| border: 1px solid var(--border-color); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-light); | |
| } | |
| /* Loading Spinner */ | |
| .spinner { | |
| border: 3px solid var(--bg-light); | |
| border-top: 3px solid var(--primary-blue); | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 2rem auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1024px) { | |
| .main-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| max-height: none; | |
| } | |
| .stats-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .header-content { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .stats-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .tool-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .action-buttons { | |
| flex-direction: column; | |
| } | |
| .btn { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| background: white; | |
| padding: 1rem 1.5rem; | |
| border-radius: 0.5rem; | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| transform: translateX(400px); | |
| transition: transform 0.3s ease-out; | |
| z-index: 3000; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast-icon { | |
| font-size: 1.25rem; | |
| } | |
| .toast.success .toast-icon { | |
| color: var(--accent-green); | |
| } | |
| .toast.error .toast-icon { | |
| color: var(--accent-red); | |
| } | |
| .toast.info .toast-icon { | |
| color: var(--primary-blue); | |
| } | |
| .toast-message { | |
| flex: 1; | |
| font-size: 0.875rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-mountain"></i> | |
| <div> | |
| <h1>GeoMining Angola-Congo</h1> | |
| <span>Plataforma de Análise Geológica e Potencial Mineral</span> | |
| </div> | |
| </div> | |
| <div class="header-actions"> | |
| <a href="#" class="header-link" onclick="showAbout()"> | |
| <i class="fas fa-info-circle"></i> Sobre | |
| </a> | |
| <a href="#" class="header-link" onclick="showDocumentation()"> | |
| <i class="fas fa-book"></i> Documentação | |
| </a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <main class="main-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <!-- Mineral Selection --> | |
| <section class="section"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-gem"></i> | |
| Seleção de Mineral | |
| </h2> | |
| <div class="mineral-selector"> | |
| <div class="mineral-card active" onclick="selectMineral('diamond', this)"> | |
| <div class="mineral-header"> | |
| <span class="mineral-icon">💎</span> | |
| <span class="mineral-name">Diamante</span> | |
| </div> | |
| <div class="mineral-desc">Kimberlitos e depósitos aluvionares</div> | |
| </div> | |
| <div class="mineral-card" onclick="selectMineral('gold', this)"> | |
| <div class="mineral-header"> | |
| <span class="mineral-icon">🪙</span> | |
| <span class="mineral-name">Ouro</span> | |
| </div> | |
| <div class="mineral-desc">Zonas de cisalhamento e greenstone belts</div> | |
| </div> | |
| <div class="mineral-card" onclick="selectMineral('ornamental', this)"> | |
| <div class="mineral-header"> | |
| <span class="mineral-icon">🪨</span> | |
| <span class="mineral-name">Rochas Ornamentais</span> | |
| </div> | |
| <div class="mineral-desc">Granitos, gnaisses e mármores</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Layers Control --> | |
| <section class="section"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-layer-group"></i> | |
| Camadas do Mapa | |
| </h2> | |
| <div class="layers-list"> | |
| <div class="layer-item"> | |
| <div class="layer-info"> | |
| <span class="layer-icon" style="background: #8b4513;"></span> | |
| <span class="layer-name">Litologia</span> | |
| </div> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" checked onchange="toggleLayer('lithology', this.checked)"> | |
| <span class="toggle-slider"></span> | |
| </label> | |
| </div> | |
| <div class="layer-item"> | |
| <div class="layer-info"> | |
| <span class="layer-icon" style="background: #ff0000;"></span> | |
| <span class="layer-name">Falhas Geológicas</span> | |
| </div> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" checked onchange="toggleLayer('faults', this.checked)"> | |
| <span class="toggle-slider"></span> | |
| </label> | |
| </div> | |
| <div class="layer-item"> | |
| <div class="layer-info"> | |
| <span class="layer-icon" style="background: #00ff00;"></span> | |
| <span class="layer-name">Ocorrências Minerais</span> | |
| </div> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" checked onchange="toggleLayer('minerals', this.checked)"> | |
| <span class="toggle-slider"></span> | |
| </label> | |
| </div> | |
| <div class="layer-item"> | |
| <div class="layer-info"> | |
| <span class="layer-icon" style="background: #0000ff;"></span> | |
| <span class="layer-name">Hidrografia</span> | |
| </div> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" onchange="toggleLayer('hydrography', this.checked)"> | |
| <span class="toggle-slider"></span> | |
| </label> | |
| </div> | |
| <div class="layer-item"> | |
| <div class="layer-info"> | |
| <span class="layer-icon" style="background: linear-gradient(90deg, red, yellow);"></span> | |
| <span class="layer-name">Mapa de Calor</span> | |
| </div> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" onchange="toggleHeatmap(this.checked)"> | |
| <span class="toggle-slider"></span> | |
| </label> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Analysis Tools --> | |
| <section class="section"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-tools"></i> | |
| Ferramentas de Análise | |
| </h2> | |
| <div class="tool-grid"> | |
| <button class="tool-btn" onclick="performBufferAnalysis()"> | |
| <i class="fas fa-circle-notch"></i> | |
| <span>Buffer</span> | |
| </button> | |
| <button class="tool-btn" onclick="performIntersection()"> | |
| <i class="fas fa-vector-square"></i> | |
| <span>Interseção</span> | |
| </button> | |
| <button class="tool-btn" onclick="performProximity()"> | |
| <i class="fas fa-ruler"></i> | |
| <span>Proximidade</span> | |
| </button> | |
| <button class="tool-btn" onclick="performDensity()"> | |
| <i class="fas fa-th"></i> | |
| <span>Densidade</span> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Export Options --> | |
| <section class="section"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-download"></i> | |
| Exportar Dados | |
| </h2> | |
| <div class="action-buttons"> | |
| <button class="btn btn-primary" onclick="showExportModal()"> | |
| <i class="fas fa-file-export"></i> | |
| Exportar | |
| </button> | |
| <button class="btn btn-secondary" onclick="generateReport()"> | |
| <i class="fas fa-file-pdf"></i> | |
| Relatório | |
| </button> | |
| </div> | |
| </section> | |
| </aside> | |
| <!-- Content Area --> | |
| <div class="content-area"> | |
| <!-- Stats Cards --> | |
| <div class="stats-container"> | |
| <div class="stat-card"> | |
| <div class="stat-label">Área de Análise</div> | |
| <div class="stat-value">245,678</div> | |
| <div class="stat-label">km²</div> | |
| <div class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> | |
| <span>+12.5% vs mês anterior</span> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">Ocorrências Mapeadas</div> | |
| <div class="stat-value">1,247</div> | |
| <div class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> | |
| <span>+8.3% novas ocorrências</span> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">Potencial Médio</div> | |
| <div class="stat-value">78.5</div> | |
| <div class="stat-label">/100</div> | |
| <div class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> | |
| <span>+5.2 pontos</span> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">Zonas Prioritárias</div> | |
| <div class="stat-value">23</div> | |
| <div class="stat-change negative"> | |
| <i class="fas fa-arrow-down"></i> | |
| <span>-2 zonas vs análise anterior</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Map Container --> | |
| <div class="map-container"> | |
| <div id="map"></div> | |
| <div class="map-controls"> | |
| <button class="map-control-btn" onclick="zoomIn()" title="Aumentar Zoom"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <button class="map-control-btn" onclick="zoomOut()" title="Diminuir Zoom"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <button class="map-control-btn" onclick="resetView()" title="Resetar Visualização"> | |
| <i class="fas fa-home"></i> | |
| </button> | |
| <button class="map-control-btn" onclick="toggleFullscreen()" title="Tela Cheia"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Potential Index --> | |
| <div class="potential-container"> | |
| <div class="potential-header"> | |
| <h2 class="potential-title">Índice de Potencial Mineral</h2> | |
| <div class="potential-value"> | |
| <span class="potential-number" id="potentialScore">85.3</span> | |
| <span class="potential-scale">/100</span> | |
| </div> | |
| </div> | |
| <div class="potential-factors" id="potentialFactors"> | |
| <div class="factor-item"> | |
| <span class="factor-label">Proximidade a Kimberlitos</span> | |
| <div class="factor-bar"> | |
| <div class="factor-fill" style="width: 90%;"></div> | |
| </div> | |
| <span class="factor-value">0.40</span> | |
| </div> | |
| <div class="factor-item"> | |
| <span class="factor-label">Falhas Profundas</span> | |
| <div class="factor-bar"> | |
| <div class="factor-fill" style="width: 75%;"></div> | |
| </div> | |
| <span class="factor-value">0.30</span> | |
| </div> | |
| <div class="factor-item"> | |
| <span class="factor-label">Depósitos Aluvionares</span> | |
| <div class="factor-bar"> | |
| <div class="factor-fill" style="width: 85%;"></div> | |
| </div> | |
| <span class="factor-value">0.30</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Export Modal --> | |
| <div class="modal" id="exportModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title">Exportar Dados</h3> | |
| <button class="modal-close" onclick="closeExportModal()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="export-options"> | |
| <div class="export-option" onclick="exportFormat('geojson')"> | |
| <i class="fas fa-map export-icon"></i> | |
| <div class="export-info"> | |
| <div class="export-title">GeoJSON</div> | |
| <div class="export-desc">Formato padrão para dados geoespaciais</div> | |
| </div> | |
| </div> | |
| <div class="export-option" onclick="exportFormat('shapefile')"> | |
| <i class="fas fa-file-archive export-icon"></i> | |
| <div class="export-info"> | |
| <div class="export-title">Shapefile</div> | |
| <div class="export-desc">Formato ESRI Shapefile (.shp)</div> | |
| </div> | |
| </div> | |
| <div class="export-option" onclick="exportFormat('kml')"> | |
| <i class="fas fa-globe export-icon"></i> | |
| <div class="export-info"> | |
| <div class="export-title">KML</div> | |
| <div class="export-desc">Google Earth compatible format</div> | |
| </div> | |
| </div> | |
| <div class="export-option" onclick="exportFormat('csv')"> | |
| <i class="fas fa-table export-icon"></i> | |
| <div class="export-info"> | |
| <div class="export-title">CSV</div> | |
| <div class="export-desc">Dados tabulares com coordenadas</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="action-buttons"> | |
| <button class="btn btn-secondary" onclick="closeExportModal()"> | |
| <i class="fas fa-times"></i> | |
| Cancelar | |
| </button> | |
| <button class="btn btn-primary" onclick="downloadData()"> | |
| <i class="fas fa-download"></i> | |
| Baixar Dados | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div class="toast" id="toast"> | |
| <i class="toast-icon fas fa-check-circle"></i> | |
| <span class="toast-message" id="toastMessage">Operação realizada com sucesso!</span> | |
| </div> | |
| <!-- Leaflet JS --> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <script> | |
| // Global variables | |
| let map; | |
| let layers = {}; | |
| let currentMineral = 'diamond'; | |
| let heatmapLayer = null; | |
| // Initialize map | |
| function initMap() { | |
| // Create map centered on Angola-Congo region | |
| map = L.map('map').setView([-5.0, 18.0], 6); | |
| // Add tile layer | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© OpenStreetMap contributors', | |
| maxZoom: 18 | |
| }).addTo(map); | |
| // Add sample geological layers | |
| addGeologicalLayers(); | |
| // Add mineral occurrences | |
| addMineralOccurrences(); | |
| } | |
| // Add geological layers | |
| function addGeologicalLayers() { | |
| // Sample lithology layer | |
| const lithologyData = [ | |
| {lat: -4.5, lng: 15.5, name: "Granito", color: "#8b4513"}, | |
| {lat: -6.0, lng: 16.0, name: "Gn |