#!/bin/bash

# Define folder containing images
IMAGE_FOLDER="NOSIE"

# Output HTML file
OUTPUT_HTML="NOSIE.html"

# Function to generate masonry grid HTML
generate_masonry_html() {
    local img_folder="$1"
    local output_file="$2"
    local images=("$img_folder"/*)
    local num_images=${#images[@]}
    
    # Shuffle the array of images
    shuffled_images=($(shuf -e "${images[@]}"))

    # Generate HTML
    cat << EOF > "$output_file"
<html>
<head>
<style>
    .masonry { column-count: 3; column-gap: 10px; }
    .masonry-item { display: inline-block; margin-bottom: 10px; width: calc(33.33% - 10px); }
    .masonry-item img { max-width: 100%; max-height: 100%; }
</style>
</head>
<body>
<div class="masonry">
EOF

    # Iterate through shuffled images to create HTML elements
    for img_path in "${shuffled_images[@]}"; do
        echo "    <div class='masonry-item'><img src='$img_path'></div>" >> "$output_file"
    done

    # Close HTML tags
    echo "</div>" >> "$output_file"
    echo "</body>" >> "$output_file"
    echo "</html>" >> "$output_file"
}

# Generate masonry grid HTML
generate_masonry_html "$IMAGE_FOLDER" "$OUTPUT_HTML"

echo "Masonry grid HTML generated at $OUTPUT_HTML"

