<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "andamos";

// Crear la conexión
$conn = new mysqli($servername, $username, $password, $dbname);

// Verificar la conexión
if ($conn->connect_error) {
    die("Conexión fallida: " . $conn->connect_error);
}

$sql = "SELECT id, nombre, foto, experiencia, fecha FROM experiencias ORDER BY fecha DESC";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>PINTANDO</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/icono.png" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600&family=Inter:wght@600&family=Lobster+Two:wght@700&display=swap" rel="stylesheet">
    
    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <div class="container-xxl bg-white p-0">
        <!-- Spinner Start -->
        <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <!-- Spinner End -->


         <!-- Navbar Start -->
         <nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top px-4 px-lg-5 py-lg-0">
            <a href="index.html" class="navbar-brand">
                <h1 class="m-0 text-primary"><i class="fas fa-dove"></i>ANDAMOS</h1>
            </a>
            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="navbar-nav mx-auto">
                    <a href="index.html" class="nav-item nav-link ">Inicio</a>
                    <a href="escuchando.html" class="nav-item nav-link">Escuchando</a>
                    <a href="pintando.html" class="nav-item nav-link active ">Pintando</a>
                    <a href="recordando.html" class="nav-item nav-link">Recordando</a>
                    <a href="valientes.html" class="nav-item nav-link">Valientes</a>
                    <a href="sanando.html" class="nav-item nav-link">Sanando</a>
                    <a href="desde_otros_ojos.html" class="nav-item nav-link">Desde otros ojos</a>

                    </div>
                    
        </nav>
        <!-- Navbar End -->

        <!-- Page Header End -->
        <div class="container-xxl py-5 page-header position-relative mb-5">
            <div class="container py-5">
                <h1 class="display-2 text-white animated slideInDown mb-4">Pintando</h1>
                <nav aria-label="breadcrumb animated slideInDown">
                   
                </nav>
            </div>
        </div>
        
        <!-- About Start -->
        <div class="container-xxl py-5">
            <div class="container">
                <div class="row g-5 align-items-center">
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                        <h1 class="mb-4">Pintatón </h1>
                        <p>En las instalaciones de la Casa de la Memoria se realizó una pintatón donde los chicos y chicas del grupo "Jóvenes en Paz" compartieron sus mensajes sobre reparación social, construcción de memoria y reconciliación.</p>
                        <p class="mb-4"> Únete a nosotros publicando tu dibujo o fotografía y contándonos un poco sobre lo que, para ti, significa la construcción de memoria colectiva y su importancia.</p>
                        <p class="mb-4"> Queremos escuchar tus ideas y visiones para fortalecer este proceso esencial, que ayuda a sanar heridas, mantener viva la historia y construir un futuro más justo y solidario para todos y todas.  </p>

                        <div class="row g-4 align-items-center">
                            
                            <div class="col-sm-6">
                                <div class="d-flex align-items-center">
                                    <div class="ms-3">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 about-img wow fadeInUp" data-wow-delay="0.5s">
                        <div class="row">
                            <div class="col-12 text-center">
                                <img class="img-fluid w-75 rounded-circle bg-light p-3" src="img/pintando2.jpeg" alt="">
                            </div>
                            <div class="col-6 text-start" style="margin-top: -150px;">
                                <img class="img-fluid w-100 rounded-circle bg-light p-3" src="img/pintando1.jpeg" alt="">
                            </div>
                            <div class="col-6 text-end" style="margin-top: -150px;">
                                <img class="img-fluid w-100 rounded-circle bg-light p-3" src="img/pintando3.jpeg" alt="">
                            </div>
                        </div>
                </div>
                <form action="upload.php" method="post" enctype="multipart/form-data">
                    <input class="form-control bg-transparent w-100 py-3 ps-4 pe-5" type="text" name="nombre" id="nombre" placeholder="Escribe tu nombre" required><br><br>

                    
                    <label for="foto">Elige una fotografía:</label><br><br>
                    <input class="form-control bg-transparent" type="file" name="foto" id="foto" accept="image/*" required><br><br>
                    
                    <label for="experiencia">Cuéntanos tu experiencia:</label><br>
                    <textarea class="form-control bg-transparent" name="experiencia" id="experiencia" rows="5" cols="40" required></textarea><br><br>
                    
                    <button type="submit" class="btn btn-primary ">Subir</button>

                </form>
                <br>
                <div class="grid-container" id="grid-container">
        <?php
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo "<div class='grid-item'>";
                echo "<span class='delete-button' onclick='deletePost(" . $row["id"] . ")'>&times;</span>";
                echo "<img src='" . htmlspecialchars($row["foto"]) . "' alt='Foto de " . htmlspecialchars($row["nombre"]) . "'>";
                echo "<p class='nombre'>" . htmlspecialchars($row["nombre"]) . "</p>";
                echo "<p class='descripcion'>" . nl2br(htmlspecialchars($row["experiencia"])) . "</p>";
                echo "<p class='fecha'>" . htmlspecialchars($row["fecha"]) . "</p>";
                echo "</div>";
            }
        } else {
            echo "<p>No hay experiencias aún. ¡Sé el primero en compartir la tuya!</p>";
        }
        $conn->close();
        ?>
    </div>
    <script>
        function deletePost(id) {
            if (confirm('¿Estás seguro de que deseas eliminar esta publicación?')) {
                // Aquí puedes hacer una llamada AJAX para eliminar la publicación del backend
                // Pero en este ejemplo, simplemente vamos a redirigir a una página de eliminación de muestra
                window.location.href = 'delete.php?id=' + id;
            }
        }

        window.addEventListener('load', () => {
            const items = document.querySelectorAll('.grid-item');
            items.forEach((item, index) => {
                setTimeout(() => {
                    item.style.opacity = 1;
                    item.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });
    </script>
   
            </div>
        </div>
    </div>

         <!-- Footer Start -->
        <div class="container-fluid bg-dark text-white-50 footer pt-5 mt-5 wow fadeIn" data-wow-delay="0.1s">
            <div class="container py-5">
                <div class="row g-5">
                    <div class="col-lg-3 col-md-6">
                        <h3 class="text-white mb-4">Contactos</h3>
                        <p class="mb-2"><i class="fa fa-map-marker-alt me-3"></i>Suba, Bogotá, Colombia</p>
                        <p style="margin-bottom: 2rem; display: flex; align-items: center; font-size: 0.9rem;">
                            <i class="fa fa-envelope" style="margin-right: 1rem; font-size: 1.2rem;"></i>
                            andamoscomunicadoras@gmail.com
                        </p>                        
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <h3 class="text-white mb-4">Nuestras páginas</h3>
                        <a class="btn btn-link text-white-50" href="index.html">Inicio</a>
                        <a class="btn btn-link text-white-50" href="escuchando.html">Escuchando</a>
                        <a class="btn btn-link text-white-50" href="pintando.php">Pintando</a>
                        <a class="btn btn-link text-white-50" href="recordando.html">Recordando</a>
                        <a class="btn btn-link text-white-50" href="valientes.html">Valientes</a>
                        <a class="btn btn-link text-white-50" href="sanando.html">Sanando</a>
                        <a class="btn btn-link text-white-50" href="desde_otros_ojos.html">Desde otros ojos</a>

                    </div>
                    <div class="col-lg-3 col-md-6">
                        <h3 class="text-white mb-4">Galería</h3>
                        <div class="row g-2 pt-2">
                            <div class="col-4">
                                <img class="img-fluid rounded bg-light p-1" src="img/galeria1.jpeg" alt="">
                            </div>
                            <div class="col-4">
                                <img class="img-fluid rounded bg-light p-1" src="img/galeria2.jpeg" alt="">
                            </div>
                            <div class="col-4">
                                <img class="img-fluid rounded bg-light p-1" src="img/galeria3.jpeg" alt="">
                            </div>
                            <div class="col-4">
                                <img class="img-fluid rounded bg-light p-1" src="img/galeria4.jpeg" alt="">
                            </div>
                            <div class="col-4">
                                <img class="img-fluid rounded bg-light p-1" src="img/galeria5.jpeg" alt="">
                            </div>
                            <div class="col-4">
                                <img class="img-fluid rounded bg-light p-1" src="img/galeria6.jpeg" alt="">
                            </div>
                            <div class="col-4">
                                <img class="img-fluid rounded bg-light p-1" src="img/galeria7.jpeg" alt="">
                            </div>
                            <div class="col-4">
                                <img class="img-fluid rounded bg-light p-1" src="img/galeria8.jpeg" alt="">
                            </div>
                            <div class="col-4">
                                <img class="img-fluid rounded bg-light p-1" src="img/galeria11.jpeg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <h3 class="text-white mb-4">Redes sociales</h3>
                        <div class="d-flex pt-2">
                            <a class="btn btn-outline-light btn-social" href="https://carolsepulveda.wixsite.com/construyendo-memoria  "><i class="fas fa-blog"></i></a>
                            <a class="btn btn-outline-light btn-social" href="https://youtube.com/@andamoscomunicadoras?si=z3KQMfaFHn_oIgtl  "><i class="fab fa-youtube"></i></a>
                            <a class="btn btn-outline-light btn-social" href="https://www.instagram.com/ecosdejusticia?igsh=OXAybDYwcWdvbzd4  "><i class="fab fa-instagram"></i></a>
                        </div>
                        <div class="position-relative mx-auto" style="max-width: 400px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="copyright">
                    <div class="row">
                        <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                            &copy; <a class="border-bottom" href="#">ANDAMOS</a>, Todos los derechos reservados. 
				
                        </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer End -->





        <!-- Back to Top -->
        <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
    </div>

    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>
</body>

</html>