170 lines
6.6 KiB
PHP
170 lines
6.6 KiB
PHP
<?php
|
|
|
|
if (empty($_GET['icon']) || !preg_match("/^[\w\-]+$/", $_GET['icon'])) {
|
|
http_response_code(400);
|
|
exit;
|
|
}
|
|
|
|
$icon_name = strtolower($_GET['icon']);
|
|
$icon_dir = __DIR__."/icons";
|
|
$icon_path = "$icon_dir/$icon_name.svg";
|
|
$preview_dir = __DIR__."/preview";
|
|
$preview_path = "$preview_dir/$icon_name.png";
|
|
|
|
if (!is_file($icon_path)) {
|
|
http_response_code(404);
|
|
exit;
|
|
}
|
|
|
|
// generate facebook preview
|
|
if (!is_file($preview_path)) {
|
|
$image = new Imagick();
|
|
$image->setBackgroundColor(new ImagickPixel('#ffffff'));
|
|
$image->readImageBlob(file_get_contents($icon_path));
|
|
$image->setImageFormat("png24");
|
|
$image->setImageInterpolateMethod(Imagick::INTERPOLATE_INTEGER);
|
|
$image->resizeImage(180, 180, Imagick::FILTER_POINT, 1);
|
|
$image->borderImage('#ffffff', 510, 225);
|
|
$image->writeImage($preview_path);
|
|
$preview_mtime = time();
|
|
} else {
|
|
$preview_mtime = filemtime($preview_path);
|
|
}
|
|
|
|
// generate color palette
|
|
$palette = array();
|
|
$svg = file_get_contents($icon_path);
|
|
preg_match_all("/#([0-9a-fA-F]{6})/", $svg, $matches);
|
|
$palette = array_unique($matches[0]);
|
|
$palette = array_map('strtoupper', $palette);
|
|
|
|
// get tags
|
|
$icon_json = json_decode(file_get_contents(__DIR__ . "/icons.json"), true);
|
|
$tags = $icon_json[$icon_name . ".svg"];
|
|
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta property="og:title" content="<?= $icon_name ?> - Pixel Icons" />
|
|
<meta property="og:url" content="https://sqkhor.com/pixel-icons/<?= $icon_name ?>" />
|
|
<meta property="og:image" content="https://sqkhor.com/pixel-icons/preview/<?= $icon_name ?>.png?<?= $preview_mtime ?>" />
|
|
<meta property="og:description" content="This is a set of over 200 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
|
|
<title><?= $icon_name ?> - Pixel Icons</title>
|
|
<meta name="description" content="This is a set of over 200 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
|
|
<link rel="shortcut icon" href="./favicon.png" type="image/png" />
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5K34EE24W"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-S5K34EE24W');
|
|
</script>
|
|
<link rel="stylesheet" href="./assets/index.css">
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<header>
|
|
<a href="https://sqkhor.com/pixel-icons/" id="site-title-link">
|
|
<svg id="site-title" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 60"><path d="M40 30H10V10h30V0H0v60h10V40h40V10H40zM60 0h10v10H60zM60 20h10v40H60zM90 40h10v10H90zM90 20h10v10H90zM100 30h10v10h-10zM110 40h10v10h-10zM120 50h10v10h-10zM110 20h10v10h-10zM120 10h10v10h-10zM80 10h10v10H80zM80 50h10v10H80zM150 50h30v10h-30zM150 10h30v10h-30zM180 30h-30V20h-10v30h10V40h40V20h-10zM200 0h10v50h-10zM210 50h10v10h-10zM270 0h10v60h-10zM290 20h10v30h-10zM300 10h30v10h-30zM300 50h30v10h-30zM340 20h10v30h-10zM380 20h10v30h-10zM350 10h30v10h-30zM350 50h30v10h-30zM400 20h10v40h-10zM430 20h10v40h-10zM410 10h20v10h-20zM460 30h20v10h-20zM450 20h10v10h-10zM480 40h10v10h-10zM460 10h30v10h-30zM450 50h30v10h-30z"/></svg>
|
|
</a>
|
|
<div class="buttons">
|
|
<div class="pill"><a class="button" href="./download.php?icon=all" target="_blank">Download All</a></div>
|
|
<div class="pill"><a class="button" href="https://github.com/shuqikhor/pixel-icons" target="_blank">GitHub</a></div>
|
|
<div class="pill">
|
|
<button class="button" id="btn-theme">
|
|
<img class="theme-icon" src="./icons/sun.svg" alt="Light">
|
|
<img class="theme-icon" src="./icons/moon.svg" alt="Dark">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div id="icon-details">
|
|
<h2 id="icon-title"><?= $icon_name ?></h2>
|
|
|
|
<a href="https://sqkhor.com/pixel-icons/download.php?icon=<?= $icon_name ?>.svg" target="_blank"><img id="icon-preview" src="https://sqkhor.com/pixel-icons/icons/<?= $icon_name ?>.svg"></a>
|
|
<div id="icon-actions">
|
|
<div class="pill"><a class="button" href="https://sqkhor.com/pixel-icons/download.php?icon=<?= $icon_name ?>.svg" target="_blank">Download</a></div>
|
|
<div class="pill"><a class="button" href="https://sqkhor.com/pixel-icons/">Back</a></div>
|
|
</div>
|
|
<div id="icon-palette">
|
|
Colour Palette:
|
|
<ul>
|
|
<?php foreach ($palette as $color): ?>
|
|
<li data-color="<?= $color ?>">
|
|
<div class="color-box" style="background-color: <?= $color ?>;"></div>
|
|
<div class="color-code"><?= $color ?></div>
|
|
</li>
|
|
<?php endforeach ?>
|
|
</ul>
|
|
</div>
|
|
<div id="color-copied">
|
|
Colour code copied!
|
|
</div>
|
|
<script>
|
|
document.querySelectorAll("#icon-palette li").forEach(el => {
|
|
el.addEventListener('click', function (e) {
|
|
const to_copy = el.dataset.color;
|
|
const hidden_input = document.createElement('input');
|
|
document.body.appendChild(hidden_input)
|
|
hidden_input.value = to_copy
|
|
hidden_input.select();
|
|
document.execCommand('copy',false);
|
|
hidden_input.remove();
|
|
|
|
const notification = document.querySelector('#color-copied');
|
|
notification.style.animation = 'none';
|
|
notification.offsetHeight; /* trigger reflow */
|
|
notification.style.animation = "flash 1s forwards";
|
|
});
|
|
})
|
|
</script>
|
|
<div id="icon-tags">
|
|
Tags:
|
|
<ul>
|
|
<?php foreach ($tags as $tag): ?>
|
|
<li>
|
|
<div class="pill">
|
|
<a class="button" href="https://sqkhor.com/pixel-icons/#<?= $tag ?>">
|
|
<?= $tag ?>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<?php endforeach ?>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<p>
|
|
Made by <a href="https://sqkhor.com" target="_blank">Shuqi Khor</a>
|
|
<br>Please follow <a href="https://www.facebook.com/9x9.pixel.icons" target="_blank">Pixel Icons Facebook Page</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
let light = true;
|
|
if (document.cookie.indexOf('theme=') !== -1) {
|
|
const themeCode = document.cookie.substr(document.cookie.indexOf('theme=') + 6, 1);
|
|
light = themeCode==1?true:false;
|
|
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
//OS theme setting detected as dark
|
|
light = false;
|
|
}
|
|
|
|
document.documentElement.dataset.theme = light ? 'light' : 'dark';
|
|
|
|
document.querySelector('#btn-theme').addEventListener('click', e => {
|
|
light = !light;
|
|
document.cookie = `theme=${light?1:0}; expires=Thu, 31 Dec 2100 00:00:00 UTC; path=/pixel-icons`;
|
|
document.documentElement.dataset.theme = light ? 'light' : 'dark';
|
|
});
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|