146 lines
5.2 KiB
PHP
146 lines
5.2 KiB
PHP
<!--?php
|
||
ini_set('display_errors', 1);
|
||
ini_set('display_startup_errors', 1);
|
||
error_reporting(E_ALL);
|
||
?-->
|
||
<!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
|
||
$imagetimes = Array();
|
||
|
||
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);
|
||
}
|
||
|
||
function imagetime($file) { // This needs to return a Unix timestamp.
|
||
global $imagetimes;
|
||
if(!$imagetimes[$file]) {
|
||
$imagetimes[$file] = filemtime($file);
|
||
}
|
||
return $imagetimes[$file];
|
||
}
|
||
|
||
$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 imagetime("$b") - imagetime("$a");
|
||
});
|
||
|
||
$datecounts = array();
|
||
foreach($images as $im) { // Generate list of dates and how many images have them
|
||
$mt = date("Y-m-d", imagetime("$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", imagetime("$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>
|