Skip to content

Commit

Permalink
loading-page , buttonnav
Browse files Browse the repository at this point in the history
  • Loading branch information
@francopautasso1
francopautasso1 committed Sep 8, 2024
1 parent 6bba9a3 commit 9747e1e
Show file tree
Hide file tree
Showing 12 changed files with 255 additions and 130 deletions.
28 changes: 20 additions & 8 deletions comunidad.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,13 @@ <h1>Bienvenido a la Comunidad</h1>
</div>


<!-- Barra de navegación fija en la parte inferior -->
<!-- Barra de navegación fija en la parte inferior -->
<nav class="bottom-nav">
<a href="home.html" class="nav-item home">
<i class="bi bi-house"></i>
<span>Home</span>
</a>
<a href="comunidad.html" class="nav-item">
<a href="comunidad.html" class="nav-item community">
<i class="bi bi-people"></i>
<span>Comunidad</span>
</a>

<!-- Botón de nueva publicación -->
Expand All @@ -34,17 +32,31 @@ <h1>Bienvenido a la Comunidad</h1>
</div>
</a>


<a href="explorar.html" class="nav-item">
<a href="explorar.html" class="nav-item explorar">
<i class="bi bi-search"></i>
<span>Explorar</span>
</a>
<a href="perfil.html" class="nav-item profile">
<i class="bi bi-person"></i>
<span>Perfil</span>
</a>
</nav>


<!-- Animación de carga -->
<div class="loader-container" style="display:none;">
<div class="loader">
<img src="./icons/loading-page1.png" class="loader-icon icon-1">
<img src="./icons/loading-page2.png" class="loader-icon icon-2">
<img src="./icons/loading-page3.png" class="loader-icon icon-3">
<img src="./icons/loading-page4.png" class="loader-icon icon-4">
</div>
</div>


<!-- Contenedor Modal -->
<div id="imageModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="modalImage">
</div>


<script src="./javaScript/script.js"></script>
Expand Down
30 changes: 21 additions & 9 deletions explorar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,13 @@ <h1>Bienvenido a Explorar</h1>
<p>Contenido de la página Explorar.</p>
</div>


<!-- Barra de navegación fija en la parte inferior -->
<!-- Barra de navegación fija en la parte inferior -->
<nav class="bottom-nav">
<a href="home.html" class="nav-item home">
<i class="bi bi-house"></i>
<span>Home</span>
</a>
<a href="comunidad.html" class="nav-item">
<a href="comunidad.html" class="nav-item community">
<i class="bi bi-people"></i>
<span>Comunidad</span>
</a>

<!-- Botón de nueva publicación -->
Expand All @@ -34,17 +31,32 @@ <h1>Bienvenido a Explorar</h1>
</div>
</a>


<a href="explorar.html" class="nav-item">
<a href="explorar.html" class="nav-item explorar">
<i class="bi bi-search"></i>
<span>Explorar</span>
</a>
<a href="perfil.html" class="nav-item profile">
<i class="bi bi-person"></i>
<span>Perfil</span>
</a>
</nav>


<!-- Animación de carga -->
<div class="loader-container" style="display:none;">
<div class="loader">
<img src="./icons/loading-page1.png" class="loader-icon icon-1">
<img src="./icons/loading-page2.png" class="loader-icon icon-2">
<img src="./icons/loading-page3.png" class="loader-icon icon-3">
<img src="./icons/loading-page4.png" class="loader-icon icon-4">
</div>
</div>


<!-- Contenedor Modal -->
<div id="imageModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="modalImage">
</div>



<script src="./javaScript/script.js"></script>
Expand Down
167 changes: 78 additions & 89 deletions home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,98 +16,85 @@
<i class="bi bi-bell notification-icon"></i>
</div>




<!-- Contenido principal de la página Home -->
<div class="post">
<div class="post-header">
<img src="./img/logo revista thc.jpg" alt="Foto de perfil" class="profile-pic">
<span class="username">@RevistaTHC</span>
</div>
<div class="post-content">

<p>Clon Factory, que así se presenta en sociedad, es “la primera empresa argentina destinada a la multiplicación y comercialización de clones legales en todo el país”.</p>
</div>
<div class="post-footer">
<button class="action-btn like-btn"><i class="bi bi-heart"></i></button>
<button class="action-btn comment-btn"><i class="bi bi-chat"></i></button>
<button class="action-btn send-btn"><i class="bi bi-send"></i></button>
</div>
<!-- Contenido principal de la página Home -->
<div class="post">
<div class="post-header">
<img src="./img/logo revista thc.jpg" alt="Foto de perfil" class="profile-pic">
<span class="username">@RevistaTHC</span>
</div>
<div class="post-content">
<p>Clon Factory, que así se presenta en sociedad, es “la primera empresa argentina destinada a la multiplicación y comercialización de clones legales en todo el país”.</p>
</div>
<div class="post-footer">
<button class="action-btn like-btn"><i class="bi bi-heart"></i></button>
<button class="action-btn comment-btn"><i class="bi bi-chat"></i></button>
<button class="action-btn send-btn"><i class="bi bi-send"></i></button>
</div>
</div>



<div class="post">
<div class="post-header">
<img src="./img/logo revista thc.jpg" alt="Foto de perfil" class="profile-pic">
<span class="username">@RevistaTHC</span>
</div>
<p>Clon Factory, que así se presenta en sociedad, es “la primera empresa argentina destinada a la multiplicación y comercialización de clones legales en todo el país”</p>
<div class="post-content">
<div class="image-gallery">
<img src="./img/cultivo1.jpeg" alt="Imagen 1 del post" class="post-image" onclick="openImage(this)">
<img src="./img/cultivo2.jpeg" alt="Imagen 2 del post" class="post-image" onclick="openImage(this)">
<img src="./img/cultivo3.jpeg" alt="Imagen 3 del post" class="post-image" onclick="openImage(this)">
</div>
</div>
<div class="post-footer">
<button class="action-btn like-btn"><i class="bi bi-heart"></i></button>
<button class="action-btn comment-btn"><i class="bi bi-chat"></i></button>
<button class="action-btn send-btn"><i class="bi bi-send"></i></button>
</div>
<div class="post">
<div class="post-header">
<img src="./img/logo revista thc.jpg" alt="Foto de perfil" class="profile-pic">
<span class="username">@RevistaTHC</span>
</div>
<p>Clon Factory, que así se presenta en sociedad, es “la primera empresa argentina destinada a la multiplicación y comercialización de clones legales en todo el país”.</p>
<div class="post-content">
<div class="image-gallery">
<img src="./img/cultivo1.jpeg" alt="Imagen 1 del post" class="post-image" onclick="openImage(this)">
<img src="./img/cultivo2.jpeg" alt="Imagen 2 del post" class="post-image" onclick="openImage(this)">
<img src="./img/cultivo3.jpeg" alt="Imagen 3 del post" class="post-image" onclick="openImage(this)">
</div>
</div>
<div class="post-footer">
<button class="action-btn like-btn"><i class="bi bi-heart"></i></button>
<button class="action-btn comment-btn"><i class="bi bi-chat"></i></button>
<button class="action-btn send-btn"><i class="bi bi-send"></i></button>
</div>
</div>


<div class="post">
<div class="post-header">
<img src="./img/logo señora1" alt="Foto de perfil" class="profile-pic">
<span class="username">@NonnaCultiva</span>
</div>
<div class="post-content">
<p>Acompañame a probar la nueva cosecha!</p>
<div class="image-gallery">
<img src="./img/señora fumando.png" alt="Imagen 1 del post" class="post-image" onclick="openImage(this)">

</div>
</div>
<div class="post-footer">
<button class="action-btn like-btn"><i class="bi bi-heart"></i></button>
<button class="action-btn comment-btn"><i class="bi bi-chat"></i></button>
<button class="action-btn send-btn"><i class="bi bi-send"></i></button>
<div class="post">
<div class="post-header">
<img src="./img/logo señora1" alt="Foto de perfil" class="profile-pic">
<span class="username">@NonnaCultiva</span>
</div>
<div class="post-content">
<p>Acompañame a probar la nueva cosecha!</p>
<div class="image-gallery">
<img src="./img/señora fumando.png" alt="Imagen 1 del post" class="post-image" onclick="openImage(this)">
</div>
</div>
<div class="post-footer">
<button class="action-btn like-btn"><i class="bi bi-heart"></i></button>
<button class="action-btn comment-btn"><i class="bi bi-chat"></i></button>
<button class="action-btn send-btn"><i class="bi bi-send"></i></button>
</div>
</div>


<div class="post">
<div class="post-header">
<img src="./img/señora2.jpeg" alt="Foto de perfil" class="profile-pic">
<span class="username">@Susana_1960</span>
</div>
<div class="post-content">
<p>Happy</p>
<div class="image-gallery">
<img src="./img/señora2.jpeg" alt="Imagen 1 del post" class="post-image" onclick="openImage(this)">

</div>
</div>
<div class="post-footer">
<button class="action-btn like-btn"><i class="bi bi-heart"></i></button>
<button class="action-btn comment-btn"><i class="bi bi-chat"></i></button>
<button class="action-btn send-btn"><i class="bi bi-send"></i></button>
<div class="post">
<div class="post-header">
<img src="./img/señora2.jpeg" alt="Foto de perfil" class="profile-pic">
<span class="username">@Susana_1960</span>
</div>
<div class="post-content">
<p>Happy</p>
<div class="image-gallery">
<img src="./img/señora2.jpeg" alt="Imagen 1 del post" class="post-image" onclick="openImage(this)">
</div>
</div>
<div class="post-footer">
<button class="action-btn like-btn"><i class="bi bi-heart"></i></button>
<button class="action-btn comment-btn"><i class="bi bi-chat"></i></button>
<button class="action-btn send-btn"><i class="bi bi-send"></i></button>
</div>
</div>


<!-- Barra de navegación fija en la parte inferior -->
<!-- Barra de navegación fija en la parte inferior -->
<nav class="bottom-nav">
<a href="home.html" class="nav-item home">
<i class="bi bi-house"></i>
<span>Home</span>
</a>
<a href="comunidad.html" class="nav-item">
<a href="comunidad.html" class="nav-item community">
<i class="bi bi-people"></i>
<span>Comunidad</span>
</a>

<!-- Botón de nueva publicación -->
Expand All @@ -117,33 +104,35 @@
</div>
</a>


<a href="explorar.html" class="nav-item">
<a href="explorar.html" class="nav-item explorar">
<i class="bi bi-search"></i>
<span>Explorar</span>
</a>
<a href="perfil.html" class="nav-item profile">
<i class="bi bi-person"></i>
<span>Perfil</span>
</a>
</nav>


<!-- Footer -->
<!-- Footer -->
<footer class="page-footer">
<p>Copyright 2024 — CultiCann. All rights reserved.</p>
</footer>

<!-- Animación de carga -->
<div class="loader-container" style="display:none;">
<div class="loader">
<img src="./icons/loading-page1.png" class="loader-icon icon-1">
<img src="./icons/loading-page2.png" class="loader-icon icon-2">
<img src="./icons/loading-page3.png" class="loader-icon icon-3">
<img src="./icons/loading-page4.png" class="loader-icon icon-4">
</div>
</div>


<!-- Contenedor Modal -->
<!-- Contenedor Modal -->
<div id="imageModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="modalImage">
</div>



<script src="./javaScript/script.js"></script>
<script src="./javaScript/script.js"></script>
</body>
</html>
</html>
Binary file added icons/loading-page1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/loading-page2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/loading-page3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/loading-page4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions javaScript/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,3 +102,35 @@ document.addEventListener("DOMContentLoaded", function() {
lastScrollY = currentScrollY; // Actualiza la posición del scroll
});
});






/* --------------------------------------
LOADING-PAGE TRANSICION A LA CARGA DE PAGINA
--------------------------------------- */

// Mostrar loader al cambiar de página
function showLoader() {
document.querySelector('.loader-container').style.display = 'flex';
}

// Ocultar loader al terminar la carga de la página
window.addEventListener('load', function() {
document.querySelector('.loader-container').style.display = 'none';
});

// Simulación de cambio de página
document.querySelectorAll('.nav-item, .add-post').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
showLoader();

// Simula un cambio de página, sin esto NO hay tiempo de animacion
setTimeout(() => {
window.location.href = link.href;
}, 2000);
});
});
Loading

0 comments on commit 9747e1e

Please sign in to comment.