#!/usr/bin/env python
from pathlib import Path
import base64
print("""
Write JPG responsive gallery as one-file HTML
""")
# see https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive
jpgImagePath='jpg/'
title='Photos...'
htmlHd = f'''<!DOCTYPE html><html><head><meta charset="utf-8">
<title>{title}</title>'''+'''<style>
div.gallery {border: 1px solid #ccc;}
div.gallery:hover {border: 1px solid #777;}
div.gallery img {width: 100%; height: auto;}
div.desc {padding: 15px; text-align: center;}
* {box-sizing: border-box;}
.responsive {padding: 0 6px; float: left; width: 33.33333%;}
@media only screen and (max-width: 950px) {.responsive { width: 49.99999%; margin: 6px 0; }}
@media only screen and (max-width: 700px) {.responsive { width: 100%; }}
.clearfix:after {content: ""; display: table; clear: both;}
</style></head><body>
'''
htmlFt = f'''<div class="clearfix"></div></body></html>'''
html = f'''<h2>{title}</h2>'''
p = Path(jpgImagePath)
jpgList = sorted(p.glob('*.jpg'), key=lambda f: f.stem) #;print(jpgList) #sorted excluding '.jpg'
for jpg in jpgList:
with open(jpg, "rb") as imgFile:
print('\t'+jpg.name)
encoded_string = base64.b64encode(imgFile.read()) #;print(encoded_string[-5:])
html += f'''<div class="responsive"><div class="gallery">
<img src="data:image/jpg;base64, {encoded_string.decode('utf-8')}" alt="{jpg.name}">
<div class="desc">{jpg.name}</div>
</div></div>
'''
html = f'''{htmlHd}
{html}
{htmlFt}
'''
htmlFileName=f'''{title}.html'''
with open(htmlFileName,'w',encoding='utf-8') as txt: txt.write(html)
print('->',htmlFileName);