pacochi/crypkos.htm

## crypkos.htm
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Crypkos</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <meta name="robots" content="none">
    <style type="text/css">
body {
  background-color: #fafafa;
}
h1 {
  font-size: 20px;
  color: #777;
  text-align:center;
}
main {
  display: flex;
  flex-wrap: wrap;
}
section {
  width: 256px;
  margin: 5px;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
  background-color: white;
}
img {
  width: 256px;
  border-radius: 5px 5px 0 0;
  max-width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: all 100ms 0s ease;
}
img.zoom {
  width: 512px;
  border-radius: 5px;
  position: fixed;
  top: calc(50% - 256px);
  left: calc(50% - 256px);
  z-index: 2;
  cursor: zoom-out;
}
img.zoom+div::before {
  content: ' ';
  position: fixed;
  top:0px;
  left:0px;
  z-index: 1;
  background-color: black;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}
section div {
  padding: 20px;
}
section h2 {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}
section p {
  color: #777;
  font-size: 16px;
  line-height: 1.5;
}
em {
  color: #555;
  font-size: 14px;
  margin: 0px 4px;
  font-style: normal;
}
p.dropme {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align:center;
  color: #555;
  font-size: 20px;
}
    </style>
  </head>
  <body>
    <h1>Crypkos</h1>
    <main>
    </main>
    <script type="text/javascript">
(() => {

const E = (name, attr = {}, ...children) => {

	const element = Object.assign(document.createElement(name), attr);
	children.forEach(child => element.appendChild(child));
	return element;

};
const T = str => (str === null) ? '' : str;

if (location.host == 'hen.acho.co') {

	document.body.appendChild(E('a', {
	 href: location.href,
	 download: 'crypkos.htm'
	}, new Text('この HTML ファイルをダウンロードして Crypkos フォルダに入れて開いてね。')));

	return;

}

const deal = metadata => metadata.forEach(prof => {

	main.appendChild(E('section', {},
	 E('img', {
	  src: './' + encodeURIComponent('#' + prof.id + ((prof.name === null) ? '' : ' ' + prof.name)) + '.jpg',
	  onclick() { this.className = this.className ? '' : 'zoom'; }
	 }),
	 E('div', {},
	  E('h2', {},
	   new Text(T(prof.name)),
	   E('em', {}, new Text(` #${prof.id}`)),
	   E('em', {}, new Text(`iter: ${prof.iter}`))
	  ),
	  E('p', {}, new Text(T(prof.bio)))
	 )
	));

});
const main = document.querySelector('main');

fetch('./metadata.json').then(responce => responce.json()).then(metadata => deal(metadata)).catch(e => {

	const reader = new FileReader();
	reader.addEventListener('load', e => 	deal(JSON.parse(e.target.result)), false);

	const guard = e => { e.stopPropagation(); e.preventDefault(); };
	main.addEventListener('drop', e => {

		main.textContent = '';
		main.style.height = 'auto';
		reader.readAsText(e.dataTransfer.files[0]);
		e.stopPropagation();
		e.preventDefault();

	}, { once: true });
	main.addEventListener('dragenter', guard, false);
	main.addEventListener('dragover', guard, false);

	main.style.width = '100%';
	main.style.height = Math.trunc(window.innerHeight - main.getBoundingClientRect().top) + 'px';
	main.appendChild(E('p', { className: 'dropme' }, new Text('ここら辺に metadata.json をドラッグアンドドロップしてね')));

});

})();
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>Crypkos</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="referrer" content="no-referrer">
	<meta name="robots" content="none">
	<style type="text/css">
	body {
	background-color: #fafafa;
	}
	h1 {
	font-size: 20px;
	color: #777;
	text-align:center;
	}
	main {
	display: flex;
	flex-wrap: wrap;
	}
	section {
	width: 256px;
	margin: 5px;
	border-radius: 5px;
	box-shadow: 0 2px 5px #ccc;
	background-color: white;
	}
	img {
	width: 256px;
	border-radius: 5px 5px 0 0;
	max-width: 100%;
	height: auto;
	cursor: zoom-in;
	transition: all 100ms 0s ease;
	}
	img.zoom {
	width: 512px;
	border-radius: 5px;
	position: fixed;
	top: calc(50% - 256px);
	left: calc(50% - 256px);
	z-index: 2;
	cursor: zoom-out;
	}
	img.zoom+div::before {
	content: ' ';
	position: fixed;
	top:0px;
	left:0px;
	z-index: 1;
	background-color: black;
	opacity: 0.5;
	width: 100%;
	height: 100%;
	}
	section div {
	padding: 20px;
	}
	section h2 {
	font-size: 20px;
	margin-bottom: 20px;
	text-align: center;
	color: #333;
	}
	section p {
	color: #777;
	font-size: 16px;
	line-height: 1.5;
	}
	em {
	color: #555;
	font-size: 14px;
	margin: 0px 4px;
	font-style: normal;
	}
	p.dropme {
	position: absolute;
	top: 50%;
	width: 100%;
	text-align:center;
	color: #555;
	font-size: 20px;
	}
	</style>
	</head>
	<body>
	<h1>Crypkos</h1>
	<main>
	</main>
	<script type="text/javascript">
	(() => {

	const E = (name, attr = {}, ...children) => {

	const element = Object.assign(document.createElement(name), attr);
	children.forEach(child => element.appendChild(child));
	return element;

	};
	const T = str => (str === null) ? '' : str;

	if (location.host == 'hen.acho.co') {

	document.body.appendChild(E('a', {
	href: location.href,
	download: 'crypkos.htm'
	}, new Text('この HTML ファイルをダウンロードして Crypkos フォルダに入れて開いてね。')));

	return;

	}

	const deal = metadata => metadata.forEach(prof => {

	main.appendChild(E('section', {},
	E('img', {
	src: './' + encodeURIComponent('#' + prof.id + ((prof.name === null) ? '' : ' ' + prof.name)) + '.jpg',
	onclick() { this.className = this.className ? '' : 'zoom'; }
	}),
	E('div', {},
	E('h2', {},
	new Text(T(prof.name)),
	E('em', {}, new Text(` #${prof.id}`)),
	E('em', {}, new Text(`iter: ${prof.iter}`))
	),
	E('p', {}, new Text(T(prof.bio)))
	)
	));

	});
	const main = document.querySelector('main');

	fetch('./metadata.json').then(responce => responce.json()).then(metadata => deal(metadata)).catch(e => {

	const reader = new FileReader();
	reader.addEventListener('load', e => deal(JSON.parse(e.target.result)), false);

	const guard = e => { e.stopPropagation(); e.preventDefault(); };
	main.addEventListener('drop', e => {

	main.textContent = '';
	main.style.height = 'auto';
	reader.readAsText(e.dataTransfer.files[0]);
	e.stopPropagation();
	e.preventDefault();

	}, { once: true });
	main.addEventListener('dragenter', guard, false);
	main.addEventListener('dragover', guard, false);

	main.style.width = '100%';
	main.style.height = Math.trunc(window.innerHeight - main.getBoundingClientRect().top) + 'px';
	main.appendChild(E('p', { className: 'dropme' }, new Text('ここら辺に metadata.json をドラッグアンドドロップしてね')));

	});

	})();
	</script>
	</body>
	</html>