WaiYanMyintMo/index.php

## index.php
<?php

/*
Instructions
https://gist.github.com/Stiles-X/1113a7becc3937d47ff906553a1f56f2

Install PHP. Tested on PHP 7.4
Place this file "index.php" inside folder with images
Open command line inside the folder with images and type `php -S localhost:8010`
Go to browser and visit http://localhost:8010
Profit

Note, you can replace 8010 with another number as you like. For example 42069.

Alternatively, put the script somewhere you like.
Open command line inside the folder and type `php -S localhost:42069`
Go to browser and visit http://localhost:42069?dir=C:\MyImageStash
This way is a little slower to load, but easier to use for many folders :D

*/

// the whole web root shenanigan is because I can use simple src for things inside it, however will need
// extra care for files outside it

$inside_web_root = true;
$directory = __DIR__;
$directory_realpath = __DIR__;

function os_slash_path($path) {
    return str_replace('/', DIRECTORY_SEPARATOR,
        str_replace('\\', DIRECTORY_SEPARATOR,
            $path));
}

function url_slash_path($path) { return str_replace('\\', '/', $path); }

function is_useless_dot_path($path) {
    // returns if path is "." or ".." paths;
    // Returns true if (path is "." or "..") or path ends with "/." or "/.." or "\." or "\.."

    $strlen = strlen($path);

    if ($path === '.') return true;
    if ($strlen < 2) return false;
    if ($path[-1] !== ".") return false;
    if ($path === ".." || $path[-2] === DIRECTORY_SEPARATOR) return true;
    if ($strlen < 3 || $path[-2] !== ".") return false;
    return $path[-3] === DIRECTORY_SEPARATOR;
    // clever code is my domain. I "optimized" this
}

function is_inside_dir_recursive($needle_path, $haystack_pack) {
    // haystack itself is also counted
    $needle_path = realpath($needle_path);
    $haystack_pack = realpath($haystack_pack);

    // finding needlemo

    if ($needle_path === $haystack_pack) return true;

    $recursiveDirectoryIterator = new RecursiveDirectoryIterator($haystack_pack);
    $iterator = new RecursiveIteratorIterator($recursiveDirectoryIterator, RecursiveIteratorIterator::SELF_FIRST );


    foreach ( $iterator as $path ) {
        $pathname = $path->getRealpath();
        // skipped paths
        $ignored_strpos_paths = ['.git', '.idea'];
        foreach ($ignored_strpos_paths as $ignored_strpos_path) {
            if (strpos($pathname, $ignored_strpos_path) !== false) {
                continue 2;  // outer for loop
            }
        }

        if ($path->isDir()) {
            if(is_useless_dot_path($pathname)) continue;
            if($pathname === $needle_path) return true;
        }
    }
    return false;
}

if (isset($_GET['dir'])) {
    $realpath = realpath($_GET['dir']);
    if ($realpath !== false && is_dir($realpath)) {
        $directory = os_slash_path($_GET['dir']);
        $directory_realpath = $realpath;
        $webroot = os_slash_path($_SERVER['DOCUMENT_ROOT']);
        $webroot_realpath = realpath($webroot);

        if (strpos($webroot, $directory) === false) {
            $inside_web_root = false;
        } else {
            $inside_web_root = is_inside_dir_recursive($directory, $webroot);
        }
    }
}

$title = basename($directory);

function sorted_scan_dir_for_files($path) {
    $paths = [];
    foreach (new DirectoryIterator($path) as $file) {
        if ($file->isFile()) {
            if (in_array(strtolower($file->getExtension()), ['jpg', 'jpeg', 'png'])) {
                $paths[] = $file->getFilename();
            }
        }
    }
    return $paths;
}

?>
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

    body {
        line-height: 1.6;
        font-size: 18px;
        background-color: #222222/*/#36393E*/;
        color: #FEFEFE;
        font-family: Arial, sans-serif, "Times New Roman", serif;
        text-align: center;
    }

    #body {
        margin: 5px auto;
        padding: 0 10px;

        width: auto;
        min-width: 70%;
    }

    /* using resolution instead of device-width because firefox is a zooming little boy */
    @media (min-device-width: 660px ), (min-resolution: 240dpi) {
        #body {
            width: 576px;
            max-width: 659px;
            min-width: unset;
        }
        /*body { background-color: blue; }*/

        @media (min-width: 766px) {
            #body {
                width: 672px;
                max-width: 765px;
            }
            /*body { background-color: black; }*/
        }

        @media (min-width: 960px) {
            #body {
                width: 864px;
                max-width: 959px;
            }
            /*body { background-color: yellow; }*/
        }
    }

    .image {
        height: auto;
        width: 100%;

        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;

        margin-top: 7.5%;
        margin-bottom: 7.5%;

        align-items: center;
    }

    .label { margin: 1em; }

    img {
        height: auto;
        width: 100%;
        /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
        box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.5), 0 0.75em 2.5em 0 rgba(0, 0, 0, 0.19);
    }

    .header {
        margin: 2.5em;
    }

    .header > h1, .header > p {
        line-height: 0.8;
    }

    .index-links p {
        line-height: 1;
    }

    h1,h2,h3 {
        line-height: 1.2;
    }

    /* unvisited link */
    a:link {
        color: lightsteelblue;
    }

    /* visited link */
    a:visited {
        color: deeppink;
    }

    /* mouse over link */
    a:hover {
        background: linear-gradient(90deg,darkorange,deeppink);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* selected link */
    a:active {
        color: deepskyblue;
    }

</style>
<title><?=$title?></title>
<div id="body">
    <div class="header">
        <h1 id='title'><?=$title?></h1>
    </div>
    <?php
    foreach (sorted_scan_dir_for_files($directory) as $filename) {
        if ($inside_web_root) {
            $webroot_path = str_replace($webroot, "", $directory);
            $path = url_slash_path($webroot_path . '/' . $filename);
        } else {
            $b64image = base64_encode(file_get_contents($directory . DIRECTORY_SEPARATOR . $filename));
            $path = "data:image/png;base64,$b64image";
        }
        ?>
        <div class="image">
            <span class="label">
                Image <?=$filename?>
            </span>
            <img src="<?=$path?>" alt="<?=$title?> <?=$filename?>"/>
        </div>
    <?php } ?>
</div>
	<?php

	/*
	Instructions
	https://gist.github.com/Stiles-X/1113a7becc3937d47ff906553a1f56f2

	Install PHP. Tested on PHP 7.4
	Place this file "index.php" inside folder with images
	Open command line inside the folder with images and type `php -S localhost:8010`
	Go to browser and visit http://localhost:8010
	Profit

	Note, you can replace 8010 with another number as you like. For example 42069.

	Alternatively, put the script somewhere you like.
	Open command line inside the folder and type `php -S localhost:42069`
	Go to browser and visit http://localhost:42069?dir=C:\MyImageStash
	This way is a little slower to load, but easier to use for many folders :D

	*/

	// the whole web root shenanigan is because I can use simple src for things inside it, however will need
	// extra care for files outside it

	$inside_web_root = true;
	$directory = __DIR__;
	$directory_realpath = __DIR__;

	function os_slash_path($path) {
	return str_replace('/', DIRECTORY_SEPARATOR,
	str_replace('\\', DIRECTORY_SEPARATOR,
	$path));
	}

	function url_slash_path($path) { return str_replace('\\', '/', $path); }

	function is_useless_dot_path($path) {
	// returns if path is "." or ".." paths;
	// Returns true if (path is "." or "..") or path ends with "/." or "/.." or "\." or "\.."

	$strlen = strlen($path);

	if ($path === '.') return true;
	if ($strlen < 2) return false;
	if ($path[-1] !== ".") return false;
	if ($path === ".." \|\| $path[-2] === DIRECTORY_SEPARATOR) return true;
	if ($strlen < 3 \|\| $path[-2] !== ".") return false;
	return $path[-3] === DIRECTORY_SEPARATOR;
	// clever code is my domain. I "optimized" this
	}

	function is_inside_dir_recursive($needle_path, $haystack_pack) {
	// haystack itself is also counted
	$needle_path = realpath($needle_path);
	$haystack_pack = realpath($haystack_pack);

	// finding needlemo

	if ($needle_path === $haystack_pack) return true;

	$recursiveDirectoryIterator = new RecursiveDirectoryIterator($haystack_pack);
	$iterator = new RecursiveIteratorIterator($recursiveDirectoryIterator, RecursiveIteratorIterator::SELF_FIRST );


	foreach ( $iterator as $path ) {
	$pathname = $path->getRealpath();
	// skipped paths
	$ignored_strpos_paths = ['.git', '.idea'];
	foreach ($ignored_strpos_paths as $ignored_strpos_path) {
	if (strpos($pathname, $ignored_strpos_path) !== false) {
	continue 2; // outer for loop
	}
	}

	if ($path->isDir()) {
	if(is_useless_dot_path($pathname)) continue;
	if($pathname === $needle_path) return true;
	}
	}
	return false;
	}

	if (isset($_GET['dir'])) {
	$realpath = realpath($_GET['dir']);
	if ($realpath !== false && is_dir($realpath)) {
	$directory = os_slash_path($_GET['dir']);
	$directory_realpath = $realpath;
	$webroot = os_slash_path($_SERVER['DOCUMENT_ROOT']);
	$webroot_realpath = realpath($webroot);

	if (strpos($webroot, $directory) === false) {
	$inside_web_root = false;
	} else {
	$inside_web_root = is_inside_dir_recursive($directory, $webroot);
	}
	}
	}

	$title = basename($directory);

	function sorted_scan_dir_for_files($path) {
	$paths = [];
	foreach (new DirectoryIterator($path) as $file) {
	if ($file->isFile()) {
	if (in_array(strtolower($file->getExtension()), ['jpg', 'jpeg', 'png'])) {
	$paths[] = $file->getFilename();
	}
	}
	}
	return $paths;
	}

	?>
	<!DOCTYPE html>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>

	body {
	line-height: 1.6;
	font-size: 18px;
	background-color: #222222//#36393E/;
	color: #FEFEFE;
	font-family: Arial, sans-serif, "Times New Roman", serif;
	text-align: center;
	}

	#body {
	margin: 5px auto;
	padding: 0 10px;

	width: auto;
	min-width: 70%;
	}

	/* using resolution instead of device-width because firefox is a zooming little boy */
	@media (min-device-width: 660px ), (min-resolution: 240dpi) {
	#body {
	width: 576px;
	max-width: 659px;
	min-width: unset;
	}
	/body { background-color: blue; }/

	@media (min-width: 766px) {
	#body {
	width: 672px;
	max-width: 765px;
	}
	/body { background-color: black; }/
	}

	@media (min-width: 960px) {
	#body {
	width: 864px;
	max-width: 959px;
	}
	/body { background-color: yellow; }/
	}
	}

	.image {
	height: auto;
	width: 100%;

	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;

	margin-top: 7.5%;
	margin-bottom: 7.5%;

	align-items: center;
	}

	.label { margin: 1em; }

	img {
	height: auto;
	width: 100%;
	/* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
	box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.5), 0 0.75em 2.5em 0 rgba(0, 0, 0, 0.19);
	}

	.header {
	margin: 2.5em;
	}

	.header > h1, .header > p {
	line-height: 0.8;
	}

	.index-links p {
	line-height: 1;
	}

	h1,h2,h3 {
	line-height: 1.2;
	}

	/* unvisited link */
	a:link {
	color: lightsteelblue;
	}

	/* visited link */
	a:visited {
	color: deeppink;
	}

	/* mouse over link */
	a:hover {
	background: linear-gradient(90deg,darkorange,deeppink);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	/* selected link */
	a:active {
	color: deepskyblue;
	}

	</style>
	<title><?=$title?></title>
	<div id="body">
	<div class="header">
	<h1 id='title'><?=$title?></h1>
	</div>
	<?php
	foreach (sorted_scan_dir_for_files($directory) as $filename) {
	if ($inside_web_root) {
	$webroot_path = str_replace($webroot, "", $directory);
	$path = url_slash_path($webroot_path . '/' . $filename);
	} else {
	$b64image = base64_encode(file_get_contents($directory . DIRECTORY_SEPARATOR . $filename));
	$path = "data:image/png;base64,$b64image";
	}
	?>
	<div class="image">
	<span class="label">
	Image <?=$filename?>
	</span>
	<img src="<?=$path?>" alt="<?=$title?> <?=$filename?>"/>
	</div>
	<?php } ?>
	</div>