Added Illusions page

isetbio · Aug 6, 2024 · 96b2bda · 96b2bda
1 parent 7820d84
commit 96b2bda
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 138 deletions.
diff --git a/docs/css/main.css b/docs/css/main.css
@@ -29,6 +29,44 @@ svg {
   border: 1px solid #ccc;
 }
 
+.image-container {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 10px; /* Adjust padding as necessary */
+}
+.image-container img {
+  max-width: 100%;
+  max-height: 100%;
+  transition: transform 0.3s ease, filter 0.3s ease;
+}
+.image-container:hover img {
+  transform: scale(1.1);
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.3s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 1.5rem;
+  text-align: center;
+  opacity: 0;
+}
+.image-container:hover .overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 1;
+}
+
 
 .flex-container {
   display: flex;

diff --git a/docs/css/styles.css b/docs/css/styles.css
@@ -1165,6 +1165,15 @@ table thead + tbody{
   font-size: 1.8rem;
 }
 
+.select{
+  display: block;
+  border-color: #D5D5D4;
+  color: #2E2D29;
+  font-size: 1.8rem;
+  line-height: 1.3;
+  background-color: #fff;
+}
+
 .centered-container, .cc{
   padding-left: 20px;
   padding-right: 20px;
@@ -1291,6 +1300,16 @@ table thead + tbody{
   }
 }
 
+.caption, .credits{
+  font-size: max(1.6rem, 0.9em);
+  line-height: 1.3;
+  color: #53565A;
+}
+
+.caption{
+  margin-top: 0.4em;
+}
+
 .basefont-20{
   font-size: 1.8rem;
 }
@@ -1319,6 +1338,14 @@ table thead + tbody{
   border-width: 0;
 }
 
+.absolute{
+  position: absolute;
+}
+
+.relative{
+  position: relative;
+}
+
 .my-5{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1332,6 +1359,10 @@ table thead + tbody{
   margin-bottom: 0.2rem;
 }
 
+.mb-4{
+  margin-bottom: 0.4rem;
+}
+
 .mb-5{
   margin-bottom: 0.5rem;
 }
@@ -1360,14 +1391,26 @@ table thead + tbody{
   display: table;
 }
 
+.hidden{
+  display: none;
+}
+
 .w-full{
   width: 100%;
 }
 
+.w-100{
+  width: 10rem;
+}
+
 .grow{
   flex-grow: 1;
 }
 
+.transform{
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .flex-row{
   flex-direction: row;
 }
@@ -1393,11 +1436,6 @@ table thead + tbody{
   padding: 0;
 }
 
-.px-5{
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .py-5{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1448,6 +1486,18 @@ table thead + tbody{
   text-decoration-line: none;
 }
 
+.filter{
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition{
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 250ms;
+}
+
 html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -1462,6 +1512,49 @@ svg {
   border: 1px solid #ccc;
 }
 
+.image-container {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 10px;
+  /* Adjust padding as necessary */
+}
+
+.image-container img {
+  max-width: 100%;
+  max-height: 100%;
+  transition: transform 0.3s ease, filter 0.3s ease;
+}
+
+.image-container:hover img {
+  transform: scale(1.1);
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.3s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 1.5rem;
+  text-align: center;
+  opacity: 0;
+}
+
+.image-container:hover .overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 1;
+}
+
 .flex-container {
   display: flex;
   align-items: center;

diff --git a/docs/illusions.html b/docs/illusions.html
@@ -5,7 +5,7 @@
 <head>
     <meta charset="utf-8" />
     <title>ISET Info</title>
-    <base href="https://isetbio.github.io/isetfundamentals/">
+
 
     <!--Import FAVICON (with code loading)-->
     <script src="js/HTMLImporter.js"></script>
@@ -25,6 +25,9 @@
     <!--Import FONTS-->
     <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
     <script type="text/javascript">WebFont.load({ google: { families: ["Sen:regular,700,800"] } });</script>
+
+    <!--Load Interactive Modals-->
+    <script src="js/bigImage.js"></script>
 </head>
 
 <body>
@@ -34,17 +37,35 @@
     <div class="hero-section"></div>
 
     <!--Page Content-->
-    <div class="row py-5" >
-        <div class="col">
-
+    <div class="container-fluid mt-5">
+        <div class="row" id="image-grid">
+            <!-- Images will be inserted here by JavaScript -->
+        </div>
+    </div>
+
+    <!-- Modal -->
+    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body text-center">
+                    <img id="modalImage" src="" alt="Modal Image" class="img-fluid">
+                </div>
+                <div class="modal-footer">
+                    <p id="modalCaption" class="text-center w-100"></p>
+                </div>
+            </div>
         </div>
     </div>
 
 
     <!--Footer Content-->
     <div id="idfooter-placeholder"></div>
 
-
+    
 </body>
 
 </html>
diff --git a/docs/interactives copy.html b/docs/interactives copy.html