diff options
| author | dan <[email protected]> | 2023-10-31 11:04:59 -0400 |
|---|---|---|
| committer | dan <[email protected]> | 2023-10-31 11:04:59 -0400 |
| commit | b82b2b1a4051fe3ee0144f44791397a30ca17dd5 (patch) | |
| tree | 7ca62dd3772d2a4b74d677a26baafb5ae3bc0cfa /index.html | |
| download | freegram-b82b2b1a4051fe3ee0144f44791397a30ca17dd5.tar.gz freegram-b82b2b1a4051fe3ee0144f44791397a30ca17dd5.tar.bz2 freegram-b82b2b1a4051fe3ee0144f44791397a30ca17dd5.zip | |
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..4e776f5 --- /dev/null +++ b/index.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html> + <head> + <title>danrh</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <style> + body { + font-family: sans-serif; + background-color: #fdfded; + margin: 2em auto; + max-width: 97vw; + color: #1a1a1a; + } + h1 { + font-family: Georgia, serif; + display: flex; + justify-content: center; + } + em { + display: flex; + justify-content: center; + } + .image-container { + margin: 2px; + width: min(480px,95vw); + height: min(480px,95vw); + border-radius: 10px; + overflow: hidden; + } + .image-container-inner { + border-radius: 10px; + width: 100%; + position: relative; + padding-top: 100%; + background: black; + overflow: hidden; + } + .image-container-inner img { + position: absolute; + top: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + left:50%; + } + img { + max-width: 100%; + max-height: 100%; + } + #root { + display: flex; + justify-content: center; + } + #imageroot { + + } + @media only screen and (min-width: 500px) { + body { + width: 500px; + } + } + @media only screen and (min-width: 1000px) { + body { + width: 1000px; + } + } + @media only screen and (min-width: 1500px) { + body { + width: 1500px; + } + } + @media only screen and (min-width: 2000px) { + body { + width: 2000px; + } + } + .image-caption { + position: relative; + top: -10%; + display: flex; + justify-content: space-between; + color: #fdfded; + background: #000a; + padding: 0 1em; + font-size: 0.9em; + } + .image-caption span { + padding: 0.4em; + } + </style> + </head> + <body> + <h1>Some Photos</h1> + <em>That I either took or am a subject of.</em> + <div id="root"></div> + </body> +<script> +const $ = innerHTML => Object.assign(document.createElement('div'), { innerHTML:innerHTML||'<div></div>' }).firstChild; + +Promise.all([ + fetch("images.json").then(r => r.json()), + fetch("captions.json").then(r => r.json()) +]) + .then(([images, captions]) => { + root.appendChild($(`<div id="imageroot"></div>`)); + images.forEach(({path}) => { + const caption = captions[path] || ''; + const date = new Date(path.replace(/.*\/(\d{4})(\d{2})(\d{2}).*/,"$1-$2-$3T23:59:59.000Z")).toDateString(); + const imgBox = $(`<div class="image-container" style="float:left;"></div>`); + const imgBoxOuter = $(`<div class="image-container-inner">`) + imgBox.appendChild(imgBoxOuter); + imgBoxOuter.appendChild($( + `<img loading="lazy" src="${path}">` + )); + imgBox.appendChild($( + `<div class="image-caption"> + <span style="visibility: ${caption ? "visible" : "hidden"};">${caption}</span> + <span>${date}</span> + </div>` + )); + imageroot.appendChild(imgBox); + }); + }); + +</script> +</html> |