kissarat/nginx-photo-viewer.html

## nginx-photo-viewer.html
<!DOCTYPE html>
<html>

<head>
    <title>Nginx Photo Viewer</title>
    <style>
        ul {
            padding-left: 0;
            display: flex;
            flex-wrap: wrap;
        }

        li {
            list-style: none;
            padding: 4px;
            width: 200px;
            height: 200px;
            text-align: center;
        }

        li.selected {
            background-color: gray;
        }

        li.selected img {
            opacity: 0.6;
        }

        img {
            max-width: 100%;
            max-height: 100%;
        }

        #errorMessage {
            color: red;
        }
    </style>
</head>

<body>
    <div id="errorMessage"></div>
    <ul></ul>
    <script>
        async function loadImages(ul) {
            try {
                const r = await fetch('/images')
                const items = await r.json()
                const fragment = document.createDocumentFragment()
                for (const item of items) {
                    if ('file' === item.type && /\.jpg$/.test(item.name)) {
                        const li = document.createElement('li')
                        li.innerHTML = `<img src="/images/${item.name}" alt="${item.name}" />`
                        li.addEventListener('click', function (e) {
                            e.currentTarget.classList.toggle('selected')
                        })
                        fragment.appendChild(li)
                    }
                }
                ul.appendChild(fragment)
            } catch (err) {
                errorMessage.innerHTML = err.message || err.toString()
            }
        }

        window.addEventListener('DOMContentLoaded', function () {
            const ul = document.querySelector('ul')
            loadImages(ul)
        })
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Nginx Photo Viewer</title>
	<style>
	ul {
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	}

	li {
	list-style: none;
	padding: 4px;
	width: 200px;
	height: 200px;
	text-align: center;
	}

	li.selected {
	background-color: gray;
	}

	li.selected img {
	opacity: 0.6;
	}

	img {
	max-width: 100%;
	max-height: 100%;
	}

	#errorMessage {
	color: red;
	}
	</style>
	</head>

	<body>
	<div id="errorMessage"></div>
	<ul></ul>
	<script>
	async function loadImages(ul) {
	try {
	const r = await fetch('/images')
	const items = await r.json()
	const fragment = document.createDocumentFragment()
	for (const item of items) {
	if ('file' === item.type && /\.jpg$/.test(item.name)) {
	const li = document.createElement('li')
	li.innerHTML = `<img src="/images/${item.name}" alt="${item.name}" />`
	li.addEventListener('click', function (e) {
	e.currentTarget.classList.toggle('selected')
	})
	fragment.appendChild(li)
	}
	}
	ul.appendChild(fragment)
	} catch (err) {
	errorMessage.innerHTML = err.message \|\| err.toString()
	}
	}

	window.addEventListener('DOMContentLoaded', function () {
	const ul = document.querySelector('ul')
	loadImages(ul)
	})
	</script>
	</body>

	</html>