From ed50ee3f8526af75452c293673d5e034771df067 Mon Sep 17 00:00:00 2001
From: Herminio-DESK <herminiopaucar@gmail.com>
Date: Sat, 2 Sep 2023 16:34:11 -0300
Subject: [PATCH 1/2] upload popup

---
 about-project.html    | 62 +++++++++++++++++++++++++++----
 assets/css/popup.css  | 47 ++++++++++++++++++++++++
 assets/css/popup2.css | 85 +++++++++++++++++++++++++++++++++++++++++++
 assets/js/popup.js    | 14 +++++++
 assets/js/popup2.js   | 23 ++++++++++++
 5 files changed, 224 insertions(+), 7 deletions(-)
 create mode 100644 assets/css/popup.css
 create mode 100644 assets/css/popup2.css
 create mode 100644 assets/js/popup.js
 create mode 100644 assets/js/popup2.js
diff --git a/about-project.html b/about-project.html
index 4729ccb..fe17764 100644
--- a/about-project.html
+++ b/about-project.html
@@ -10,7 +10,9 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<link rel="stylesheet" href="assets/css/main.css" /> 
-<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" /> 
+		<link rel="stylesheet" href="assets/css/popup2.css" /> 
+		<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" /> 
+
 	</head>
 	<body class="is-preload">
 		<div id="page-wrapper">
@@ -55,9 +57,15 @@ <h4>1006 room</h4>
 									<span class="image fit"><img width="100%" src="images/icmc_lasdpc_lab_1006.png" alt="" /></span>
 									<div class="box alt">
 										<div class="row gtr-50 gtr-uniform">
-											<div class="col-4"><span class="image fit"><img src="images/lab-images/lasdpc_1006_1.jpg" alt="" /></span></div>
-											<div class="col-4"><span class="image fit"><img src="images/lab-images/lasdpc_1006_2.jpg" alt="" /></span></div>
-											<div class="col-4"><span class="image fit"><img src="images/lab-images/lasdpc_1006_3.jpg" alt="" /></span></div>
+											<div class="col-4"><span class="image fit popun">
+												<img src="images/lab-images/lasdpc_1006_1.jpg" alt="Lab 1006" />
+											</span></div>
+											<div class="col-4"><span class="image fit popun">
+												<img src="images/lab-images/lasdpc_1006_2.jpg" alt="Lab 1006" />
+											</span></div>
+											<div class="col-4"><span class="image fit popun">
+												<img src="images/lab-images/lasdpc_1006_3.jpg" alt="Lab 1006" />
+											</span></div>
 										</div>
 									</div>
 								
@@ -67,9 +75,21 @@ <h4>1008 room</h4>
 									<span class="image fit"><img src="images/icmc_lasdpc_lab_1008.png" alt="" /></span>
 									<div class="box alt">
 										<div class="row gtr-50 gtr-uniform">
-											<div class="col-4"><span class="image fit"><img src="images/lab-images/lasdpc_1008_1.jpg" alt="" /></span></div>
-											<div class="col-4"><span class="image fit"><img src="images/lab-images/lasdpc_1008_2.jpg" alt="" /></span></div>
-											<div class="col-4"><span class="image fit"><img src="images/lab-images/lasdpc_1008_3.jpg" alt="" /></span></div>
+											<div class="col-4">
+												<span class="image fit popun">
+													<img src="images/lab-images/lasdpc_1008_1.jpg" alt="Lab 1008" />
+												</span>
+											</div>
+											<div class="col-4">
+												<span class="image fit popun">
+													<img src="images/lab-images/lasdpc_1008_2.jpg" alt="Lab 1008" />
+												</span>
+											</div>
+											<div class="col-4">
+												<span class="image fit popun">
+													<img src="images/lab-images/lasdpc_1008_3.jpg" alt="Lab 1008" />
+												</span>
+											</div>
 										</div>
 									</div>
 
@@ -79,6 +99,30 @@ <h4>1008 room</h4>
 					</div>
 				</section>
 
+
+<!-- The Modal -->
+<div id="myModal" class="modal">
+  <span class="close">&times;</span>
+  <img id="img01" class="modal-content">
+  <div id="caption"></div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 			<!-- Footer -->
 			<footer id="footer">
 					<ul class="icons">
@@ -97,6 +141,7 @@ <h4>1008 room</h4>
 		</div>
 
 		<!-- Scripts -->
+
 			<script src="assets/js/jquery.min.js"></script>
 			<script src="assets/js/jquery.dropotron.min.js"></script>
 			<script src="assets/js/jquery.scrollex.min.js"></script>
@@ -104,6 +149,9 @@ <h4>1008 room</h4>
 			<script src="assets/js/breakpoints.min.js"></script>
 			<script src="assets/js/util.js"></script>
 			<script src="assets/js/main.js"></script>
+			<script src="assets/js/popup2.js"></script>
+
+			<script></script>
 
 	</body>
 </html>
\ No newline at end of file
diff --git a/assets/css/popup.css b/assets/css/popup.css
new file mode 100644
index 0000000..6cbcd6e
--- /dev/null
+++ b/assets/css/popup.css
@@ -0,0 +1,47 @@
+.popup{
+    width: 900px;
+    margin: auto;
+    text-align: center;
+}
+.popup img{
+    width: 200px;
+    height: 200px;
+    cursor: pointer;
+}
+.show{
+    z-index: 999;
+    display: none;
+}
+.show .overlay{
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,.66);
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.show .img-show{
+    width: 600px;
+    height: 400px;
+    background: #FFF;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    overflow: auto;
+}
+.img-show span{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 99;
+    cursor: pointer;
+}
+.img-show img{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+/*End style*/
diff --git a/assets/css/popup2.css b/assets/css/popup2.css
new file mode 100644
index 0000000..87fabe8
--- /dev/null
+++ b/assets/css/popup2.css
@@ -0,0 +1,85 @@
+.popun img {    
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.popun img:hover {opacity: 0.7;}
+
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+}
+
+/* Modal Content (image) */
+.modal-content {
+  margin: auto;
+  display: block;
+  width: 80%;
+  max-width: 850px;
+}
+
+/* Caption of Modal Image */
+#caption {
+  margin: auto;
+  display: block;
+  width: 80%;
+  max-width: 700px;
+  text-align: center;
+  color: #ccc;
+  padding: 10px 0;
+  height: 150px;
+}
+
+/* Add Animation */
+.modal-content, #caption {  
+  -webkit-animation-name: zoom;
+  -webkit-animation-duration: 0.4s;
+  animation-name: zoom;
+  animation-duration: 0.4s;
+}
+
+@-webkit-keyframes zoom {
+  from {-webkit-transform:scale(0)} 
+  to {-webkit-transform:scale(1)}
+}
+
+@keyframes zoom {
+  from {transform:scale(0)} 
+  to {transform:scale(1)}
+}
+
+/* The Close Button */
+.close {
+  position: absolute;
+  top: 100px;
+  right: 35px;
+  color: #f1f1f1;
+  font-size: 40px;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+.close:hover,
+.close:focus {
+  color: #bbb;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* 100% Image Width on Smaller Screens */
+@media only screen and (max-width: 700px){
+  .modal-content {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/assets/js/popup.js b/assets/js/popup.js
new file mode 100644
index 0000000..05b5f6f
--- /dev/null
+++ b/assets/js/popup.js
@@ -0,0 +1,14 @@
+$(function () {
+    "use strict";
+    
+    $(".popup img").click(function () {
+        var $src = $(this).attr("src");
+        $(".show").fadeIn();
+        $(".img-show img").attr("src", $src);
+    });
+    
+    $("span, .overlay").click(function () {
+        $(".show").fadeOut();
+    });
+    
+});
\ No newline at end of file
diff --git a/assets/js/popup2.js b/assets/js/popup2.js
new file mode 100644
index 0000000..11c6b7d
--- /dev/null
+++ b/assets/js/popup2.js
@@ -0,0 +1,23 @@
+// Get the modal
+var modal = document.getElementById("myModal");
+
+// Get the image and insert it inside the modal - use its "alt" text as a caption
+var modalImg = document.getElementById("img01");
+var captionText = document.getElementById("caption");
+//Get img src values
+$(".popun img").click(function () {    
+    modal.style.display = "block";
+    modalImg.src = this.src;
+    captionText.innerHTML = this.alt;
+});
+
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() { 
+  modal.style.display = "none";
+}
+
+

From d2c947d2641661b8202550945cf52370ca7356e1 Mon Sep 17 00:00:00 2001
From: Herminio-DESK <herminiopaucar@gmail.com>
Date: Sat, 2 Sep 2023 17:35:49 -0300
Subject: [PATCH 2/2] upload popun

---
 about-project.html                   | 4 ++--
 assets/css/{popup2.css => popun.css} | 0
 assets/js/{popup2.js => popun.js}    | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename assets/css/{popup2.css => popun.css} (100%)
 rename assets/js/{popup2.js => popun.js} (100%)

diff --git a/about-project.html b/about-project.html
index fe17764..2e1d6ac 100644
--- a/about-project.html
+++ b/about-project.html
@@ -10,7 +10,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<link rel="stylesheet" href="assets/css/main.css" /> 
-		<link rel="stylesheet" href="assets/css/popup2.css" /> 
+		<link rel="stylesheet" href="assets/css/popun.css" /> 
 		<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" /> 
 
 	</head>
@@ -149,7 +149,7 @@ <h4>1008 room</h4>
 			<script src="assets/js/breakpoints.min.js"></script>
 			<script src="assets/js/util.js"></script>
 			<script src="assets/js/main.js"></script>
-			<script src="assets/js/popup2.js"></script>
+			<script src="assets/js/popun.js"></script>
 
 			<script></script>
 
diff --git a/assets/css/popup2.css b/assets/css/popun.css
similarity index 100%
rename from assets/css/popup2.css
rename to assets/css/popun.css
diff --git a/assets/js/popup2.js b/assets/js/popun.js
similarity index 100%
rename from assets/js/popup2.js
rename to assets/js/popun.js
