917 #48
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>© 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 |