132 lines
4.8 KiB
PHP
132 lines
4.8 KiB
PHP
|
<!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>
|