Spaces:

Lukeetah
/

app1

Running

App Files Files Community

app1 / index.html

Lukeetah

Upload 3 files

a667f65 verified 12 months ago

raw

history blame contribute delete

14 kB

	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SIB Argentina - Sistema de Información de Biodiversidad</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<!-- Header -->
	<header class="header">
	<div class="container">
	<nav class="nav flex justify-between items-center">
	<div class="logo">
	<h1>SIB Argentina</h1>
	<p>Sistema de Información de Biodiversidad</p>
	</div>
	<ul class="nav-menu flex gap-16">
	<li><a href="#inicio" class="nav-link">Inicio</a></li>
	<li><a href="#explorar" class="nav-link">Explorar</a></li>
	<li><a href="#mapa" class="nav-link">Mapa</a></li>
	<li><a href="#subir" class="nav-link">Subir Observación</a></li>
	<li><a href="#foro" class="nav-link">Foro</a></li>
	<li><a href="#recursos" class="nav-link">Recursos</a></li>
	</ul>
	</nav>
	</div>
	</header>

	<!-- Hero Section -->
	<section id="inicio" class="hero">
	<div class="container">
	<div class="hero-content">
	<h1>Conservando la Biodiversidad de Argentina</h1>
	<p>En el SIB recopilamos, clasificamos, ordenamos, cartografiamos y ponemos a disposición pública la información de carácter ambiental, biológico y socio-cultural de las áreas protegidas de Argentina.</p>
	<div class="hero-stats flex gap-16">
	<div class="stat-card card">
	<div class="card__body">
	<h3>13,559</h3>
	<p>Especies Registradas</p>
	</div>
	</div>
	<div class="stat-card card">
	<div class="card__body">
	<h3>2,147</h3>
	<p>Especies Endémicas</p>
	</div>
	</div>
	<div class="stat-card card">
	<div class="card__body">
	<h3>45,230</h3>
	<p>Observaciones</p>
	</div>
	</div>
	<div class="stat-card card">
	<div class="card__body">
	<h3>1,250</h3>
	<p>Contribuyentes</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Explorar Especies -->
	<section id="explorar" class="explorar py-16">
	<div class="container">
	<h2 class="mb-8">Explorar Especies</h2>

	<!-- Filtros de búsqueda -->
	<div class="search-filters card mb-8">
	<div class="card__body">
	<div class="filters-grid">
	<div class="form-group">
	<label class="form-label" for="reino">Reino</label>
	<select id="reino" class="form-control">
	<option value="">Todos los reinos</option>
	<option value="Animalia">Animalia</option>
	<option value="Plantae">Plantae</option>
	<option value="Fungi">Fungi</option>
	<option value="Chromista">Chromista</option>
	<option value="Bacteria">Bacteria</option>
	</select>
	</div>
	<div class="form-group">
	<label class="form-label" for="provincia">Provincia</label>
	<select id="provincia" class="form-control">
	<option value="">Todas las provincias</option>
	</select>
	</div>
	<div class="form-group">
	<label class="form-label" for="conservacion">Estado de Conservación</label>
	<select id="conservacion" class="form-control">
	<option value="">Todos los estados</option>
	</select>
	</div>
	<div class="form-group">
	<label class="form-label" for="buscar">Buscar Especie</label>
	<input type="text" id="buscar" class="form-control" placeholder="Nombre científico o común">
	</div>
	</div>
	<button class="btn btn--primary mt-8" id="filtrar">Filtrar Especies</button>
	</div>
	</div>

	<!-- Grid de especies -->
	<div class="especies-grid" id="especies-grid">
	<!-- Se llenará dinámicamente -->
	</div>
	</div>
	</section>

	<!-- Mapa Interactivo -->
	<section id="mapa" class="mapa py-16">
	<div class="container">
	<h2 class="mb-8">Mapa de Observaciones</h2>
	<div class="mapa-container card">
	<div class="card__body">
	<div class="mapa-placeholder">
	<h3>Mapa Interactivo de Argentina</h3>
	<p>Aquí se mostraría un mapa interactivo con las observaciones de especies</p>
	<div class="mapa-leyenda">
	<h4>Leyenda:</h4>
	<div class="leyenda-items">
	<div class="leyenda-item">
	<span class="marker-animalia"></span> Animalia
	</div>
	<div class="leyenda-item">
	<span class="marker-plantae"></span> Plantae
	</div>
	<div class="leyenda-item">
	<span class="marker-fungi"></span> Fungi
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Subir Observación -->
	<section id="subir" class="subir py-16">
	<div class="container">
	<h2 class="mb-8">Subir Nueva Observación</h2>
	<div class="card">
	<div class="card__body">
	<form id="form-observacion">
	<div class="form-grid">
	<div class="form-group">
	<label class="form-label" for="imagen">Fotografía de la Especie</label>
	<input type="file" id="imagen" class="form-control" accept="image/*">
	</div>
	<div class="form-group">
	<label class="form-label" for="nombre-cientifico">Nombre Científico</label>
	<input type="text" id="nombre-cientifico" class="form-control" placeholder="Ejemplo: Panthera onca">
	</div>
	<div class="form-group">
	<label class="form-label" for="nombre-comun">Nombre Común</label>
	<input type="text" id="nombre-comun" class="form-control" placeholder="Ejemplo: Jaguar">
	</div>
	<div class="form-group">
	<label class="form-label" for="reino-form">Reino</label>
	<select id="reino-form" class="form-control" required>
	<option value="">Seleccionar reino</option>
	<option value="Animalia">Animalia</option>
	<option value="Plantae">Plantae</option>
	<option value="Fungi">Fungi</option>
	</select>
	</div>
	<div class="form-group">
	<label class="form-label" for="familia">Familia</label>
	<input type="text" id="familia" class="form-control" placeholder="Ejemplo: Felidae">
	</div>
	<div class="form-group">
	<label class="form-label" for="orden">Orden</label>
	<input type="text" id="orden" class="form-control" placeholder="Ejemplo: Carnivora">
	</div>
	<div class="form-group">
	<label class="form-label" for="ubicacion">Ubicación</label>
	<input type="text" id="ubicacion" class="form-control" placeholder="Lugar específico y provincia">
	</div>
	<div class="form-group">
	<label class="form-label" for="coordenadas">Coordenadas GPS</label>
	<input type="text" id="coordenadas" class="form-control" placeholder="Latitud, Longitud">
	</div>
	<div class="form-group">
	<label class="form-label" for="fecha-obs">Fecha de Observación</label>
	<input type="date" id="fecha-obs" class="form-control" required>
	</div>
	<div class="form-group">
	<label class="form-label" for="observador">Nombre del Observador</label>
	<input type="text" id="observador" class="form-control" placeholder="Su nombre completo">
	</div>
	<div class="form-group form-group-full">
	<label class="form-label" for="descripcion">Descripción de la Observación</label>
	<textarea id="descripcion" class="form-control" rows="4" placeholder="Describa las condiciones de la observación, comportamiento, etc."></textarea>
	</div>
	</div>
	<button type="submit" class="btn btn--primary btn--full-width mt-8">Subir Observación</button>
	</form>
	</div>
	</div>
	</div>
	</section>

	<!-- Foro Comunitario -->
	<section id="foro" class="foro py-16">
	<div class="container">
	<h2 class="mb-8">Foro Comunitario</h2>
	<div class="foro-container" id="foro-container">
	<!-- Se llenará dinámicamente -->
	</div>
	</div>
	</section>

	<!-- Recursos Educativos -->
	<section id="recursos" class="recursos py-16">
	<div class="container">
	<h2 class="mb-8">Recursos Educativos</h2>
	<div class="recursos-grid">
	<div class="card">
	<div class="card__body">
	<h3>Guías de Identificación</h3>
	<p>Aprende a identificar especies nativas de Argentina con nuestras guías ilustradas.</p>
	<button class="btn btn--secondary">Ver Guías</button>
	</div>
	</div>
	<div class="card">
	<div class="card__body">
	<h3>Conservación</h3>
	<p>Información sobre esfuerzos de conservación y cómo puedes contribuir.</p>
	<button class="btn btn--secondary">Más Información</button>
	</div>
	</div>
	<div class="card">
	<div class="card__body">
	<h3>Proyectos de Investigación</h3>
	<p>Colabora con proyectos científicos activos en todo el país.</p>
	<button class="btn btn--secondary">Ver Proyectos</button>
	</div>
	</div>
	<div class="card">
	<div class="card__body">
	<h3>Materiales Educativos</h3>
	<p>Recursos para educadores y estudiantes sobre biodiversidad argentina.</p>
	<button class="btn btn--secondary">Descargar</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="footer">
	<div class="container">
	<div class="footer-content">
	<div class="footer-section">
	<h3>SIB Argentina</h3>
	<p>Sistema de Información de Biodiversidad de Argentina</p>
	</div>
	<div class="footer-section">
	<h4>Enlaces</h4>
	<ul>
	<li><a href="#inicio">Inicio</a></li>
	<li><a href="#explorar">Explorar</a></li>
	<li><a href="#mapa">Mapa</a></li>
	<li><a href="#recursos">Recursos</a></li>
	</ul>
	</div>
	<div class="footer-section">
	<h4>Contacto</h4>
	<p>Ministerio de Ambiente y Desarrollo Sostenible</p>
	<p>República Argentina</p>
	</div>
	</div>
	</div>
	</footer>

	<script src="app.js"></script>
	</body>
	</html>