Skip to content

917

917 #48

Workflow file for this run

name: 917
on:
push:
paths:
- 'majortom/917/pictures/**'
- 'majortom/917.html'
workflow_dispatch:
jobs:
update-gallery:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Generate 917.html
run: |
echo "Generating 917.html..."
echo '<!DOCTYPE html>' > majortom/917.html
echo '<html lang="en">' >> majortom/917.html
echo '<head>' >> majortom/917.html
echo ' <meta charset="UTF-8">' >> majortom/917.html
echo ' <meta name="viewport" content="width=device-width, initial-scale=1.0">' >> majortom/917.html
echo ' <title>Porsche 917</title>' >> majortom/917.html
echo ' <link rel="stylesheet" href="main.css">' >> majortom/917.html
echo ' <style>' >> majortom/917.html
echo ' #myMosaic { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; }' >> majortom/917.html
echo ' #myMosaic img { border: none; max-width: calc(100% / 8); height: auto; cursor: pointer; }' >> majortom/917.html
echo ' h1 { text-align: center; color: #dedcff; margin: 80px 0 14px; font-size: 14px; }' >> majortom/917.html
echo ' #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; z-index: 1000; justify-content: center; align-items: center; }' >> majortom/917.html
echo ' #overlay.show { display: flex; }' >> majortom/917.html
echo ' .overlay-content { display: flex; justify-content: center; align-items: center; max-width: 90%; max-height: 90%; }' >> majortom/917.html
echo ' #overlay img { max-width: 100%; max-height: 100%; display: block; }' >> majortom/917.html
echo ' #close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; }' >> majortom/917.html
echo ' </style>' >> majortom/917.html
echo '</head>' >> majortom/917.html
echo '<body>' >> majortom/917.html
echo ' <header>' >> majortom/917.html
echo ' <ul class="navbar-top">' >> majortom/917.html
echo ' <li id="nav-company">' >> majortom/917.html
echo ' <a href="https://brunurb.github.io">brunurb</a>' >> majortom/917.html
echo ' </li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/">Home</a></li>' >> majortom/917.html
echo ' <li class="dropdown">' >> majortom/917.html
echo ' <a href="#">About ▼</a>' >> majortom/917.html
echo ' <ul class="dropdown-menu">' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/mooo/index.html">About</a></li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/web">links</a></li>' >> majortom/917.html
echo ' <li><a href="mailto:eargdu3d5@mozmail.com">Contact</a></li>' >> majortom/917.html
echo ' </ul>' >> majortom/917.html
echo ' </li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/majortom/">Portfolio</a></li>' >> majortom/917.html
echo ' <li><a href="https://old.reddit.com/r/brunurb/" target="_blank">Blog</a></li>' >> majortom/917.html
echo ' <li class="dropdown">' >> majortom/917.html
echo ' <a href="#">Works ▼</a>' >> majortom/917.html
echo ' <ul class="dropdown-menu">' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/mooo">Presentations</a></li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/majortom/prettymaps">prettymaps</a></li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/majortom/sketchup">sketchup</a></li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/majortom/vectors">vectors</a></li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/web">Website 2</a></li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/majortom">8bit</a></li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/shortcuts">Shortcuts</a></li>' >> majortom/917.html
echo ' <li><a href="https://brunurb.github.io/startpage">Startpage</a></li>' >> majortom/917.html
echo ' </ul>' >> majortom/917.html
echo ' </li>' >> majortom/917.html
echo ' </ul>' >> majortom/917.html
echo ' </header>' >> majortom/917.html
echo ' <main>' >> majortom/917.html
echo ' <h1>Porsche 917</h1>' >> majortom/917.html
echo ' <div id="myMosaic">' >> majortom/917.html
for img in $(ls majortom/917/pictures | grep -E '\.jpeg$|\.jpg$|\.gif$|\.svg$|\.png$|\.webp$'); do
echo "<img src='https://brunurb.github.io/majortom/917/pictures/$img' alt='Gallery Image' data-full='https://brunurb.github.io/majortom/917/pictures/$img' class='thumbnail' onclick='showImage(this.dataset.full)' />" >> majortom/917.html
done
echo ' </div>' >> majortom/917.html
echo ' <div id="overlay" onclick="closeOverlay(event)">' >> majortom/917.html
echo ' <div class="overlay-content">' >> majortom/917.html
echo ' <span id="close">×</span>' >> majortom/917.html
echo ' <img id="overlay-image" src="" alt="Full Size Image" />' >> majortom/917.html
echo ' </div>' >> majortom/917.html
echo ' </div>' >> majortom/917.html
echo ' </main>' >> majortom/917.html
echo ' <footer>' >> majortom/917.html
echo ' <p>&copy; 2024 brunurb</p>' >> majortom/917.html
echo ' </footer>' >> majortom/917.html
echo ' <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>' >> majortom/917.html
echo ' <script type="text/javascript">' >> majortom/917.html
echo ' document.addEventListener("DOMContentLoaded", function() {' >> majortom/917.html
echo ' function showImage(src) {' >> majortom/917.html
echo ' const overlay = document.getElementById("overlay");' >> majortom/917.html
echo ' const overlayImage = document.getElementById("overlay-image");' >> majortom/917.html
echo ' overlayImage.src = src;' >> majortom/917.html
echo ' overlay.classList.add("show");' >> majortom/917.html
echo ' }' >> majortom/917.html
echo ' function closeOverlay(event) {' >> majortom/917.html
echo ' if (event.target.id === "overlay" || event.target.id === "close") {' >> majortom/917.html
echo ' const overlay = document.getElementById("overlay");' >> majortom/917.html
echo ' overlay.classList.remove("show");' >> majortom/917.html
echo ' }' >> majortom/917.html
echo ' }' >> majortom/917.html
echo ' const images = document.querySelectorAll("#myMosaic img");' >> majortom/917.html
echo ' images.forEach(image => {' >> majortom/917.html
echo ' image.addEventListener("click", function() {' >> majortom/917.html
echo ' showImage(this.dataset.full);' >> majortom/917.html
echo ' });' >> majortom/917.html
echo ' });' >> majortom/917.html
echo ' const overlay = document.getElementById("overlay");' >> majortom/917.html
echo ' overlay.addEventListener("click", closeOverlay);' >> majortom/917.html
echo ' const closeButton = document.getElementById("close");' >> majortom/917.html
echo ' closeButton.addEventListener("click", closeOverlay);' >> majortom/917.html
echo ' });' >> majortom/917.html
echo ' </script>' >> majortom/917.html
echo '</body>' >> majortom/917.html
echo '</html>' >> majortom/917.html
- name: Commit changes
run: |
git config --local user.email "github-actions@github.com"
git config --local user.name "GitHub Action"
git add majortom/917.html
git commit -m "Regenerate majortom/917.html for mosaic gallery with overlay" || echo "No changes to commit"
git push origin master # Make sure this matches your main branch