import

JasonEleventeen · May 30, 2024 · 1d054c0 · 1d054c0
commit 1d054c0
Show file tree

Hide file tree

Showing 25 changed files with 162 additions and 0 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,7 @@
+services:
+  nginx:
+    image: nginx
+    volumes:
+      - ./:/usr/share/nginx/html/
+    ports:
+      - "8080:80"
diff --git a/images/11/1.jpeg b/images/11/1.jpeg
diff --git a/images/11/10.jpeg b/images/11/10.jpeg
diff --git a/images/11/11.jpeg b/images/11/11.jpeg
diff --git a/images/11/12.jpeg b/images/11/12.jpeg
diff --git a/images/11/13.jpeg b/images/11/13.jpeg
diff --git a/images/11/14.jpeg b/images/11/14.jpeg
diff --git a/images/11/15.jpeg b/images/11/15.jpeg
diff --git a/images/11/16.jpeg b/images/11/16.jpeg
diff --git a/images/11/17.jpeg b/images/11/17.jpeg
diff --git a/images/11/18.jpeg b/images/11/18.jpeg
diff --git a/images/11/19.jpeg b/images/11/19.jpeg
diff --git a/images/11/2.jpeg b/images/11/2.jpeg
diff --git a/images/11/20.jpeg b/images/11/20.jpeg
diff --git a/images/11/3.jpeg b/images/11/3.jpeg
diff --git a/images/11/4.jpeg b/images/11/4.jpeg
diff --git a/images/11/5.jpeg b/images/11/5.jpeg
diff --git a/images/11/6.jpeg b/images/11/6.jpeg
diff --git a/images/11/7.jpeg b/images/11/7.jpeg
diff --git a/images/11/8.jpeg b/images/11/8.jpeg
diff --git a/images/11/9.jpeg b/images/11/9.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Base-bones HTML5</title>
+    <link rel="shortcut icon" href="favicon.ico">
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body class="center">
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>    
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>
+    <div class="img-11"><div class="hidden"></div></div>
+    <noscript>
+    </noscript>
+
+  </body>
+  <script src="script.js"></script>
+
+</html>
diff --git a/nginx.conf b/nginx.conf
@@ -0,0 +1,17 @@
+events { worker_connections 1024; }
+
+http {
+
+    upstream app_servers {    # Create an upstream for the web servers
+        server server1:80;    # the first server
+        server server2:80;    # the second server
+    }
+
+    server {
+        listen 80;
+
+        location / {
+            proxy_pass         http://app_servers;  # load balance the traffic
+        }
+    }
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,68 @@
+/* Randomize array in-place using Durstenfeld shuffle algorithm */
+function shuffleArray(array) {
+    for (var i = array.length - 1; i > 0; i--) {
+        var j = Math.floor(Math.random() * (i + 1));
+        var temp = array[i];
+        array[i] = array[j];
+        array[j] = temp;
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function(){
+
+    const maxImage = 20;
+
+    const img11 = [...document.querySelectorAll('.img-11')];
+
+    function getOptions(){
+        let options = Array.from(Array(maxImage).keys());
+        options.shift(); // remove zero
+        shuffleArray(options);
+        return options;
+    }
+
+    let options = getOptions();
+;
+    // preload all images
+    options.forEach((option) => {
+        const img = new Image();
+        img.src = `./images/11/${options[0]}.jpeg`;
+    });
+
+    // set initial images
+    for(let i = 0; i < img11.length; i++){
+        img11[i].style.backgroundImage = `url(./images/11/${options[i]}.jpeg)`;
+        const hidden = img11[i].childNodes[0];
+        hidden.classList.add('show');
+    }
+
+    function animate(){
+
+        // select random tile
+        const tile = Math.floor(Math.random() * img11.length);
+
+        let options = getOptions();
+
+        // filter out the already shown images to avoid duplicates
+        const existing = img11.map((img) => parseInt(img.style.backgroundImage.split('.jpeg')[0].split('11/')[1]));
+        options = options.filter((option) => !existing.includes(option));
+
+        // animate the tile
+        const hidden = img11[tile].childNodes[0];
+
+        hidden.addEventListener('transitionend', function() {
+            this.removeEventListener('transitionend',arguments.callee, false);
+
+            img11[tile].style.backgroundImage = `url(./images/11/${options[0]}.jpeg)`;
+            hidden.classList.add('show');
+
+            setTimeout(animate, 1000);
+
+        }, false);
+
+        hidden.classList.remove('show');
+    }
+
+    setTimeout(animate, 1000);
+
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,38 @@
+html, body{
+    height: 100%;
+    width: 100%;
+    margin: 0px 0px 0px 0px;
+    padding: 0px 0px 0px 0px;
+    background-color: white;
+}
+
+.center{
+    display: grid;
+    justify-content: center;
+    align-content: center;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(4, 3fr);
+    height: 100vh;
+    max-width: 70vh;
+    margin: auto;
+    box-sizing: border-box;
+}
+
+.center > div {
+   background-image: url(./images/11/1.jpeg);
+   background-size: cover;
+   background-position: center;
+}
+
+
+div.hidden {
+    opacity: 1;
+    transition: opacity 0.6s linear;
+    background-color: lightgray;
+    width:100%;
+    height: 100%;
+}
+
+.show {
+    opacity: 0 !important;
+ }