Initial commit of website contents

1 files changed, 131 insertions, 0 deletions

diff --git a/art/index.php b/art/index.php
new file mode 100644
index 0000000..ae7da21
--- /dev/null
+++ b/art/index.php
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <?php
+      $siteurl = $_SERVER['HTTP_HOST'];
+      if($siteurl == "deeptwisty.com") {
+        echo '<link rel="icon" type="image/x-icon" href="../favicon.ico"><title>deep twisty official NFTs</title><style>@font-face { font-family: "Ubuntu"; src: url(../ubuntu.ttf); } :root { --stdfont: "Ubuntu", Century Gothic,CenturyGothic,AppleGothic,sans-serif; } </style>';
+      } elseif($siteurl == "isopod.cool") {
+        echo '<link rel="icon" type="image/x-icon" href="../../favicon.ico"><title>niceopod official NFTs</title><style>:root { --stdfont: mono, monospace; } </style>';
+      }
+    ?>
+    <style>
+      :root {
+        --shadowcolor: #00000099;
+        --imagesperrow: 4;
+      }
+      body {
+        font-family: var(--stdfont);
+        margin: 0;
+        padding: 0;
+        background: #202020;
+        width: 100vw;
+        overflow-x: hidden;
+      }
+      .flex-container {
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden;
+        display: flex; 
+        flex-wrap: wrap;
+      }
+
+      @media (max-width: 1200px) {
+        :root {
+          --imagesperrow: 3;
+        }
+      }
+      @media (max-width: 800px) {
+        :root {
+          --imagesperrow: 2;
+        }
+      }
+
+      a {
+        height: calc(100vw / var(--imagesperrow));
+        width: calc(100vw / var(--imagesperrow));
+        color: transparent;
+        text-decoration: none;
+        background-position: center;
+        background-size: 100%;
+        padding: 2rem;
+        transition-duration: 0.5s;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: 0 0 0 0 var(--shadowcolor) inset;
+      }
+      a span {
+        text-align: center;
+      }
+      input[type="checkbox"]:checked + label a {
+        --shadowcolor: #000000ef;
+      }
+      a:hover, input[type="checkbox"]:checked + label a {
+        color: white;
+        background-size: 115%;
+        /*box-shadow: 0 calc(100vw / var(--imagesperrow)) 0 0 var(--shadowcolor) inset;*/
+        box-shadow: 0 0 0 calc(100vw / var(--imagesperrow) / 2) var(--shadowcolor) inset;
+      }
+      .caption {
+        padding: 10px;
+        padding-top: 6px;
+        height: 100%;
+        border-bottom-right-radius: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flex-container">
+      <?php
+        function test_image($name) { // Returns true if a file is an image (png or gif), false otherwise
+          return (strpos($name, ".png") > 0 or strpos($name, ".gif") > 0);
+        }
+
+        $images = array_filter(scandir("."), "test_image"); // Generate array of every image in the directory by filename
+
+        usort($images, function($a, $b) { // Sort images by modification date of the files
+          return filemtime("$b") - filemtime("$a");
+        });
+        
+        $datecounts = array();
+        foreach($images as $im) { // Generate list of dates and how many images have them
+          $mt = date("Y-m-d", filemtime("$im")); // File modification date in ISO format
+          if($datecounts[$mt]) {
+            $datecounts[$mt]++;
+          } else {
+            $datecounts[$mt] = 1;
+          }
+        }
+
+        $pmt = $mt;
+        foreach($images as $im) { // Loops through each image and echoes it to the page
+
+          $no = substr($im, 0, strpos($im, ".")); // Filename with extension stripped
+          $mt = date("Y-m-d", filemtime("$im")); // File modification date in ISO format
+          $is = getimagesize("$im");
+          $ist = $is[0] . "×" . $is[1] . "px"; // Image size formatted as X×Ypx
+          
+          $cl = "";
+          if($datecounts[$mt] > 1) { // If there's more than one image published on the same date, merge them into a single thumbnail that can be clicked to reveal the full set. Would have done this based on names, but that would have been much harder. Might do that later.
+            if($pmt != $mt) {
+              echo "<style>.d$mt { display: none; } #show$mt:checked ~ .d$mt { display: flex; } #show$mt + label:hover a { cursor: pointer; }</style><input type='checkbox' style='display: none;' id='show$mt'></input>";
+              $tn = $no;
+              if(file_exists("thumbs/$mt.png")) { // Use the same image for the group thumbnail as the first image in the group. If there's a thumbnail named with the date in question, use that instead.
+                $tn = $mt;
+              }
+              echo "<label for='show$mt'><a style='background-image:url(thumbs/$tn.png);'><span>...</span></a></label>";
+              $pmt = $mt;
+            }
+            $cl = " class='d$mt'";
+          }
+
+          echo "<a href='$im' style='background-image:url(thumbs/$no.png);'$cl><span>$im<br>$mt • $ist</span></a>";
+        }
+      ?>
+    </div>
+  </body>
+</html>